SvelteKitReference

$app/state

SvelteKit makes three read-only state objects available via the $app/state module — page, navigating and updated.

import { const navigating: Navigation | {
    from: null;
    to: null;
    type: null;
    willUnload: null;
    delta: null;
    complete: null;
}A read-only object representing an in-progress navigation, with from, to, type and (if type === 'popstate') delta properties.
Values are null when no navigation is occurring, or during server rendering.
referencenavigating, const page: Page<Record<string, string>, string | null>A read-only reactive object with information about the current page, serving several use cases:

retrieving the combined data of all pages/layouts anywhere in your component tree (also see loading data)
retrieving the current value of the form prop anywhere in your component tree (also see form actions)
retrieving the page state that was set through goto (also see goto and shallow routing)
retrieving metadata such as the URL you're on, the current route and its parameters, the target of a shallow navigation, and whether or not there was an error

+layout
<script>
	import { page } from '$app/state';
</script>

<p>Currently at {page.url.pathname}</p>

{#if page.error}
	<span class="red">Problem detected</span>
{:else}
	<span class="small">All systems operational</span>
{/if}
<script lang="ts">
	import { page } from '$app/state';
</script>

<p>Currently at {page.url.pathname}</p>

{#if page.error}
	<span class="red">Problem detected</span>
{:else}
	<span class="small">All systems operational</span>
{/if}
Changes to page are available exclusively with runes. (The legacy reactivity syntax will not reflect any changes)
+page
<script>
	import { page } from '$app/state';
	const id = $derived(page.params.id); // This will correctly update id for usage on this page
	$: badId = page.params.id; // Do not use; will never update after initial load
</script>
<script lang="ts">
	import { page } from '$app/state';
	const id = $derived(page.params.id); // This will correctly update id for usage on this page
	$: badId = page.params.id; // Do not use; will never update after initial load
</script>
On the server, values can only be read during rendering (in other words not in e.g. load functions). In the browser, the values can be read at any time.
referencepage, const updated: {
    readonly current: boolean;
    check(): Promise<boolean>;
}A read-only reactive value that's initially false. SvelteKit checks for new versions on data, remote, and form action responses (via the x-sveltekit-version header), when the tab regains focus or becomes visible, and on a poll interval (see version.pollInterval). updated.current is set to true when a new version is detected. updated.check() will force an immediate check, regardless of polling.
referenceupdated } from '$app/state';

navigating

A read-only object representing an in-progress navigation, with from, to, type and (if type === 'popstate') delta properties. Values are null when no navigation is occurring, or during server rendering.

const navigating:
	| Navigation
	| {
			from: null;
			to: null;
			type: null;
			willUnload: null;
			delta: null;
			complete: null;
	  };

page

A read-only reactive object with information about the current page, serving several use cases:

retrieving the combined data of all pages/layouts anywhere in your component tree (also see loading data)
retrieving the current value of the form prop anywhere in your component tree (also see form actions)
retrieving the page state that was set through goto (also see goto and shallow routing)
retrieving metadata such as the URL you're on, the current route and its parameters, the target of a shallow navigation, and whether or not there was an error

+layout

<script>
	import { page } from '$app/state';
</script>

<p>Currently at {page.url.pathname}</p>

{#if page.error}
	<span class="red">Problem detected</span>
{:else}
	<span class="small">All systems operational</span>
{/if}

<script lang="ts">
	import { page } from '$app/state';
</script>

<p>Currently at {page.url.pathname}</p>

{#if page.error}
	<span class="red">Problem detected</span>
{:else}
	<span class="small">All systems operational</span>
{/if}

Changes to page are available exclusively with runes. (The legacy reactivity syntax will not reflect any changes)

+page

<script>
	import { page } from '$app/state';
	const id = $derived(page.params.id); // This will correctly update id for usage on this page
	$: badId = page.params.id; // Do not use; will never update after initial load
</script>

<script lang="ts">
	import { page } from '$app/state';
	const id = $derived(page.params.id); // This will correctly update id for usage on this page
	$: badId = page.params.id; // Do not use; will never update after initial load
</script>

On the server, values can only be read during rendering (in other words not in e.g. load functions). In the browser, the values can be read at any time.

const page: Page;

updated

A read-only reactive value that's initially false. SvelteKit checks for new versions on data, remote, and form action responses (via the x-sveltekit-version header), when the tab regains focus or becomes visible, and on a poll interval (see version.pollInterval). updated.current is set to true when a new version is detected. updated.check() will force an immediate check, regardless of polling.

const updated: {
	get current(): boolean;
	check(): Promise<boolean>;
};

Page

The shape of the page reactive object.

interface Page<
	Params extends AppLayoutParams<'/'> =
		AppLayoutParams<'/'>,
	RouteId extends AppRouteId | null = AppRouteId | null
> {…}

url: ReadonlyURL & { readonly pathname: ResolvedPathname | (string & {}) };

The URL of the current page.

params: Params;

The parameters of the current page - e.g. for a route like /blog/[slug], a { slug: string } object.

route: {…}

Info about the current route.

id: RouteId;

The ID of the current route - e.g. for src/routes/blog/[slug], it would be /blog/[slug]. It is null when no route is matched.

status: number;

HTTP status code of the current page.

error: App.Error | null;

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

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.

state: App.PageState;

The page state, which can be manipulated using goto from $app/navigation.

shallow: {
	/** Parameters of the target route, or `null` if the URL does not resolve to a route. */
	params: AppLayoutParams<'/'> | null;
	/** Info about the target route, or `null` if the URL does not resolve to a route. */
	route: { id: AppRouteId } | null;
	/** The normalized URL passed to `goto(..., { shallow: true })`. */
	url: ReadonlyURL;
} | null;

Information about the target of the current shallow navigation, or null if no shallow navigation has occurred.

form: any;

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

ReadonlyURL

type ReadonlyURL = Readonly<
	Omit<URL, 'searchParams'> & {
		searchParams: ReadonlyURLSearchParams;
	}
>;

ReadonlyURLSearchParams

type ReadonlyURLSearchParams = Omit<
	URLSearchParams,
	'set' | 'append' | 'delete' | 'sort'
>;

Edit this page on GitHub llms.txt

previous next

$app/service-worker $app/tsconfig