Modules

SvelteKit makes a number of modules available to your application.

$app/environment permalink

ts
import { browser, building, dev, version } from '$app/environment';

browser permalink

true if the app is running in the browser.

ts
const browser: boolean;

building permalink

SvelteKit analyses your app during the build step by running it. During this process, building is true. This also applies during prerendering.

ts
const building: boolean;

dev permalink

Whether the dev server is running. This is not guaranteed to correspond to NODE_ENV or MODE.

ts
const dev: boolean;

version permalink

The value of config.kit.version.name.

ts
const version: string;

$app/forms permalink

ts
import { applyAction, deserialize, enhance } from '$app/forms';

applyAction permalink

This action updates the form property of the current page with the given data and updates $page.status. In case of an error, it redirects to the nearest error page.

ts
function applyAction<
    Success extends Record<string, unknown> | undefined = Record<string, any>,
    Invalid extends Record<string, unknown> | undefined = Record<string, any>
>(result: ActionResult<Success, Invalid>): Promise<void>;

deserialize permalink

Use this function to deserialize the response from a form submission. Usage:

ts
import { deserialize } from '$app/forms';

async function handleSubmit(event) {
  const response = await fetch('/form?/action', {
    method: 'POST',
    body: new FormData(event.target)
  });

  const result = deserialize(await response.text());
  // ...
}

ts
function deserialize<
    Success extends Record<string, unknown> | undefined = Record<string, any>,
    Invalid extends Record<string, unknown> | undefined = Record<string, any>
>(serialized: string): ActionResult<Success, Invalid>;

enhance permalink

This action enhances a <form> element that otherwise would work without JavaScript.

ts
function enhance<
    Success extends Record<string, unknown> | undefined = Record<string, any>,
    Invalid extends Record<string, unknown> | undefined = Record<string, any>
>(
    formElement: HTMLFormElement,
    /**
     * Called upon submission with the given FormData and the `action` that should be triggered.
     * If `cancel` is called, the form will not be submitted.
     * You can use the abort `controller` to cancel the submission in case another one starts.
     * If a function is returned, that function is called with the response from the server.
     * If nothing is returned, the fallback will be used.
     *
     * If this function or its return value isn't set, it
     * - falls back to updating the `form` prop with the returned data if the action is one same page as the form
     * - updates `$page.status`
     * - resets the `<form>` element and invalidates all data in case of successful submission with no redirect response
     * - redirects in case of a redirect response
     * - redirects to the nearest error page in case of an unexpected error
     *
     * If you provide a custom function with a callback and want to use the default behavior, invoke `update` in your callback.
     */
    submit?: SubmitFunction<Success, Invalid>
): { destroy(): void };

ts
import {
    afterNavigate,
    beforeNavigate,
    disableScrollHandling,
    goto,
    invalidate,
    invalidateAll,
    preloadCode,
    preloadData
} from '$app/navigation';

A lifecycle function that runs the supplied callback when the current component mounts, and also whenever we navigate to a new URL.

afterNavigate must be called during a component initialization. It remains active as long as the component is mounted.

ts
function afterNavigate(callback: (navigation: AfterNavigate) => void): void;

A navigation interceptor that triggers before we navigate to a new URL, whether by clicking a link, calling goto(...), or using the browser back/forward controls. Calling cancel() will prevent the navigation from completing. If the navigation would have directly unloaded the current page, calling cancel will trigger the native browser unload confirmation dialog. In these cases, navigation.willUnload is true.

When a navigation isn't client side, navigation.to.route.id will be null.

beforeNavigate must be called during a component initialization. It remains active as long as the component is mounted.

ts
function beforeNavigate(callback: (navigation: BeforeNavigate) => void): void;

If called when the page is being updated following a navigation (in onMount or afterNavigate or an action, for example), this disables SvelteKit's built-in scroll handling. This is generally discouraged, since it breaks user expectations.

ts
function disableScrollHandling(): void;

Returns a Promise that resolves when SvelteKit navigates (or fails to navigate, in which case the promise rejects) to the specified url. For external URLs, use window.location = url instead of calling goto(url).

