Types

$app/formspermalink

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

SubmitFunctionpermalink

ts
type SubmitFunction<
  Success extends Record<string, unknown> | undefined = Record<string, any>,
  Invalid extends Record<string, unknown> | undefined = Record<string, any>
> = (input: {
  action: URL;
  data: FormData;
  form: HTMLFormElement;
  controller: AbortController;
  cancel(): void;
}) => MaybePromise<
  | void
  | ((opts: {
      form: HTMLFormElement;
      action: URL;
      result: ActionResult<Success, Invalid>;
      /**
       * Call this to get the default behavior of a form submission response.
       * @param options Set `reset: false` if you don't want the `<form>` values to be reset after a successful submission.
       */
      update(options?: { reset: boolean }): Promise<void>;
    }) => void)
>;

@sveltejs/kitpermalink

The following can be imported from @sveltejs/kit:

Actionpermalink

ts
interface Action<
  Params extends Partial<Record<string, string>> = Partial<
    Record<string, string>
  >,
  OutputData extends Record<string, any> | void = Record<string, any> | void,
  RouteId extends string | null = string | null
> {
  (event: RequestEvent<Params, RouteId>): MaybePromise<OutputData>;
}

ActionResultpermalink

When calling a form action via fetch, the response will be one of these shapes.

ts
type ActionResult<
  Success extends Record<string, unknown> | undefined = Record<string, any>,
  Invalid extends Record<string, unknown> | undefined = Record<string, any>
> =
  | { type: 'success'; status: number; data?: Success }
  | { type: 'invalid'; status: number; data?: Invalid }
  | { type: 'redirect'; status: number; location: string }
  | { type: 'error'; error: any };

Actionspermalink

ts
type Actions<
  Params extends Partial<Record<string, string>> = Partial<
    Record<string, string>
  >,
  OutputData extends Record<string, any> | void = Record<string, any> | void,
  RouteId extends string | null = string | null
> = Record<string, Action<Params, OutputData, RouteId>>;

Adapterpermalink

ts
interface Adapter {
  name: string;
  adapt(builder: Builder): MaybePromise<void>;
}

AfterNavigatepermalink

The interface that corresponds to the afterNavigate's input parameter.

ts
interface AfterNavigate extends Navigation {
  type: Omit<NavigationType, 'leave'>;
  willUnload: false;
}

This interface has the following fields:

type

ts
type: Omit<NavigationType, 'leave'>;

The type of navigation:

enter: The app has hydrated
link: Navigation was triggered by a link click
goto: Navigation was triggered by a goto(...) call or a redirect
popstate: Navigation was triggered by back/forward navigation

willUnload

ts
willUnload: false;

AwaitedActionspermalink

ts
type AwaitedActions<T extends Record<string, (...args: any) => any>> = {
  [Key in keyof T]: OptionalUnion<
    UnpackValidationError<Awaited<ReturnType<T[Key]>>>
  >;
}[keyof T];

AwaitedPropertiespermalink

ts
type AwaitedProperties<input extends Record<string, any> | void> =
  AwaitedPropertiesUnion<input> extends Record<string, any>
    ? OptionalUnion<AwaitedPropertiesUnion<input>>
    : AwaitedPropertiesUnion<input>;

BeforeNavigatepermalink

The interface that corresponds to the beforeNavigate's input parameter.

ts
interface BeforeNavigate extends Navigation {
  cancel(): void;
}

This interface has the following fields:

cancel

ts
cancel(): void;

Call this to prevent the navigation from starting.

Builderpermalink

ts
interface Builder {
  log: Logger;
  rimraf(dir: string): void;
  mkdirp(dir: string): void;
 
  config: ValidatedConfig;
  prerendered: Prerendered;
 
  createEntries(fn: (route: RouteDefinition) => AdapterEntry): Promise<void>;
 
  generateManifest(opts: {
    relativePath: string;
    format?: 'esm' | 'cjs';
  }): string;
 
  getBuildDirectory(name: string): string;
  getClientDirectory(): string;
  getServerDirectory(): string;
  getStaticDirectory(): string;
 
  getAppPath(): string;
 
  writeClient(dest: string): string[];
 
  writePrerendered(
    dest: string,
    opts?: {
      fallback?: string;
    }
  ): string[];
 
  writeServer(dest: string): string[];
 
  copy(
    from: string,
    to: string,
    opts?: {
      filter?(basename: string): boolean;
      replace?: Record<string, string>;
    }
  ): string[];
 
  compress(directory: string): Promise<void>;
}

This interface has the following fields:

log

ts
log: Logger;

rimraf

ts
rimraf(dir: string): void;

mkdirp

ts
mkdirp(dir: string): void;

config

ts
config: ValidatedConfig;

prerendered

ts
prerendered: Prerendered;

createEntries

ts
createEntries(fn: (route: RouteDefinition) => AdapterEntry): Promise<void>;

fn A function that groups a set of routes into an entry point

Create entry points that map to individual functions

generateManifest

ts
generateManifest(opts: { relativePath: string; format?: 'esm' | 'cjs' }): string;

getBuildDirectory

ts
getBuildDirectory(name: string): string;

getClientDirectory

ts
getClientDirectory(): string;

getServerDirectory

ts
getServerDirectory(): string;

getStaticDirectory

ts
getStaticDirectory(): string;

getAppPath

ts
getAppPath(): string;

The application path including any configured base path

writeClient

ts
writeClient(dest: string): string[];

dest the destination folder to which files should be copied
Returns an array of paths corresponding to the files that have been created by the copy

