sveltekit

---
name: sveltekit
description: Use when building full-stack Svelte apps with filesystem routing, server load functions, form actions, and adapter-based deployment.
source: https://svelte.dev/docs/kit
generated: 2026-07-02T18:43:34.542Z
category: framework
audience: engineers
---

## When to use

- Building a full-stack web app with Svelte and server-side rendering
- You need filesystem-based routing with layouts and nested routes
- Loading data on the server and progressively enhancing forms with actions
- Deploying to Node, Cloudflare, Vercel, or static hosting via adapters

## Key concepts

### Filesystem routing

Routes live under src/routes; each directory is a URL segment. +page.svelte renders UI, +layout.svelte wraps children, and [param] folders capture dynamic segments.

### load functions

Exported `load` in +page.js/+layout.js (universal) or +page.server.js/+layout.server.js (server-only) fetch data; their return value is exposed to the page as the `data` prop.

### Form actions

Named or default `actions` exported from +page.server.js handle POST submissions; use:enhance progressively enhances <form> without full reloads.

### Endpoints (+server.js)

Files exporting GET/POST/etc. handlers create standalone API routes returning Response or json() objects.

### Adapters

adapter-auto, adapter-node, adapter-cloudflare, adapter-vercel, and adapter-static compile the app for a specific deployment target, set in svelte.config.js.

### $app modules

Runtime helpers: $app/navigation (goto, invalidate), $app/stores or $app/state (page, navigating), and $env modules for static/dynamic env vars.

## API reference

```
src/routes/+page.svelte
```

The page component for a route; receives load data via the `data` prop.

```
<script>
  let { data } = $props();
</script>

<h1>{data.title}</h1>
```

```
export function load({ params, fetch, url }): +page.js / +layout.js
```

Universal load runs on server then client; good for public data and fetch.

```
export async function load({ params, fetch }) {
  const res = await fetch(`/api/post/${params.id}`);
  return { post: await res.json() };
}
```

```
export function load({ params, locals, cookies }): +page.server.js
```

Server-only load; can access databases, secrets, locals, and cookies. Must return serializable data.

```
export async function load({ locals }) {
  return { user: locals.user };
}
```

```
export const actions = { default: async ({ request, cookies }) => {} }
```

Handle form POSTs in +page.server.js; return data or fail()/redirect().

```
import { fail, redirect } from '@sveltejs/kit';

export const actions = {
  login: async ({ request, cookies }) => {
    const data = await request.formData();
    const email = data.get('email');
    if (!email) return fail(400, { missing: true });
    cookies.set('session', 'abc', { path: '/' });
    throw redirect(303, '/dashboard');
  }
};
```

```
export function GET/POST/PUT/DELETE({ request, url }): +server.js
```

Define API route handlers; return a Response or use json() from @sveltejs/kit.

```
import { json } from '@sveltejs/kit';

export function GET({ url }) {
  return json({ q: url.searchParams.get('q') });
}
```

```
import { error, redirect, fail, json } from '@sveltejs/kit'
```

Control-flow and response helpers used inside load, actions, and endpoints.

```
import { error } from '@sveltejs/kit';
export function load({ params }) {
  if (!params.id) throw error(404, 'Not found');
}
```

```
use:enhance from '$app/forms'
```

Progressively enhance a form so submissions are handled with fetch instead of full reload.

```
<script>
  import { enhance } from '$app/forms';
</script>

<form method="POST" action="?/login" use:enhance>
  <input name="email" />
</form>
```

```
goto(url) / invalidate(url) / invalidateAll() from '$app/navigation'
```

Programmatic navigation and re-running of load functions whose dependencies changed.

```
import { goto, invalidateAll } from '$app/navigation';
await goto('/dashboard');
await invalidateAll();
```

```
+layout.server.js / +error.svelte / +page.js exports (prerender, ssr, csr)
```

Page options control rendering: export const prerender = true / ssr = false / csr = false.

```
export const prerender = true;
export const ssr = false;
```

## Gotchas

- Server load (+page.server.js) cannot return non-serializable values like functions or class instances — they must be devalue-serializable.
- redirect() and error() must be thrown (or returned in newer versions); calling without throwing does nothing in older code paths.
- Use the special `fetch` from the load event, not global fetch, so cookies/relative URLs and request dedup work during SSR.
- Environment variables: use $env/static/private and $env/dynamic/private for secrets — never import them into client-side code.
- load functions re-run only when their tracked dependencies (params, url, fetched urls) change; use depends()/invalidate() to force reruns.
- Form actions live only in +page.server.js, not +server.js; pointing a <form action> at an endpoint won't trigger actions.
- adapter-auto guesses the platform on supported CI hosts; for local node deploys install and configure adapter-node explicitly.
- Setting ssr = false turns a route into an SPA — load still runs but only on the client, so server-only data must move elsewhere.

---
Generated by SkillMake from https://svelte.dev/docs/kit on 2026-07-02T18:43:34.542Z.
Verify against source before relying on details.

File: ~/.claude/skills/sveltekit/SKILL.md