ts
function goto(
    url: string | URL,
    opts?: {
        /**
         * If `true`, will replace the current `history` entry rather than creating a new one with `pushState`
         */
        replaceState?: boolean;
        /**
         * If `true`, the browser will maintain its scroll position rather than scrolling to the top of the page after navigation
         */
        noScroll?: boolean;
        /**
         * If `true`, the currently focused element will retain focus after navigation. Otherwise, focus will be reset to the body
         */
        keepFocus?: boolean;
        /**
         * The state of the new/updated history entry
         */
        state?: any;
        /**
         * If `true`, all `load` functions of the page will be rerun. See https://kit.svelte.dev/docs/load#rerunning-load-functions for more info on invalidation.
         */
        invalidateAll?: boolean;
    }
): Promise<void>;

Causes any load functions belonging to the currently active page to re-run if they depend on the url in question, via fetch or depends. Returns a Promise that resolves when the page is subsequently updated.

If the argument is given as a string or URL, it must resolve to the same URL that was passed to fetch or depends (including query parameters). To create a custom identifier, use a string beginning with [a-z]+: (e.g. custom:state) — this is a valid URL.

The function argument can be used define a custom predicate. It receives the full URL and causes load to rerun if true is returned. This can be useful if you want to invalidate based on a pattern instead of a exact match.

ts
// Example: Match '/path' regardless of the query parameters
import { invalidate } from '$app/navigation';

invalidate((url) => url.pathname === '/path');

ts
function invalidate(url: string | URL | ((url: URL) => boolean)): Promise<void>;

Causes all load functions belonging to the currently active page to re-run. Returns a Promise that resolves when the page is subsequently updated.

ts
function invalidateAll(): Promise<void>;

Programmatically imports the code for routes that haven't yet been fetched. Typically, you might call this to speed up subsequent navigation.