writePrerendered

ts
writePrerendered(
    dest: string,
    opts?: {
      fallback?: string;
    }
  ): string[];

dest null

writeServer

ts
writeServer(dest: string): string[];

dest the destination folder to which files should be copied
Returns an array of paths corresponding to the files that have been created by the copy

copy

ts
copy(
    from: string,
    to: string,
    opts?: {
      filter?(basename: string): boolean;
      replace?: Record<string, string>;
    }
  ): string[];

from the source file or folder
to the destination file or folder
opts.filter a function to determine whether a file or folder should be copied
opts.replace a map of strings to replace
Returns an array of paths corresponding to the files that have been created by the copy

compress

ts
compress(directory: string): Promise<void>;

directory Path to the directory containing the files to be compressed

Configpermalink

ts
interface Config {
  compilerOptions?: CompileOptions;
  extensions?: string[];
  kit?: KitConfig;
  package?: {
    source?: string;
    dir?: string;
    emitTypes?: boolean;
    exports?(filepath: string): boolean;
    files?(filepath: string): boolean;
  };
  preprocess?: any;
  [key: string]: any;
}

Cookiespermalink

ts
interface Cookies {
  get(
    name: string,
    opts?: import('cookie').CookieParseOptions
  ): string | undefined;
 
  set(
    name: string,
    value: string,
    opts?: import('cookie').CookieSerializeOptions
  ): void;
 
  delete(name: string, opts?: import('cookie').CookieSerializeOptions): void;
 
  serialize(
    name: string,
    value: string,
    opts?: import('cookie').CookieSerializeOptions
  ): string;
}

This interface has the following fields:

get

ts
get(name: string, opts?: import('cookie').CookieParseOptions): string | undefined;

Gets a cookie that was previously set with cookies.set, or from the request headers.

set

ts
set(name: string, value: string, opts?: import('cookie').CookieSerializeOptions): void;

Sets a cookie. This will add a set-cookie header to the response, but also make the cookie available via cookies.get during the current request.

