# Setting up Pintura Image Editor with SvelteKit

For a quick start use the [SvelteKit example project](https://github.com/pqina/pintura-example-sveltekit) 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](../svelte/)

## Using local modules with SvelteKit

Please note that this also requires installing the `@pqina/svelte-pintura` module from `./local_modules`, you can do so by downloading the package zip from the [Pintura Svelte GitHub repository](https://github.com/pqina/pintura-component-svelte).

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.

```js
import { sveltekit } from '@sveltejs/kit/vite';
import { searchForWorkspaceRoot } from 'vite';

/** @type {import('vite').UserConfig} */
const config = {
    plugins: [sveltekit()],
    server: {
        fs: {
            allow: [searchForWorkspaceRoot(process.cwd()), '/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](../../api/image-editor/)