Setting up Pintura Image Editor with SvelteKit
For a quick start use the SvelteKit example project included in the product package. It includes a normal, modal, and overlay editor example.
The SvelteKit installation process is the same as the Svelte installation instructions
Using local modules with SvelteKit
When we're using and local modules we need to make sure SvelteKit can load the JavaScript files in the local_modules
directory.
We can do that by adjusting the vite.config.js
file like shown below.
import { sveltekit } from '@sveltejs/kit/vite';
import { resolve } from 'path';
/** @type {import('vite').UserConfig} */
const config = {
plugins: [sveltekit()],
resolve: {
alias: {
'@pqina/pintura': resolve('./local_modules/pintura/'),
'@pqina/svelte-pintura': resolve('./local_modules/svelte-pintura/'),
'@pqina/filepond-plugin-image-editor': resolve(
'./local_modules/filepond-plugin-image-editor/'
),
},
},
server: {
fs: {
allow: ['./local_modules'],
},
},
};
export default config;
Next steps
With the editor set up, we can continue to configure the editor to our liking by adjusting the available options exposed by the editor API