The httpOnly and secure options are true by default (except on http://localhost, where secure is false), and must be explicitly disabled if you want cookies to be readable by client-side JavaScript and/or transmitted over HTTP. The sameSite option defaults to lax.

By default, the path of a cookie is the 'directory' of the current pathname. In most cases you should explicitly set path: '/' to make the cookie available throughout your app.

delete

ts
delete(name: string, opts?: import('cookie').CookieSerializeOptions): void;

Deletes a cookie by setting its value to an empty string and setting the expiry date in the past.

By default, the path of a cookie is the 'directory' of the current pathname. In most cases you should explicitly set path: '/' to make the cookie available throughout your app.

serialize

ts
serialize(name: string, value: string, opts?: import('cookie').CookieSerializeOptions): string;

name the name for the cookie
value value to set the cookie to
options object containing serialization options

Serialize a cookie name-value pair into a Set-Cookie header string.

By default, the path of a cookie is the current pathname. In most cases you should explicitly set path: '/' to make the cookie available throughout your app.

Handlepermalink

This function runs every time the SvelteKit server receives a request and determines the response. It receives an event object representing the request and a function called resolve, which renders the route and generates a Response. This allows you to modify response headers or bodies, or bypass SvelteKit entirely (for implementing routes programmatically, for example).

ts
interface Handle {
  (input: {
    event: RequestEvent;
    resolve(event: RequestEvent, opts?: ResolveOptions): MaybePromise<Response>;
  }): MaybePromise<Response>;
}

HandleClientErrorpermalink

ts
interface HandleClientError {
  (input: { error: unknown; event: NavigationEvent }): void | App.Error;
}

HandleFetchpermalink

ts
interface HandleFetch {
  (input: {
    event: RequestEvent;
    request: Request;
    fetch: typeof fetch;
  }): MaybePromise<Response>;
}

HandleServerErrorpermalink

ts
interface HandleServerError {
  (input: { error: unknown; event: RequestEvent }): void | App.Error;
}

KitConfigpermalink

ts
interface KitConfig {
  adapter?: Adapter;
  alias?: Record<string, string>;
  appDir?: string;
  csp?: {
    mode?: 'hash' | 'nonce' | 'auto';
    directives?: CspDirectives;
    reportOnly?: CspDirectives;
  };
  csrf?: {
    checkOrigin?: boolean;
  };
  env?: {
    dir?: string;
    publicPrefix?: string;
  };
  moduleExtensions?: string[];
  files?: {
    assets?: string;
    hooks?: {
      client?: string;
      server?: string;
    };
    lib?: string;
    params?: string;
    routes?: string;
    serviceWorker?: string;
    appTemplate?: string;
    errorTemplate?: string;
  };
  inlineStyleThreshold?: number;
  outDir?: string;
  paths?: {
    assets?: string;
    base?: string;
  };
  prerender?: {
    concurrency?: number;
    crawl?: boolean;
    default?: boolean;
    enabled?: boolean;
    entries?: Array<'*' | `/${string}`>;
    handleHttpError?: PrerenderHttpErrorHandlerValue;
    handleMissingId?: PrerenderMissingIdHandlerValue;
    origin?: string;
  };
  serviceWorker?: {
    register?: boolean;
    files?(filepath: string): boolean;
  };
  trailingSlash?: TrailingSlash;
  version?: {
    name?: string;
    pollInterval?: number;
  };
}

Loadpermalink

The generic form of PageLoad and LayoutLoad. You should import those from ./$types (see generated types) rather than using Load directly.

ts
interface Load<
  Params extends Partial<Record<string, string>> = Partial<
    Record<string, string>
  >,
  InputData extends Record<string, unknown> | null = Record<string, any> | null,
  ParentData extends Record<string, unknown> = Record<string, any>,
  OutputData extends Record<string, unknown> | void = Record<
    string,
    any
  > | void,
  RouteId extends string | null = string | null
> {
  (
    event: LoadEvent<Params, InputData, ParentData, RouteId>
  ): MaybePromise<OutputData>;
}

LoadEventpermalink

ts
interface LoadEvent<
  Params extends Partial<Record<string, string>> = Partial<
    Record<string, string>
  >,
  Data extends Record<string, unknown> | null = Record<string, any> | null,
  ParentData extends Record<string, unknown> = Record<string, any>,
  RouteId extends string | null = string | null
> extends NavigationEvent<Params, RouteId> {
  fetch: typeof fetch;
 
  data: Data;
 
  setHeaders(headers: Record<string, string>): void;
 
  parent(): Promise<ParentData>;
 
  depends(...deps: string[]): void;
}

This interface has the following fields:

fetch

ts
fetch: typeof fetch;

fetch is equivalent to the native fetch web API, with a few additional features:

it can be used to make credentialed requests on the server, as it inherits the cookie and authorization headers for the page request
it can make relative requests on the server (ordinarily, fetch requires a URL with an origin when used in a server context)
internal requests (e.g. for +server.js routes) go directly to the handler function when running on the server, without the overhead of an HTTP call
during server-side rendering, the response will be captured and inlined into the rendered HTML. Note that headers will not be serialized, unless explicitly included via filterSerializedResponseHeaders
during hydration, the response will be read from the HTML, guaranteeing consistency and preventing an additional network request

Cookies will only be passed through if the target host is the same as the SvelteKit application or a more specific subdomain of it.

data

ts
data: Data;

Contains the data returned by the route's server load function (in +layout.server.js or +page.server.js), if any.

setHeaders

ts
setHeaders(headers: Record<string, string>): void;

If you need to set headers for the response, you can do so using the this method. This is useful if you want the page to be cached, for example:

src/routes/blog/+page.js

ts
export async function load({ fetch, setHeaders }) {
Binding element 'fetch' implicitly has an 'any' type.
Binding element 'setHeaders' implicitly has an 'any' type.7031
7031Binding element 'fetch' implicitly has an 'any' type.
Binding element 'setHeaders' implicitly has an 'any' type.  const url = `https://cms.example.com/articles.json`;
  const response = await fetch(url);
 
  setHeaders({
    age: response.headers.get('age'),
    'cache-control': response.headers.get('cache-control')
  });
 
  return response.json();
}

Setting the same header multiple times (even in separate load functions) is an error — you can only set a given header once.

You cannot add a set-cookie header with setHeaders — use the cookies API in a server-only load function instead.

setHeaders has no effect when a load function runs in the browser.

parent

ts
parent(): Promise<ParentData>;

await parent() returns data from parent +layout.js load functions. Implicitly, a missing +layout.js is treated as a ({ data }) => data function, meaning that it will return and forward data from parent +layout.server.js files.

Be careful not to introduce accidental waterfalls when using await parent(). If for example you only want to merge parent data into the returned output, call it after fetching your other data.

depends

ts
depends(...deps: string[]): void;

This function declares that the load function has a dependency on one or more URLs or custom identifiers, which can subsequently be used with invalidate() to cause load to rerun.

Most of the time you won't need this, as fetch calls depends on your behalf — it's only necessary if you're using a custom API client that bypasses fetch.

URLs can be absolute or relative to the page being loaded, and must be encoded.

Custom identifiers have to be prefixed with one or more lowercase letters followed by a colon to conform to the URI specification.

The following example shows how to use depends to register a dependency on a custom identifier, which is invalidated after a button click, making the load function rerun.

src/routes/+page.js

ts
let count = 0;
export async function load({ depends }) {
Binding element 'depends' implicitly has an 'any' type.7031Binding element 'depends' implicitly has an 'any' type.  depends('increase:count');
 
  return { count: count++ };
}

src/routes/+page.svelte

<script>
  import { invalidate } from '$app/navigation';

  export let data;

  const increase = async () => {
    await invalidate('increase:count');
  }
</script>

<p>{data.count}<p>
<button on:click={increase}>Increase Count</button>

ts
interface Navigation {
  from: NavigationTarget | null;
 
  to: NavigationTarget | null;
 
  type: Omit<NavigationType, 'enter'>;
 
  willUnload: boolean;
 
  delta?: number;
}

This interface has the following fields:

from

ts
from: NavigationTarget | null;

Where navigation was triggered from

ts
to: NavigationTarget | null;

Where navigation is going to/has gone to

type

ts
type: Omit<NavigationType, 'enter'>;

The type of navigation:

leave: The user is leaving the app by closing the tab or using the back/forward buttons to go to a different document
link: Navigation was triggered by a link click
goto: Navigation was triggered by a goto(...) call or a redirect
popstate: Navigation was triggered by back/forward navigation

willUnload

ts
willUnload: boolean;

Whether or not the navigation will result in the page being unloaded (i.e. not a client-side navigation)

delta

ts
delta?: number;

In case of a history back/forward navigation, the number of steps to go back/forward

NavigationEventpermalink

ts
interface NavigationEvent<
  Params extends Partial<Record<string, string>> = Partial<
    Record<string, string>
  >,
  RouteId extends string | null = string | null
> {
  params: Params;
 
  route: {
    id: RouteId;
  };
 
  url: URL;
}

This interface has the following fields:

params

ts
params: Params;

The parameters of the current page - e.g. for a route like /blog/[slug], the slug parameter

route

ts
route: {
    /**
     * The ID of the current route - e.g. for `src/routes/blog/[slug]`, it would be `/blog/[slug]`
     */
    id: RouteId;
  };

Info about the current route

url

ts
url: URL;

The URL of the current page

NavigationTargetpermalink

ts
interface NavigationTarget {
  params: Record<string, string> | null;
  route: { id: string | null };
  url: URL;
}

NavigationTypepermalink

enter: The app has hydrated
leave: The user is leaving the app by closing the tab or using the back/forward buttons to go to a different document
link: Navigation was triggered by a link click
goto: Navigation was triggered by a goto(...) call or a redirect
popstate: Navigation was triggered by back/forward navigation

ts
type NavigationType = 'enter' | 'leave' | 'link' | 'goto' | 'popstate';

Pagepermalink

The shape of the $page store

ts
interface Page<
  Params extends Record<string, string> = Record<string, string>,
  RouteId extends string | null = string | null
> {
  url: URL;
 
  params: Params;
 
  route: {
    id: RouteId;
  };
 
  status: number;
 
  error: App.Error | null;
 
  data: App.PageData & Record<string, any>;
 
  form: any;
}

This interface has the following fields:

url

ts
url: URL;

The URL of the current page

params

ts
params: Params;

The parameters of the current page - e.g. for a route like /blog/[slug], the slug parameter

route

ts
route: {
    /**
     * The ID of the current route - e.g. for `src/routes/blog/[slug]`, it would be `/blog/[slug]`
     */
    id: RouteId;
  };

Info about the current route

status

ts
status: number;

Http status code of the current page

error

ts
error: App.Error | null;

The error object of the current page, if any. Filled from the handleError hooks.

data

ts
data: App.PageData & Record<string, any>;

The merged result of all data from all load functions on the current page. You can type a common denominator through App.PageData.

form

ts
form: any;

Filled only after a form submission. See form actions for more info.

ParamMatcherpermalink

ts
interface ParamMatcher {
  (param: string): boolean;
}

RequestEventpermalink

ts
interface RequestEvent<
  Params extends Partial<Record<string, string>> = Partial<
    Record<string, string>
  >,
  RouteId extends string | null = string | null
> {
  cookies: Cookies;
 
  fetch: typeof fetch;
 
  getClientAddress(): string;
 
  locals: App.Locals;
 
  params: Params;
 
  platform: Readonly<App.Platform>;
 
  request: Request;
 
  route: {
    id: RouteId;
  };
 
  setHeaders(headers: Record<string, string>): void;
 
  url: URL;
}

This interface has the following fields:

cookies

ts
cookies: Cookies;

Get or set cookies related to the current request

fetch

ts
fetch: typeof fetch;

fetch is equivalent to the native fetch web API, with a few additional features:

it can be used to make credentialed requests on the server, as it inherits the cookie and authorization headers for the page request
it can make relative requests on the server (ordinarily, fetch requires a URL with an origin when used in a server context)
internal requests (e.g. for +server.js routes) go directly to the handler function when running on the server, without the overhead of an HTTP call

Cookies will only be passed through if the target host is the same as the SvelteKit application or a more specific subdomain of it.

getClientAddress

ts
getClientAddress(): string;

The client's IP address, set by the adapter.

locals

ts
locals: App.Locals;

Contains custom data that was added to the request within the handle hook.

params

ts
params: Params;

The parameters of the current page or endpoint - e.g. for a route like /blog/[slug], the slug parameter

platform

ts
platform: Readonly<App.Platform>;

Additional data made available through the adapter.

request

ts
request: Request;

The original request object

route

ts
route: {
    /**
     * The ID of the current route - e.g. for `src/routes/blog/[slug]`, it would be `/blog/[slug]`
     */
    id: RouteId;
  };

Info about the current route

setHeaders

ts
setHeaders(headers: Record<string, string>): void;

If you need to set headers for the response, you can do so using the this method. This is useful if you want the page to be cached, for example:

src/routes/blog/+page.js

ts
export async function load({ fetch, setHeaders }) {
Binding element 'fetch' implicitly has an 'any' type.
Binding element 'setHeaders' implicitly has an 'any' type.7031
7031Binding element 'fetch' implicitly has an 'any' type.
Binding element 'setHeaders' implicitly has an 'any' type.  const url = `https://cms.example.com/articles.json`;
  const response = await fetch(url);
 
  setHeaders({
    age: response.headers.get('age'),
    'cache-control': response.headers.get('cache-control')
  });
 
  return response.json();
}

Setting the same header multiple times (even in separate load functions) is an error — you can only set a given header once.

You cannot add a set-cookie header with setHeaders — use the cookies API instead.

url

ts
url: URL;

The URL of the current page or endpoint

RequestHandlerpermalink

A (event: RequestEvent) => Response function exported from a +server.js file that corresponds to an HTTP verb (GET, PUT, PATCH, etc) and handles requests with that method.

It receives Params as the first generic argument, which you can skip by using generated types instead.

ts
interface RequestHandler<
  Params extends Partial<Record<string, string>> = Partial<
    Record<string, string>
  >,
  RouteId extends string | null = string | null
> {
  (event: RequestEvent<Params, RouteId>): MaybePromise<Response>;
}

ResolveOptionspermalink

ts
interface ResolveOptions {
  transformPageChunk?(input: {
    html: string;
    done: boolean;
  }): MaybePromise<string | undefined>;
 
  filterSerializedResponseHeaders?(name: string, value: string): boolean;
 
  preload?(input: {
    type: 'font' | 'css' | 'js' | 'asset';
    path: string;
  }): boolean;
}

This interface has the following fields:

transformPageChunk

ts
transformPageChunk?(input: { html: string; done: boolean }): MaybePromise<string | undefined>;

input the html chunk and the info if this is the last chunk

Applies custom transforms to HTML. If done is true, it's the final chunk. Chunks are not guaranteed to be well-formed HTML (they could include an element's opening tag but not its closing tag, for example) but they will always be split at sensible boundaries such as %sveltekit.head% or layout/page components.

