Search • Svelte

Reference@sveltejs/kitAction

Shape of a form action method that is part of export const actions = {...} in +page.server.js. See for

Core conceptsForm actionsAnatomy of an action

Each action receives a RequestEvent object, allowing you to read the data with request.formData(). Aft

Core conceptsForm actionsAnatomy of an actionValidation errors

/** @satisfies {import('./$types').Actions} */ export const actions = { login: async ({ cookies, request }) => { const data = a

Core conceptsForm actionsAnatomy of an actionRedirects

/** @satisfies {import('./$types').Actions} */ export const actions = { login: async ({ cookies, request, +++url+++ }) => { con

Core conceptsForm actions

A +page.server.js file can export actions, which allow you to POST data to the server using the <form>

Reference@sveltejs/kitActionFailure

interface ActionFailure< T extends Record<string, unknown> | undefined = undefined > {/*…*/} status:

Reference@sveltejs/kitActionResult

When calling a form action via fetch, the response will be one of these shapes.<form method="post" use

Reference@sveltejs/kitActions

Shape of the export const actions = {...} object in +page.server.js. See form actions for more informa

Core conceptsForm actionsDefault actions

st case, a page declares a default action: /** @satisfies {import('./$types').Actions} */ export const actions = { default: asyn

Core conceptsForm actionsNamed actions

Instead of one default action, a page can have as many named actions as it needs: /** @satisfies {imp

Core conceptsForm actionsLoading data

After an action runs, the page will be re-rendered (unless a redirect or an unexpected error occurs),

Core conceptsForm actionsAlternatives

Form actions are the preferred way to send data to the server, since they can be progressively enhance

Core conceptsForm actionsGET vs POST

As we've seen, to invoke a form action you must use method="POST".Some forms don't need to P

Core conceptsForm actionsProgressive enhancement

eceding sections we built a /login action that works without client-side JavaScript — not a fetch in sight. That's great, but when

Core conceptsForm actionsProgressive enhancementuse:enhance

e a form is to add the use:enhance action: <script> +++import { enhance } from '$app/forms';+++ /** @type {import('./$types').

Core conceptsForm actionsProgressive enhancementCustomising use:enhance

urns a callback that runs with the ActionResult.<form method="POST" use:enhance={({ formElement, formData, action, cancel, submi

Core conceptsForm actionsProgressive enhancementCustom event listener

'$app/navigation'; import { applyAction, deserialize } from '$app/forms'; /** @type {import('./$types').PageProps} */ let { f

Best practicesAuth

horization means determining which actions they are allowed to take.

Reference@sveltejs/kitfail

Create an ActionFailure object. Call when form submission fails. function fail(status: number): Action

Reference@sveltejs/kitCsp

namespace Csp { type ActionSource = 'strict-dynamic' | 'report-sample'; type BaseSource = | 'self'

Reference@sveltejs/kitCspDirectives

ault-src'?: Array<Csp.Source | Csp.ActionSource>; 'frame-src'?: Csp.Sources; 'worker-src'?: Csp.Sources; 'connect-src'?: Csp

Reference$app/formsapplyAction

This action updates the form property of the current page with the given data and updates page.status.

Reference$app/formsenhance

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

Reference@sveltejs/kitSubmitFunction

Record<string, any> > = (input: { action: URL; formData: FormData; formElement: HTMLFormElement; controller: AbortCon

AdvancedPackagingBest practices

ke the current URL or a navigation action as a prop rather than relying directly on $app/state, $app/navigation, etc. Writing your

Reference@sveltejs/kitisActionFailure

Checks whether this is an action failure thrown by fail. function isActionFailure(e: unknown): e is Ac

Reference$app/servergetRequestEvent

rver hooks, server load functions, actions, and endpoints (and functions called by them).In environments without `AsyncLocalStorag

Core conceptsState managementAvoid shared state on the server

/** @satisfies {import('./$types').Actions} */ export const actions = { default: async ({ request }) => { const data = await re

AppendixMigrating to SvelteKit v2Improved error handling

for POST requests to pages without actions) don't trigger handleError at all, but should. In the latter case, the resulting $page.

Reference$app/formsdeserialize

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

Reference$app/navigationdisableScrollHandling

(in onMount or afterNavigate or an action, for example), this disables SvelteKit's built-in scroll handling. This is generally dis

Core conceptsRouting$types

PageData, form: import('./$types').ActionData }} */ let { data, form } = $props(); ``` Or, for a layout: ```js /// file: +layout

AppendixGlossaryPrerendering

ver, and the page must not contain actions. Note that you can still prerender content that is loaded based on the page's parameter

Reference@sveltejs/kitHandleFetch

ndering) inside an endpoint, load, action, handle, handleError or reroute. type HandleFetch = (input: { event: RequestEvent; req

ReferenceTypesGenerated types

union of the return values of all Actions is available as ActionData.Starting with version 2.16.0, two additional helper types ar

Core conceptsLoading dataUsing `getRequestEvent`

ogin in any load function (or form action, for example) to guarantee that the user is logged in:import { requireLogin } from '$lib

Core conceptsState managementStoring state in the URL

<a href="..."> or <form action="..."> attributes, or set them programmatically via goto('?key=value'

Build and deployStatic site generationGitHub Pages

default config;You can use GitHub actions to automatically deploy your site to GitHub Pages when you make a change. Here's an exa

Reference@sveltejs/kitPage

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

AdvancedHooksServer hookshandleFetch

ndering) inside an endpoint, load, action, handle, handleError or reroute.For example, your load function might make a request to

Build and deployStatic site generationGitHub Pagesfile: .github/workflows/deploy.yml

- name: Checkout uses: actions/checkout@v4 # If you're using pnpm, add this step then change the commands and cache k

AdvancedHooksUniversal hookstransport

ypes — returned from load and form actions — across the server/client boundary. Each transporter contains an encode function, whic

Core conceptsRouting+serverReceiving data

a + b); }[!NOTE] In general, [form actions](form-actions) are a better way to submit data from the browser to the server. [!NOTE]

Core conceptsRouting+page+page.server.js

age.server.js file can also export actions. If load lets you read data from the server, actions let you write data to the server u

Core conceptsPage optionsprerenderWhen not to prerender

for example in onMount).Pages with actions cannot be prerendered, because a server must be able to handle the action POST requests

Build and deployNode serversEnvironment variablesORIGIN`, PROTOCOL_HEADER`, `HOST_HEADER`, and `PORT_HEADER`

erience this error when using form actions:[!NOTE] Cross-site POST form submissions are forbidden