Page Title

## Directories ### getting_started Foundation for creating and configuring SvelteKit projects with rendering patterns, project structure, and Web API usage. ## Project Creation Run `npx sv create my-app` to scaffold a new SvelteKit project. Start the dev server with `npm run dev` on localhost:5173. ## Core Architecture - Pages are Svelte components in `src/routes` - Server-renders on first visit for SEO/performance, then client-side app takes over - Use Visual Studio Code with Svelte extension ## Project Structure ``` src/ ├ lib/ # Utilities, components (via $lib) │ └ server/ # Server-only code (via $lib/server) ├ params/ # Param matchers ├ routes/ # Application routes ├ app.html # Page template with %sveltekit.head%, %sveltekit.body%, %sveltekit.assets%, %sveltekit.nonce%, %sveltekit.env.[NAME]%, %sveltekit.version% ├ error.html # Error page with %sveltekit.status%, %sveltekit.error.message% ├ hooks.client.js # Client hooks ├ hooks.server.js # Server hooks ├ service-worker.js # Service worker └ tracing.server.js # Observability static/ # Static assets package.json # Requires @sveltejs/kit, svelte, vite as devDependencies svelte.config.js # Configuration tsconfig.json # Extends .svelte-kit/tsconfig.json vite.config.js # Uses @sveltejs/kit/vite plugin ``` ## Rendering & Deployment Patterns **Default**: SSR initial load, then CSR for navigation **Static**: `adapter-static` for prerendering, or `prerender` option for selective pages. `adapter-vercel` supports ISR. **SPA**: Client-side only with `adapter-auto` or serverless adapters **Multi-page**: Set `csr = false` to render subsequent links on server, or use `data-sveltekit-reload` for specific links **Separate backend**: Use `adapter-node` or serverless adapters **Serverless**: `adapter-auto` (zero-config), `adapter-vercel`, `adapter-netlify`, `adapter-cloudflare` **Own server/VPS/Container**: `adapter-node` **Library**: `@sveltejs/package` with `sv create` library option **PWA/Offline**: Full service worker support **Mobile/Desktop**: Convert SPA with Tauri, Capacitor, Wails, or Electron. Use `bundleStrategy: 'single'` for HTTP/1 limitations **Browser extension**: `adapter-static` or community adapters **Embedded device**: `bundleStrategy: 'single'` to reduce concurrent requests ## Web APIs SvelteKit builds on standard Web APIs: Fetch, Request, Response, Headers, FormData, Streams, URL, Web Crypto. **Fetch**: Available in hooks, server routes, and browser. Special version in `load` functions and server hooks allows direct endpoint invocation during SSR without HTTP calls. Server-side `fetch` outside `load` requires explicit `cookie`/`authorization` headers. Relative URLs supported in `load` functions only. **Request/Response**: Accessible as `event.request` in hooks and server routes. Handlers in `+server.js` return Response objects. **Headers**: Read from `request.headers`, set in response: ```js import { json } from '@sveltejs/kit'; export function GET({ request }) { return json({ userAgent: request.headers.get('user-agent') }, { headers: { 'x-custom-header': 'potato' } }); } ``` **FormData**: Handle form submissions: ```js export async function POST(event) { const body = await event.request.formData(); return json({ name: body.get('name') ?? 'world' }); } ``` **Streams**: ReadableStream, WritableStream, TransformStream for large/chunked responses **URL**: Access query parameters via `url.searchParams` (URLSearchParams) **Web Crypto**: `crypto.randomUUID()` for UUID generation ### core_concepts Core routing, data loading, form handling, and state management patterns in SvelteKit with type-safe remote functions for client-server communication. ## Routing Filesystem-based routing in `src/routes` with `+` prefixed files: - `+page.svelte` - page component receiving `data` prop - `+page.js` / `+page.server.js` - export `load()` function for data fetching - `+layout.svelte` / `+layout.js` / `+layout.server.js` - wrap pages with `{@render children()}` - `+error.svelte` - error boundary - `+server.js` - API routes exporting HTTP handlers (`GET`, `POST`, etc.) All files run on server; all run on client except `+server` files. Layouts and error boundaries apply to subdirectories. ## Load Functions Define in `+page.js`/`+page.server.js` or `+layout.js`/`+layout.server.js` to fetch data before rendering. **Server load** (`+page.server.js`, `+layout.server.js`): - Always runs on server - Access to `cookies`, `locals`, `request`, `platform`, `clientAddress` - Must return serializable data **Universal load** (`+page.js`, `+layout.js`): - Runs on server during SSR, then in browser on navigation - Can return non-serializable data Load functions receive `url`, `route`, `params`, and a `fetch` function that inherits cookies and caches responses. Use `setHeaders()` for caching, `await parent()` for parent data, `error()` to throw errors, `redirect()` to redirect. Server loads can return unresolved promises for streaming. Rerun when referenced `params` or `url` properties change, or when dependencies declared via `fetch(url)` or `depends(url)` are invalidated with `invalidate(url)` or `invalidateAll()`. ## Form Actions Export `actions` from `+page.server.js` to handle form submissions server-side: ```js export const actions = { login: async ({ cookies, request }) => { const data = await request.formData(); if (!data.get('email')) return fail(400, { missing: true }); cookies.set('sessionid', token, { path: '/' }); return { success: true }; } }; ``` Invoke with `

` or `

sveltejs/sveltekit