filterSerializedResponseHeaders

ts
filterSerializedResponseHeaders?(name: string, value: string): boolean;

name header name
value header value

Determines which headers should be included in serialized responses when a load function loads a resource with fetch. By default, none will be included.

preload

ts
preload?(input: { type: 'font' | 'css' | 'js' | 'asset'; path: string }): boolean;

input the type of the file and its path

Determines what should be added to the <head> tag to preload it. By default, js, css and font files will be preloaded.

SSRManifestpermalink

ts
interface SSRManifest {
  appDir: string;
  appPath: string;
  assets: Set<string>;
  mimeTypes: Record<string, string>;
 
  _: {
    entry: {
      file: string;
      imports: string[];
      stylesheets: string[];
      fonts: string[];
    };
    nodes: SSRNodeLoader[];
    routes: SSRRoute[];
    matchers(): Promise<Record<string, ParamMatcher>>;
  };
}

This interface has the following fields:

appDir

ts
appDir: string;

appPath

ts
appPath: string;

assets

ts
assets: Set<string>;

mimeTypes

ts
mimeTypes: Record<string, string>;

ts
_: {
    entry: {
      file: string;
      imports: string[];
      stylesheets: string[];
      fonts: string[];
    };
    nodes: SSRNodeLoader[];
    routes: SSRRoute[];
    matchers(): Promise<Record<string, ParamMatcher>>;
  };

