Configuration

Your SvelteKit project configuration lives in a svelte.config.js file at the root of your project. This config object is used by SvelteKit and other tooling that integrates with Svelte.

Basic Example

// svelte.config.js
import adapter from '@sveltejs/adapter-auto';

export default {
  kit: {
    adapter: adapter()
  }
};

Config

extensions

string[]

default:"[\".svelte\"]"

An array of file extensions that SvelteKit will treat as Svelte components.

kit

KitConfig

SvelteKit-specific configuration options. See KitConfig below.

KitConfig

The kit property configures SvelteKit and can have the following properties:

Adapter

kit.adapter

Adapter

default:"undefined"

Your adapter is run when executing vite build. It determines how the output is converted for different platforms.

import adapter from '@sveltejs/adapter-auto';

export default {
  kit: {
    adapter: adapter()
  }
};

Alias

kit.alias

Record<string, string>

default:"{}"

An object containing zero or more aliases used to replace values in import statements. These aliases are automatically passed to Vite and TypeScript.

export default {
  kit: {
    alias: {
      '$components': 'src/lib/components',
      '$utils': 'src/lib/utils'
    }
  }
};

Run npm run dev to have SvelteKit generate the required alias configuration in jsconfig.json or tsconfig.json.

App Directory

kit.appDir

string

default:"_app"

The directory where SvelteKit keeps its stuff, including static assets (such as JS and CSS) and internally-used routes.If paths.assets is specified, there will be two app directories — ${paths.assets}/${appDir} and ${paths.base}/${appDir}.

CSP

kit.csp

object

Content Security Policy configuration. CSP helps protect your users against cross-site scripting (XSS) attacks.

export default {
  kit: {
    csp: {
      mode: 'auto',
      directives: {
        'script-src': ['self']
      },
      reportOnly: {
        'script-src': ['self'],
        'report-uri': ['/']
      }
    }
  }
};

kit.csp.mode

'hash' | 'nonce' | 'auto'

Whether to use hashes or nonces to restrict <script> and <style> elements. 'auto' uses hashes for prerendered pages and nonces for dynamically rendered pages.

kit.csp.directives

CspDirectives

Directives that will be added to Content-Security-Policy headers.

kit.csp.reportOnly

CspDirectives

Directives that will be added to Content-Security-Policy-Report-Only headers.

CSRF

kit.csrf

object

Protection against cross-site request forgery (CSRF) attacks.

kit.csrf.checkOrigin

boolean

default:"true"

Whether to check the incoming origin header for POST, PUT, PATCH, or DELETE form submissions.

Deprecated: Use trustedOrigins: ['*'] instead. This option will be removed in a future version.

kit.csrf.trustedOrigins

string[]

default:"[]"

An array of origins that are allowed to make cross-origin form submissions to your app.

export default {
  kit: {
    csrf: {
      trustedOrigins: [
        'https://checkout.stripe.com',
        'https://accounts.google.com'
      ]
    }
  }
};

If the array contains '*', all origins will be trusted (not recommended!).

Embedded

kit.embedded

boolean

default:"false"

Whether or not the app is embedded inside a larger app. If true, SvelteKit will add its event listeners on the parent of %sveltekit.body% instead of window.

It is generally not supported to embed multiple SvelteKit apps on the same page.

Environment Variables

kit.env

object

Environment variable configuration.

kit.env.dir

string

default:"."

The directory to search for .env files.

kit.env.publicPrefix

string

default:"PUBLIC_"

A prefix that signals that an environment variable is safe to expose to client-side code.

export default {
  kit: {
    env: {
      publicPrefix: 'PUBLIC_'
    }
  }
};

See