You can specify routes by any matching pathname such as /about (to match src/routes/about/+page.svelte) or /blog/* (to match src/routes/blog/[slug]/+page.svelte).

Unlike preloadData, this won't call load functions. Returns a Promise that resolves when the modules have been imported.

ts
function preloadCode(...urls: string[]): Promise<void>;

Programmatically preloads the given page, which means

ensuring that the code for the page is loaded, and
calling the page's load function with the appropriate options.

This is the same behaviour that SvelteKit triggers when the user taps or mouses over an <a> element with data-sveltekit-preload-data. If the next navigation is to href, the values returned from load will be used, making navigation instantaneous. Returns a Promise that resolves when the preload is complete.

ts
function preloadData(href: string): Promise<void>;

$app/paths permalink

ts
import { assets, base } from '$app/paths';

assets permalink

An absolute path that matches config.kit.paths.assets.

If a value for config.kit.paths.assets is specified, it will be replaced with '/_svelte_kit_assets' during vite dev or vite preview, since the assets don't yet live at their eventual URL.

ts
const assets: `https://${string}` | `http://${string}`;

base permalink

A string that matches config.kit.paths.base.

Example usage: <a href="{base}/your-page">Link</a>

ts
const base: `/${string}`;

$app/stores permalink

ts
import { getStores, navigating, page, updated } from '$app/stores';

These stores are contextual on the server — they are added to the context of your root component. This means that page is unique to each request, rather than shared between multiple requests handled by the same server simultaneously.

Because of that, you must subscribe to the stores during component initialization (which happens automatically if you reference the store value, e.g. as $page, in a component) before you can use them.

In the browser, we don't need to worry about this, and stores can be accessed from anywhere. Code that will only ever run on the browser can refer to (or subscribe to) any of these stores at any time.

You can read more about client/server differences in the state management documentation.

getStores permalink

A function that returns all of the contextual stores. On the server, this must be called during component initialization. Only use this if you need to defer store subscription until after the component has mounted, for some reason.

ts
function getStores(): {
    navigating: typeof navigating;
    page: typeof page;
    updated: typeof updated;
};

navigating permalink

A readable store. When navigating starts, its value is a Navigation object with from, to, type and (if type === 'popstate') delta properties. When navigating finishes, its value reverts to null.

On the server, this store can only be subscribed to during component initialization. In the browser, it can be subscribed to at any time.

ts
const navigating: Readable<Navigation | null>;

page permalink

A readable store whose value contains page data.

On the server, this store can only be subscribed to during component initialization. In the browser, it can be subscribed to at any time.

ts
const page: Readable<Page>;

updated permalink

A readable store whose initial value is false. If version.pollInterval is a non-zero value, SvelteKit will poll for new versions of the app and update the store value to true when it detects one. updated.check() will force an immediate check, regardless of polling.

On the server, this store can only be subscribed to during component initialization. In the browser, it can be subscribed to at any time.

ts
const updated: Readable<boolean> & { check(): Promise<boolean> };

$env/dynamic/private permalink

This module provides access to runtime environment variables, as defined by the platform you're running on. For example if you're using adapter-node (or running vite preview), this is equivalent to process.env. This module only includes variables that do not begin with config.kit.env.publicPrefix.

This module cannot be imported into client-side code.

ts
import { env } from '$env/dynamic/private';
console.log(env.DEPLOYMENT_SPECIFIC_VARIABLE);

In dev, $env/dynamic always includes environment variables from .env. In prod, this behavior will depend on your adapter.

$env/dynamic/public permalink

Similar to $env/dynamic/private, but only includes variables that begin with config.kit.env.publicPrefix (which defaults to PUBLIC_), and can therefore safely be exposed to client-side code.

Note that public dynamic environment variables must all be sent from the server to the client, causing larger network requests — when possible, use $env/static/public instead.

ts
import { env } from '$env/dynamic/public';
console.log(env.PUBLIC_DEPLOYMENT_SPECIFIC_VARIABLE);

$env/static/private permalink

Environment variables loaded by Vite from .env files and process.env. Like $env/dynamic/private, this module cannot be imported into client-side code. This module only includes variables that do not begin with config.kit.env.publicPrefix.

Unlike $env/dynamic/private, the values exported from this module are statically injected into your bundle at build time, enabling optimisations like dead code elimination.

ts
import { API_KEY } from '$env/static/private';

Note that all environment variables referenced in your code should be declared (for example in an .env file), even if they don't have a value until the app is deployed:

MY_FEATURE_FLAG=""

You can override .env values from the command line like so:

MY_FEATURE_FLAG="enabled" npm run dev

$env/static/public permalink

Similar to $env/static/private, except that it only includes environment variables that begin with config.kit.env.publicPrefix (which defaults to PUBLIC_), and can therefore safely be exposed to client-side code.

Values are replaced statically at build time.

ts
import { PUBLIC_BASE_URL } from '$env/static/public';

$lib permalink

This is a simple alias to src/lib, or whatever directory is specified as config.kit.files.lib. It allows you to access common components and utility modules without ../../../../ nonsense.

`$lib/server` permalink

A subdirectory of $lib. SvelteKit will prevent you from importing any modules in $lib/server into client-side code. See server-only modules.

$service-worker permalink

ts
import { base, build, files, prerendered, version } from '$service-worker';

This module is only available to service workers.

base permalink

The base path of the deployment. Typically this is equivalent to config.kit.paths.base, but it is calculated from location.pathname meaning that it will continue to work correctly if the site is deployed to a subdirectory. Note that there is a base but no assets, since service workers cannot be used if config.kit.paths.assets is specified.

ts
const base: string;

build permalink

An array of URL strings representing the files generated by Vite, suitable for caching with cache.addAll(build). During development, this is an empty array.

ts
const build: string[];

files permalink

An array of URL strings representing the files in your static directory, or whatever directory is specified by config.kit.files.assets. You can customize which files are included from static directory using config.kit.serviceWorker.files

ts
const files: string[];

prerendered permalink

An array of pathnames corresponding to prerendered pages and endpoints. During development, this is an empty array.

ts
const prerendered: string[];

version permalink

See config.kit.version. It's useful for generating unique cache names inside your service worker, so that a later deployment of your app can invalidate old caches.

ts
const version: string;

@sveltejs/kit permalink

ts
import { error, fail, json, redirect, text } from '@sveltejs/kit';

error permalink

Creates an HttpError object with an HTTP status code and an optional message. This object, if thrown during request handling, will cause SvelteKit to return an error response without invoking handleError. Make sure you're not catching the thrown error, which would prevent SvelteKit from handling it.

ts
function error(status: number, body: App.Error): HttpError;

error permalink

ts
function error(
    status: number,
    // this overload ensures you can omit the argument or pass in a string if App.Error is of type { message: string }
    body?: { message: string } extends App.Error
        ? App.Error | string | undefined
        : never
): HttpError;

fail permalink

Create an ActionFailure object.

ts
function fail<T extends Record<string, unknown> | undefined = undefined>(
    status: number,
    data?: T
): ActionFailure<T>;

json permalink

Create a JSON Response object from the supplied data.

ts
function json(data: any, init?: ResponseInit): Response;

redirect permalink

Create a Redirect object. If thrown during request handling, SvelteKit will return a redirect response. Make sure you're not catching the thrown redirect, which would prevent SvelteKit from handling it.

ts
function redirect(
    status: 300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308,
    location: string
): Redirect;

text permalink

Create a Response object from the supplied body.

ts
function text(body: string, init?: ResponseInit): Response;

@sveltejs/kit/hooks permalink

ts
import { sequence } from '@sveltejs/kit/hooks';

sequence permalink

A helper function for sequencing multiple handle calls in a middleware-like manner. The behavior for the handle options is as follows:

transformPageChunk is applied in reverse order and merged
preload is applied in forward order, the first option "wins" and no preload options after it are called
filterSerializedResponseHeaders behaves the same as preload

src/hooks.server.js

ts
import { sequence } from '@sveltejs/kit/hooks';

Binding element 'html' implicitly has an 'any' type.7031Binding element 'html' implicitly has an 'any' type.async function first({ event, resolve }) {
    console.log('first pre-processing');
    const result = await resolve(event, {
        transformPageChunk: ({ html }) => {
            // transforms are applied in reverse order
            console.log('first transform');
            return html;
        },
        preload: () => {
            // this one wins as it's the first defined in the chain
            console.log('first preload');
        }
    });
    console.log('first post-processing');
Binding element 'event' implicitly has an 'any' type.
Binding element 'resolve' implicitly has an 'any' type.7031
7031Binding element 'event' implicitly has an 'any' type.
Binding element 'resolve' implicitly has an 'any' type.    return result;
}

Binding element 'html' implicitly has an 'any' type.7031Binding element 'html' implicitly has an 'any' type.async function second({ event, resolve }) {
    console.log('second pre-processing');
    const result = await resolve(event, {
        transformPageChunk: ({ html }) => {
            console.log('second transform');
            return html;
        },
        preload: () => {
            console.log('second preload');
        },
        filterSerializedResponseHeaders: () => {
            // this one wins as it's the first defined in the chain
           console.log('second filterSerializedResponseHeaders');
        }
    });
    console.log('second post-processing');
    return result;
}

export const handle = sequence(first, second);

The example above would print:

first pre-processing
first preload
second pre-processing
second filterSerializedResponseHeaders
second transform
first transform
second post-processing
first post-processing

ts
function sequence(...handlers: Handle[]): Handle;

@sveltejs/kit/node permalink

ts
import { getRequest, setResponse } from '@sveltejs/kit/node';

Utilities used by adapters for Node-like environments.

getRequest permalink

ts
function getRequest(opts: {
    base: string;
    request: import('http').IncomingMessage;
    bodySizeLimit?: number;
}): Promise<Request>;

setResponse permalink

ts
function setResponse(
    res: import('http').ServerResponse,
    response: Response
): void;

@sveltejs/kit/node/polyfills permalink

ts
import { installPolyfills } from '@sveltejs/kit/node/polyfills';

A polyfill for fetch and its related interfaces, used by adapters for environments that don't provide a native implementation.

installPolyfills permalink

Make various web APIs available as globals:

crypto
fetch
Headers
Request
Response

ts
function installPolyfills(): void;

@sveltejs/kit/vite permalink

ts
import { sveltekit } from '@sveltejs/kit/vite';

sveltekit permalink

Returns the SvelteKit Vite plugins.

ts
function sveltekit(): Promise<Plugin[]>;

previous Command Line Interface

next Types

Modules

$app/environment permalink

browser permalink

building permalink

dev permalink

version permalink

$app/forms permalink

applyAction permalink

deserialize permalink

enhance permalink

$app/navigation permalink

afterNavigate permalink

beforeNavigate permalink

disableScrollHandling permalink

goto permalink

invalidate permalink

invalidateAll permalink

preloadCode permalink

preloadData permalink

$app/paths permalink

assets permalink

base permalink

$app/stores permalink

getStores permalink

navigating permalink

page permalink

updated permalink

$env/dynamic/private permalink

$env/dynamic/public permalink

$env/static/private permalink

$env/static/public permalink

$lib permalink

$lib/server permalink

$service-worker permalink

base permalink

build permalink

files permalink

prerendered permalink

version permalink

@sveltejs/kit permalink

error permalink

error permalink

fail permalink

json permalink

redirect permalink

text permalink

@sveltejs/kit/hooks permalink

sequence permalink

@sveltejs/kit/node permalink

getRequest permalink

setResponse permalink

@sveltejs/kit/node/polyfills permalink

installPolyfills permalink

@sveltejs/kit/vite permalink

sveltekit permalink

`$lib/server` permalink