private fields

Serverpermalink

ts
class Server {
  constructor(manifest: SSRManifest);
  init(options: ServerInitOptions): Promise<void>;
  respond(request: Request, options: RequestOptions): Promise<Response>;
}

ServerInitOptionspermalink

ts
interface ServerInitOptions {
  env: Record<string, string>;
}

ServerLoadpermalink

The generic form of PageServerLoad and LayoutServerLoad. You should import those from ./$types (see generated types) rather than using ServerLoad directly.

ts
interface ServerLoad<
  Params extends Partial<Record<string, string>> = Partial<
    Record<string, string>
  >,
  ParentData extends Record<string, any> = Record<string, any>,
  OutputData extends Record<string, any> | void = Record<string, any> | void,
  RouteId extends string | null = string | null
> {
  (
    event: ServerLoadEvent<Params, ParentData, RouteId>
  ): MaybePromise<OutputData>;
}

ServerLoadEventpermalink

ts
interface ServerLoadEvent<
  Params extends Partial<Record<string, string>> = Partial<
    Record<string, string>
  >,
  ParentData extends Record<string, any> = Record<string, any>,
  RouteId extends string | null = string | null
> extends RequestEvent<Params, RouteId> {
  parent(): Promise<ParentData>;
 
  depends(...deps: string[]): void;
}

This interface has the following fields:

parent

ts
parent(): Promise<ParentData>;

await parent() returns data from parent +layout.server.js load functions.

Be careful not to introduce accidental waterfalls when using await parent(). If for example you only want to merge parent data into the returned output, call it after fetching your other data.

depends

ts
depends(...deps: string[]): void;

This function declares that the load function has a dependency on one or more URLs or custom identifiers, which can subsequently be used with invalidate() to cause load to rerun.

Most of the time you won't need this, as fetch calls depends on your behalf — it's only necessary if you're using a custom API client that bypasses fetch.

URLs can be absolute or relative to the page being loaded, and must be encoded.

Custom identifiers have to be prefixed with one or more lowercase letters followed by a colon to conform to the URI specification.

The following example shows how to use depends to register a dependency on a custom identifier, which is invalidated after a button click, making the load function rerun.

src/routes/+page.js

ts
let count = 0;
export async function load({ depends }) {
Binding element 'depends' implicitly has an 'any' type.7031Binding element 'depends' implicitly has an 'any' type.  depends('increase:count');
 
  return { count: count++ };
}

src/routes/+page.svelte

<script>
  import { invalidate } from '$app/navigation';

  export let data;

  const increase = async () => {
    await invalidate('increase:count');
  }
</script>

<p>{data.count}<p>
<button on:click={increase}>Increase Count</button>

ValidationErrorpermalink

ts
interface ValidationError<
  T extends Record<string, unknown> | undefined = undefined
> extends UniqueInterface {
  status: number;
  data: T;
}

Additional typespermalink

The following are referenced by the public types documented above, but cannot be imported directly:

AdapterEntrypermalink

ts
interface AdapterEntry {
  id: string;
 
  filter(route: RouteDefinition): boolean;
 
  complete(entry: {
    generateManifest(opts: {
      relativePath: string;
      format?: 'esm' | 'cjs';
    }): string;
  }): MaybePromise<void>;
}

This interface has the following fields:

ts
id: string;