env/static/public](/api/env-static-public) and [

env/dynamic/public.

kit.env.privatePrefix

string

default:""

A prefix that signals that an environment variable is unsafe to expose to client-side code. Variables matching neither the public nor private prefix will be discarded.See

env/static/private](/api/env-static-private) and [

env/dynamic/private.

Inline Style Threshold

kit.inlineStyleThreshold

number

default:"0"

Inline CSS inside a <style> block at the head of the HTML. This value specifies the maximum length of a CSS file in UTF-16 code units to be inlined.

This results in fewer initial requests but generates larger HTML output and reduces browser cache effectiveness. Use advisedly.

Module Extensions

kit.moduleExtensions

string[]

default:"[\".js\", \".ts\"]"

An array of file extensions that SvelteKit will treat as modules. Files with extensions that match neither config.extensions nor config.kit.moduleExtensions will be ignored by the router.

Output Directory

kit.outDir

string

default:".svelte-kit"

The directory that SvelteKit writes files to during dev and build. You should exclude this directory from version control.

Output

kit.output

object

Options related to the build output format.

kit.output.preloadStrategy

'modulepreload' | 'preload-js' | 'preload-mjs'

default:"modulepreload"

SvelteKit will preload the JavaScript modules needed for the initial page to avoid import ‘waterfalls’.

modulepreload - uses <link rel="modulepreload">. Best results in Chromium, Firefox 115+, and Safari 17+.
preload-js - uses <link rel="preload">. Prevents waterfalls but Chromium parses modules twice.
preload-mjs - uses <link rel="preload"> with .mjs extension to prevent double-parsing.

kit.output.bundleStrategy

'split' | 'single' | 'inline'

default:"split"

How JavaScript and CSS files are loaded.

'split' - Splits the app into multiple .js/.css files loaded lazily (recommended)
'single' - Creates one .js bundle and one .css file for the entire app
'inline' - Inlines all JavaScript and CSS into the HTML (usable without a server)

Paths

kit.paths

object

Path configuration for your app.

kit.paths.base

string

default:""

A root-relative path that must start, but not end with / (e.g. /base-path). Specifies where your app is served from.

export default {
  kit: {
    paths: {
      base: '/my-app'
    }
  }
};

Use base from $app/paths in your links: <a href="{base}/page">Link</a>.

kit.paths.assets

string

default:""

An absolute path that your app’s files are served from. Useful if files are served from a storage bucket.

export default {
  kit: {
    paths: {
      assets: 'https://cdn.example.com'
    }
  }
};

kit.paths.relative

boolean

default:"true"

Whether to use relative asset paths.If true, base and assets imported from $app/paths will be replaced with relative asset paths during server-side rendering.Set to false if your app uses a <base> element.

Prerender

kit.prerender

object

Prerendering configuration. See Prerendering.

kit.prerender.concurrency

number

default:"1"

How many pages can be prerendered simultaneously.

kit.prerender.crawl

boolean

default:"true"

Whether SvelteKit should find pages to prerender by following links from entries.

kit.prerender.entries

Array<'*' | `/${string}`>

default:"[\"*\"]"

An array of pages to prerender, or start crawling from. The * string includes all routes with no required parameters.

kit.prerender.handleHttpError

'fail' | 'warn' | 'ignore' | Function

default:"fail"

How to respond to HTTP errors encountered while prerendering.

export default {
  kit: {
    prerender: {
      handleHttpError: ({ path, referrer, message }) => {
        if (path === '/not-found' && referrer === '/blog') {
          return;
        }
        throw new Error(message);
      }
    }
  }
};

kit.prerender.origin

string

default:"http://sveltekit-prerender"

The value of url.origin during prerendering; useful if it is included in rendered content.

Router

kit.router

object

Router configuration.

kit.router.type

'pathname' | 'hash'

default:"pathname"

What type of client-side router to use.

'pathname' - Current URL pathname determines the route (default)
'hash' - Route determined by location.hash (disables SSR and prerendering)

kit.router.resolution

'client' | 'server'

default:"client"

How to determine which route to load when navigating.

'client' - Use manifest loaded upfront (faster navigation, larger initial load)
'server' - Ask server for each navigation (smaller initial load, hidden route list)

Service Worker

kit.serviceWorker

object

Service worker configuration.

kit.serviceWorker.register

boolean

default:"true"

Whether to automatically register the service worker, if it exists.

kit.serviceWorker.files

(filename: string) => boolean

default:"(filename) => !/\\.DS_Store/.test(filename)"

Determine which files in your static directory will be available in $service-worker.files.

TypeScript

kit.typescript

object

TypeScript configuration.

kit.typescript.config

(config: Record<string, any>) => Record<string, any> | void

default:"(config) => config"

A function that allows you to edit the generated tsconfig.json. You can mutate the config or return a new one.

export default {
  kit: {
    typescript: {
      config: (config) => {
        config.extends = '../tsconfig.base.json';
        return config;
      }
    }
  }
};

Version

kit.version

object

Client-side navigation can be buggy if you deploy a new version while people are using it. SvelteKit helps solve this through version management.

kit.version.name

string

default:"Date.now().toString()"

The current app version string. This must be deterministic (e.g. a commit ref rather than Math.random()).

import { execSync } from 'node:child_process';

export default {
  kit: {
    version: {
      name: execSync('git rev-parse HEAD').toString().trim()
    }
  }
};

kit.version.pollInterval

number

default:"0"

The interval in milliseconds to poll for version changes. If 0, no polling occurs.

Complete Example

// svelte.config.js
import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

export default {
  preprocess: vitePreprocess(),
  
  kit: {
    adapter: adapter(),
    
    alias: {
      '$components': 'src/lib/components',
      '$utils': 'src/lib/utils'
    },
    
    env: {
      publicPrefix: 'PUBLIC_',
      privatePrefix: 'PRIVATE_'
    },
    
    paths: {
      base: '/my-app'
    },
    
    prerender: {
      entries: ['*'],
      crawl: true
    },
    
    csp: {
      mode: 'auto',
      directives: {
        'script-src': ['self']
      }
    }
  }
};

Core Modules

$app Modules

$env Modules

Configuration

Basic Example

Config

KitConfig

Adapter

Alias

App Directory

CSP

CSRF

Embedded

Environment Variables

Inline Style Threshold

Module Extensions

Output Directory

Output

Paths

Prerender

Router

Service Worker

TypeScript

Version

Complete Example

See Also

Core Modules

$app Modules

$env Modules

Configuration

​Basic Example

​Config

​KitConfig

​Adapter

​Alias

​App Directory

​CSP

​CSRF

​Embedded

​Environment Variables

​Inline Style Threshold

​Module Extensions

​Output Directory

​Output

​Paths

​Prerender

​Router

​Service Worker

​TypeScript

​Version

​Complete Example

​See Also

Basic Example

Config

KitConfig

Adapter

Alias

App Directory

CSP

CSRF

Embedded

Environment Variables

Inline Style Threshold

Module Extensions

Output Directory

Output

Paths

Prerender

Router

Service Worker

TypeScript

Version

Complete Example

See Also