Search • Svelte

Reference@sveltejs/kitParamMatcher

The shape of a param matcher. See matching for more info. type ParamMatcher = (param: string) => boole

AdvancedAdvanced routingRest parameters

g.md would result in the following parameters being available to the page: { org: 'sveltejs', repo: 'kit', branch: 'main', fi

AdvancedAdvanced routingOptional parameters

A route like [lang]/home contains a parameter named lang which is required. Sometimes it's beneficial

Core conceptsLoading dataUsing URL dataparams

params is derived from url.pathname and route.id.Given a route.id of /a/[b]/[...c] and a url.pathname

AdvancedAdvanced routingRest parameters404 pages

Rest parameters also allow you to render custom 404s. Given these routes...src/routes/ ├ marx-brothers

Getting startedProject structure

files] │ │ └ [your lib files] │ ├ params/ │ │ └ [your param matchers] │ ├ routes/ │ │ └ [your routes] │ ├ app.html │ ├ error.html

Build and deployWriting adapters

API, which creates an Adapter:/** @param {AdapterSpecificOptions} options */ export default function (options) { /** @type {impor

Core conceptsLoading dataStreaming with promises

d} */ export async function load({ params }) { return { // make sure the `await` happens at the end, otherwise we // can't st

Reference@sveltejs/kitLoadEvent

nt directly. interface LoadEvent< Params extends AppLayoutParams<'/'> = AppLayoutParams<'/'>, Data extends Record<string, u

Reference@sveltejs/kitNavigationEvent

interface NavigationEvent< Params extends AppLayoutParams<'/'> = AppLayoutParams<'/'>, RouteId

Reference@sveltejs/kitNavigationTarget

tion. interface NavigationTarget< Params extends AppLayoutParams<'/'> = AppLayoutParams<'/'>, RouteId extends AppRouteId |

Reference@sveltejs/kitPage

he `$page` store. interface Page< Params extends AppLayoutParams<'/'> = AppLayoutParams<'/'>, RouteId extends AppRouteId |

Reference@sveltejs/kitRequestEvent

interface RequestEvent< Params extends AppLayoutParams<'/'> = AppLayoutParams<'/'>, RouteId ext

Reference@sveltejs/kitServerLoadEvent

interface ServerLoadEvent< Params extends AppLayoutParams<'/'> = AppLayoutParams<'/'>, ParentDa

ReferenceTypesGenerated types

ndler and Load types both accept a Params argument allowing you to type the params object. For example this endpoint expects foo,

Core conceptsLoading dataPage data

ageLoad} */ export function load({ params }) { return { post: { title: `Title for ${params.slug} goes here`, content: `Co

Core conceptsLoading dataRerunning load functions

d} */ export async function load({ params }) { return { post: await db.getPost(params.slug) }; }import * as db from '$lib/serv

AdvancedAdvanced routingMatching

nt that. You can ensure that route parameters are well-formed by adding a matcher — which takes the parameter string ("apple&

AdvancedErrorsExpected errors

d} */ export async function load({ params }) { const post = await db.getPost(params.slug); if (!post) { error(404, { messa

AppendixMigrating to SvelteKit v2`resolvePath` has been removed

D (like /blog/[slug]) and a set of parameters (like { slug: 'hello' }) to a pathname. Unfortunately the return value didn't includ

Reference$app/typesRouteParams

A utility for getting the parameters associated with a given route. type BlogParams = RouteParams<'/b

Reference$app/typesLayoutParams

A utility for getting the parameters associated with a given layout, which is similar to RouteParams b

Core conceptsForm actionsNamed actions

invoke a named action, add a query parameter with the name prefixed by a / character:<!--- file: src/routes/login/+page.svelte ---

Core conceptsState managementStoring state in the URL

rting rules on a table, URL search parameters (like ?sort=price&order=ascending) are a good place to put them. You can put the

Reference@sveltejs/kitLoad

n using Load directly. type Load< Params extends AppLayoutParams<'/'> = AppLayoutParams<'/'>, InputData extends Record<stri

Reference$app/pathsresolve

y populating dynamic segments with parameters.During server rendering, the base path is relative and depends on the page currently

ReferenceConfigurationprerender

all routes containing no required [parameters] with optional parameters included as being empty (since SvelteKit doesn't know wha

Reference@sveltejs/kitAction

or more information. type Action< Params extends AppLayoutParams<'/'> = AppLayoutParams<'/'>, OutputData extends Record<str

Reference@sveltejs/kitActions

r more information. type Actions< Params extends AppLayoutParams<'/'> = AppLayoutParams<'/'>, OutputData extends Record<str

Reference@sveltejs/kitRequestHandler

uests with that method.It receives Params as the first generic argument, which you can skip by using generated types instead. type

Reference@sveltejs/kitServerLoad

erLoad directly. type ServerLoad< Params extends AppLayoutParams<'/'> = AppLayoutParams<'/'>, ParentData extends Record<str

Reference@sveltejs/kitAdapterEntry

a Netlify _redirects file as /foo/:param, so they share an ID filter(route: RouteDefinition): boolean; A function that compares t

Reference$app/navigationinvalidate

fetch or depends (including query parameters). To create a custom identifier, use a string beginning with [a-z]+: (e.g. custom:st

ReferenceConfigurationembedded

% instead of window, and will pass params from the server rather than inferring them from location.pathname. Note that it is gener

Core conceptsLoading dataUsing `getRequestEvent`

url.pathname + url.search; const params = new URLSearchParams({ redirectTo }); redirect(307, `/login?${params}`); } return

AppendixGlossaryPrerendering

that is loaded based on the page's parameters as long as all users will be seeing the same prerendered content.Pre-rendered pages

Reference@sveltejs/kitSubmitFunction

a form submission response. * @param options Set `reset: false` if you don't want the `<form>` values to be reset after a succ

Reference$app/statepage

/state'; const id = $derived(page.params.id); // This will correctly update id for usage on this page $: badId = page.params.id;

ReferenceConfigurationfiles

throughout the codebase as $lib params?: string; undefined a directory containing parameter matchers routes?: string; unde

Core conceptsRouting$types

rver.js respectively) ensures that params and the return value are correctly typed.If you're using VS Code or any IDE that support

Core conceptsLoading dataLayout data

ndIndex(post => post.slug === page.params.slug)); let next = $derived(data.posts[index + 1]);+++ </script> <h1>{data.post.tit

Core conceptsLoading dataMaking fetch requests

xport async function load({ fetch, params }) { const res = await fetch(`/api/items/${params.id}`); const item = await res.json()

Core conceptsLoading dataUsing parent data

rent(). Here, for example, getData(params) does not depend on the result of calling parent(), so we should call it first to avoid

AppendixFrequently asked questionsHow do I use a different backend API server?

tHandler} */ export function GET({ params, url }) { return fetch(`https://example.com/${params.path + url.search}`); }(Note that

Reference@sveltejs/kitSSRManifest

hers: () => Promise<Record<string, ParamMatcher>>; server_assets: Record<string, number>; A [file]: size map of all asset

Build and deployVercelIncremental Static RegenerationallowQuery

A list of valid query parameters that contribute to the cache key. Other parameters (such as utm track

AdvancedHooksUniversal hooksreroute

s used to select the route and its parameters.For example, you might have a src/routes/[[lang]]/about/+page.svelte page, which sho

Core conceptsLoading dataUniversal vs serverInput

properties describing the request (params, route and url) and various functions (fetch, setHeaders, parent, depends and untrack).

Core conceptsLoading dataRerunning load functionsWhen do load functions rerun?

the following situations:undefined params and url can change in response to a <a href=".."> link click, a `<form>` inter

Core conceptsForm actionsProgressive enhancementCustom event listener

/ let { form } = $props(); /** @param {SubmitEvent & { currentTarget: EventTarget & HTMLFormElement}} event */ async function

Core conceptsRemote functionsqueryQuery arguments

t } from '../data.remote'; let { params } = $props(); const post = $derived(await getPost(params.slug)); </script> <h1>{post.

Getting startedWeb standardsURL APIsURLSearchParams

ounter a URL, you can access query parameters via url.searchParams, which is an instance of `URLSearchParams`:const foo = url.sear

Core conceptsRouting+page+page.js

ageLoad} */ export function load({ params }) { if (params.slug === 'hello-world') { return { title: 'Hello world!', conte

Core conceptsRouting+page+page.server.js

d} */ export async function load({ params }) { const post = await getPostFromDatabase(params.slug); if (post) { return post;

AdvancedHooksServer hookslocals

e also supports a second, optional parameter that gives you more control over how the response will be rendered. That parameter is

Best practicesImages@sveltejs/enhanced-imgsrcset` and sizes`

, you can do that with the w query parameter:<enhanced:img src="./image.png?w=1280;640;400" sizes="(min-width:1920px) 1280px,

Core conceptsForm actionsProgressive enhancementCustomising use:enhance

ch accepts invalidateAll and reset parameters, or use applyAction on the result: <script> import { enhance, +++applyAction+++ }

Core conceptsPage optionsprerenderWhen not to prerender

that load data based on the page's parameters, such as a src/routes/blog/[slug]/+page.svelte route.Accessing `url.searchParams` du

AppendixMigrating from SapperPages and layoutsStores

o properties. page now has url and params properties, but no path or query.You access them differently in SvelteKit. stores is now