A string that uniquely identifies an HTTP service (e.g. serverless function) and is used for deduplication. For example, /foo/a-[b] and /foo/[c] are different routes, but would both be represented in a Netlify _redirects file as /foo/:param, so they share an ID

filter

ts
filter(route: RouteDefinition): boolean;

A function that compares the candidate route with the current route to determine if it should be treated as a fallback for the current route. For example, /foo/[c] is a fallback for /foo/a-[b], and /[...catchall] is a fallback for all routes

complete

ts
complete(entry: {
    generateManifest(opts: { relativePath: string; format?: 'esm' | 'cjs' }): string;
  }): MaybePromise<void>;

A function that is invoked once the entry has been created. This is where you should write the function to the filesystem and generate redirect manifests.

Csppermalink

ts
namespace Csp {
  type ActionSource = 'strict-dynamic' | 'report-sample';
  type BaseSource =
    | 'self'
    | 'unsafe-eval'
    | 'unsafe-hashes'
    | 'unsafe-inline'
    | 'wasm-unsafe-eval'
    | 'none';
  type CryptoSource = `${'nonce' | 'sha256' | 'sha384' | 'sha512'}-${string}`;
  type FrameSource = HostSource | SchemeSource | 'self' | 'none';
  type HostNameScheme = `${string}.${string}` | 'localhost';
  type HostSource = `${HostProtocolSchemes}${HostNameScheme}${PortScheme}`;
  type HostProtocolSchemes = `${string}://` | '';
  type HttpDelineator = '/' | '?' | '#' | '\\';
  type PortScheme = `:${number}` | '' | ':*';
  type SchemeSource =
    | 'http:'
    | 'https:'
    | 'data:'
    | 'mediastream:'
    | 'blob:'
    | 'filesystem:';
  type Source = HostSource | SchemeSource | CryptoSource | BaseSource;
  type Sources = Source[];
  type UriPath = `${HttpDelineator}${string}`;
}

CspDirectivespermalink

ts
interface CspDirectives {
  'child-src'?: Csp.Sources;
  'default-src'?: Array<Csp.Source | Csp.ActionSource>;
  'frame-src'?: Csp.Sources;
  'worker-src'?: Csp.Sources;
  'connect-src'?: Csp.Sources;
  'font-src'?: Csp.Sources;
  'img-src'?: Csp.Sources;
  'manifest-src'?: Csp.Sources;
  'media-src'?: Csp.Sources;
  'object-src'?: Csp.Sources;
  'prefetch-src'?: Csp.Sources;
  'script-src'?: Array<Csp.Source | Csp.ActionSource>;
  'script-src-elem'?: Csp.Sources;
  'script-src-attr'?: Csp.Sources;
  'style-src'?: Array<Csp.Source | Csp.ActionSource>;
  'style-src-elem'?: Csp.Sources;
  'style-src-attr'?: Csp.Sources;
  'base-uri'?: Array<Csp.Source | Csp.ActionSource>;
  sandbox?: Array<
    | 'allow-downloads-without-user-activation'
    | 'allow-forms'
    | 'allow-modals'
    | 'allow-orientation-lock'
    | 'allow-pointer-lock'
    | 'allow-popups'
    | 'allow-popups-to-escape-sandbox'
    | 'allow-presentation'
    | 'allow-same-origin'
    | 'allow-scripts'
    | 'allow-storage-access-by-user-activation'
    | 'allow-top-navigation'
    | 'allow-top-navigation-by-user-activation'
  >;
  'form-action'?: Array<Csp.Source | Csp.ActionSource>;
  'frame-ancestors'?: Array<
    Csp.HostSource | Csp.SchemeSource | Csp.FrameSource
  >;
  'navigate-to'?: Array<Csp.Source | Csp.ActionSource>;
  'report-uri'?: Csp.UriPath[];
  'report-to'?: string[];
 
  'require-trusted-types-for'?: Array<'script'>;
  'trusted-types'?: Array<'none' | 'allow-duplicates' | '*' | string>;
  'upgrade-insecure-requests'?: boolean;
 
  /** @deprecated */
  'require-sri-for'?: Array<'script' | 'style' | 'script style'>;
 
  /** @deprecated */
  'block-all-mixed-content'?: boolean;
 
  /** @deprecated */
  'plugin-types'?: Array<`${string}/${string}` | 'none'>;
 
  /** @deprecated */
  referrer?: Array<
    | 'no-referrer'
    | 'no-referrer-when-downgrade'
    | 'origin'
    | 'origin-when-cross-origin'
    | 'same-origin'
    | 'strict-origin'
    | 'strict-origin-when-cross-origin'
    | 'unsafe-url'
    | 'none'
  >;
}

HttpMethodpermalink

ts
type HttpMethod = 'GET' | 'HEAD' | 'POST' | 'PUT' | 'DELETE' | 'PATCH';

Loggerpermalink

ts
interface Logger {
  (msg: string): void;
  success(msg: string): void;
  error(msg: string): void;
  warn(msg: string): void;
  minor(msg: string): void;
  info(msg: string): void;
}

MaybePromisepermalink

ts
type MaybePromise<T> = T | Promise<T>;

PrerenderHttpErrorHandlerpermalink

ts
interface PrerenderHttpErrorHandler {
  (details: {
    status: number;
    path: string;
    referrer: string | null;
    referenceType: 'linked' | 'fetched';
  }): void;
}

PrerenderHttpErrorHandlerValuepermalink

