Setting up Pintura Image Editor with SvelteKit

For a quick start use the SvelteKit example project as a guideline.

It includes a normal, modal, and overlay editor example, as well as an example showing how to integrate FilePond with Pintura.

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