Skip to main content
SvelteKitReference

$app/state

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

import { navigating, page, updated } from '$app/state';

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