ts
type PrerenderHttpErrorHandlerValue =
  | 'fail'
  | 'warn'
  | 'ignore'
  | PrerenderHttpErrorHandler;

PrerenderMappermalink

ts
type PrerenderMap = Map<string, PrerenderOption>;

PrerenderMissingIdHandlerpermalink

ts
interface PrerenderMissingIdHandler {
  (details: { path: string; id: string; referrers: string[] }): void;
}

PrerenderMissingIdHandlerValuepermalink

ts
type PrerenderMissingIdHandlerValue =
  | 'fail'
  | 'warn'
  | 'ignore'
  | PrerenderMissingIdHandler;

PrerenderOptionpermalink

ts
type PrerenderOption = boolean | 'auto';

Prerenderedpermalink

ts
interface Prerendered {
  pages: Map<
    string,
    {
      file: string;
    }
  >;
  assets: Map<
    string,
    {
      type: string;
    }
  >;
  redirects: Map<
    string,
    {
      status: number;
      location: string;
    }
  >;
 
  paths: string[];
}

This interface has the following fields:

pages

ts
pages: Map<
    string,
    {
      /** The location of the .html file relative to the output directory */
      file: string;
    }
  >;

assets

ts
assets: Map<
    string,
    {
      /** The MIME type of the asset */
      type: string;
    }
  >;

redirects

ts
redirects: Map<
    string,
    {
      status: number;
      location: string;
    }
  >;

paths

ts
paths: string[];

An array of prerendered paths (without trailing slashes, regardless of the trailingSlash config)

RequestOptionspermalink

ts
interface RequestOptions {
  getClientAddress(): string;
  platform?: App.Platform;
}

RouteDefinitionpermalink

ts
interface RouteDefinition {
  id: string;
  pattern: RegExp;
  segments: RouteSegment[];
  methods: HttpMethod[];
}

RouteSegmentpermalink

ts
interface RouteSegment {
  content: string;
  dynamic: boolean;
  rest: boolean;
}

TrailingSlashpermalink

ts
type TrailingSlash = 'never' | 'always' | 'ignore';

UniqueInterfacepermalink

ts
interface UniqueInterface {
  readonly [uniqueSymbol]: unknown;
}

Apppermalink

It's possible to tell SvelteKit how to type objects inside your app by declaring the App namespace. By default, a new project will have a file called src/app.d.ts containing the following:

ts
/// <reference types="@sveltejs/kit" />
 
declare namespace App {
  interface Locals {}
 
  interface PageData {}
 
  interface Platform {}
}

By populating these interfaces, you will gain type safety when using event.locals, event.platform, and data from load functions.

Note that since it's an ambient declaration file, you have to be careful when using import statements. Once you add an import at the top level, the declaration file is no longer considered ambient and you lose access to these typings in other files. To avoid this, either use the import(...) function:

ts
interface Locals {
  user: import('$lib/types').User;
}

Or wrap the namespace with declare global:

ts
import { User } from '$lib/types';
 
declare global {
  namespace App {
    interface Locals {
      user: User;
    }
    // ...
  }
}

Errorpermalink

Defines the common shape of expected and unexpected errors. Expected errors are thrown using the error function. Unexpected errors are handled by the handleError hooks which should return this shape.

ts
interface Error {
  message: string;
}

Localspermalink

The interface that defines event.locals, which can be accessed in hooks (handle, and handleError), server-only load functions, and +server.js files.

ts
interface Locals {}

PageDatapermalink

Defines the common shape of the $page.data store - that is, the data that is shared between all pages. The Load and ServerLoad functions in ./$types will be narrowed accordingly. Use optional properties for data that is only present on specific pages. Do not add an index signature ([key: string]: any).

ts
interface PageData {}

Platformpermalink

If your adapter provides platform-specific context via event.platform, you can specify it here.

ts
interface Platform {}

Generated typespermalink

The RequestHandler and Load types both accept a Params argument allowing you to type the params object. For example this endpoint expects foo, bar and baz params:

src/routes/[foo]/[bar]/[baz]/+page.server.js

ts
/** @type {import('@sveltejs/kit').RequestHandler<{
 *   foo: string;
 *   bar: string;
 *   baz: string
 * }>} */
export async function GET({ params }) {
A function whose declared type is neither 'void' nor 'any' must return a value.2355A function whose declared type is neither 'void' nor 'any' must return a value.  // ...
}

src/routes/[foo]/[bar]/[baz]/+page.server.ts

ts
import type { RequestHandler } from '@sveltejs/kit';
 
export const GET: RequestHandler = async ({ params }) => {
Type '({ params }: RequestEvent<Partial<Record<string, string>>, string | null>) => Promise<void>' is not assignable to type 'RequestHandler<Partial<Record<string, string>>, string | null>'.
  Type 'Promise<void>' is not assignable to type 'MaybePromise<Response>'.
    Type 'Promise<void>' is not assignable to type 'Promise<Response>'.
      Type 'void' is not assignable to type 'Response'.2322Type '({ params }: RequestEvent<Partial<Record<string, string>>, string | null>) => Promise<void>' is not assignable to type 'RequestHandler<Partial<Record<string, string>>, string | null>'.
  Type 'Promise<void>' is not assignable to type 'MaybePromise<Response>'.
    Type 'Promise<void>' is not assignable to type 'Promise<Response>'.
      Type 'void' is not assignable to type 'Response'.  // ...
}

Needless to say, this is cumbersome to write out, and less portable (if you were to rename the [foo] directory to [qux], the type would no longer reflect reality).

To solve this problem, SvelteKit generates .d.ts files for each of your endpoints and pages:

.svelte-kit/types/src/routes/[foo]/[bar]/[baz]/$types.d.ts

ts
import type * as Kit from '@sveltejs/kit';
 
type RouteParams = {
  foo: string;
  bar: string;
  baz: string;
}
 
export type PageServerLoad = Kit.ServerLoad<RouteParams>;
export type PageLoad = Kit.Load<RouteParams>;

These files can be imported into your endpoints and pages as siblings, thanks to the rootDirs option in your TypeScript configuration:

src/routes/[foo]/[bar]/[baz]/+page.server.js

ts
/** @type {import('./$types').PageServerLoad} */
export async function GET({ params }) {
  // ...
}

src/routes/[foo]/[bar]/[baz]/+page.server.ts

ts
import type { PageServerLoad } from './$types';
 
export const GET: PageServerLoad = async ({ params }) => {
  // ...
}

src/routes/[foo]/[bar]/[baz]/+page.js

ts
/** @type {import('./$types').PageLoad} */
export async function load({ params, fetch }) {
  // ...
}

src/routes/[foo]/[bar]/[baz]/+page.ts

ts
import type { PageLoad } from './$types';
 
export const load: PageLoad = async ({ params, fetch }) => {
  // ...
}

For this to work, your own tsconfig.json or jsconfig.json should extend from the generated .svelte-kit/tsconfig.json (where .svelte-kit is your outDir):
{ "extends": "./.svelte-kit/tsconfig.json" }

Default tsconfig.jsonpermalink

The generated .svelte-kit/tsconfig.json file contains a mixture of options. Some are generated programmatically based on your project configuration, and should generally not be overridden without good reason:

.svelte-kit/tsconfig.json

{
  "compilerOptions": {
    "baseUrl": "..",
    "paths": {
      "$lib": "src/lib",
      "$lib/*": "src/lib/*"
    },
    "rootDirs": ["..", "./types"]
  },
  "include": ["../src/**/*.js", "../src/**/*.ts", "../src/**/*.svelte"],
  "exclude": ["../node_modules/**", "./**"]
}

Others are required for SvelteKit to work properly, and should also be left untouched unless you know what you're doing:

.svelte-kit/tsconfig.json

{
  "compilerOptions": {
    // this ensures that types are explicitly
    // imported with `import type`, which is
    // necessary as svelte-preprocess cannot
    // otherwise compile components correctly
    "importsNotUsedAsValues": "error",

    // Vite compiles one TypeScript module
    // at a time, rather than compiling
    // the entire module graph
    "isolatedModules": true,

    // TypeScript cannot 'see' when you
    // use an imported value in your
    // markup, so we need this
    "preserveValueImports": true,

    // This ensures both `vite build`
    // and `svelte-package` work correctly
    "lib": ["esnext", "DOM", "DOM.Iterable"],
    "moduleResolution": "node",
    "module": "esnext",
    "target": "esnext"
  }
}

previous Modules

next Migrating from Sapper

JavaScript TypeScript

Types

$app/formspermalink

SubmitFunctionpermalink

@sveltejs/kitpermalink

Actionpermalink

ActionResultpermalink

Actionspermalink

Adapterpermalink

AfterNavigatepermalink

AwaitedActionspermalink

AwaitedPropertiespermalink

BeforeNavigatepermalink

Builderpermalink

Configpermalink

Cookiespermalink

Handlepermalink

HandleClientErrorpermalink

HandleFetchpermalink

HandleServerErrorpermalink

KitConfigpermalink

Loadpermalink

LoadEventpermalink

src/routes/blog/+page.js

src/routes/+page.js

src/routes/+page.svelte

Navigationpermalink

NavigationEventpermalink

NavigationTargetpermalink

NavigationTypepermalink

Pagepermalink

ParamMatcherpermalink

RequestEventpermalink

src/routes/blog/+page.js

RequestHandlerpermalink

ResolveOptionspermalink

SSRManifestpermalink

Serverpermalink

ServerInitOptionspermalink

ServerLoadpermalink

ServerLoadEventpermalink

src/routes/+page.js

src/routes/+page.svelte

ValidationErrorpermalink

Additional typespermalink

AdapterEntrypermalink

Csppermalink

CspDirectivespermalink

HttpMethodpermalink

Loggerpermalink

MaybePromisepermalink

PrerenderHttpErrorHandlerpermalink

PrerenderHttpErrorHandlerValuepermalink

PrerenderMappermalink

PrerenderMissingIdHandlerpermalink

PrerenderMissingIdHandlerValuepermalink

PrerenderOptionpermalink

Prerenderedpermalink

RequestOptionspermalink

RouteDefinitionpermalink

RouteSegmentpermalink

TrailingSlashpermalink

UniqueInterfacepermalink

Apppermalink

Errorpermalink

Localspermalink

PageDatapermalink

Platformpermalink

Generated typespermalink

src/routes/[foo]/[bar]/[baz]/+page.server.js

src/routes/[foo]/[bar]/[baz]/+page.server.ts

.svelte-kit/types/src/routes/[foo]/[bar]/[baz]/$types.d.ts

src/routes/[foo]/[bar]/[baz]/+page.server.js

src/routes/[foo]/[bar]/[baz]/+page.server.ts

src/routes/[foo]/[bar]/[baz]/+page.js

src/routes/[foo]/[bar]/[baz]/+page.ts

Default tsconfig.jsonpermalink

.svelte-kit/tsconfig.json

.svelte-kit/tsconfig.json