Learn SvelteKit by building. Every topic is real code you can read, copy, and run — work through the lessons in order, from routing and layouts to load functions, form actions, hooks, and deployment.
SvelteKit is the app framework built on Svelte. Be comfortable with Svelte (and ideally TypeScript) before starting.
Before you start
To practice the examples in this course on your computer:
Ctrl+`).pnpm dlx sv create my-app (or npx sv create my-app with npm) and pick the SvelteKit minimal + TypeScript options. This creates a my-app folder with a ready-to-run project — the setup every example here is written for.my-app folder (File → Open Folder) and run pnpm dev (or npm run dev) in the terminal.src/routes/ as each lesson shows — with the dev server running, http://localhost:5173 updates every time you save.Getting Started
Create a SvelteKit app, learn the folders it gives you, and run the dev, build, and preview commands.
Pages & Layouts
Turn folders into routes, share UI with +layout.svelte, and nest layouts so each section keeps its own shell.
Dynamic Routes & Organization
Generate pages from data with [param] folders, match many segments with rest params, and tidy URLs with route groups.
Linking & Navigation
Move between routes with plain links that SvelteKit enhances, navigate from code with goto, and highlight the active link.
Loading Data
Fetch data before a page renders with load functions, choose server-only vs universal, read params, and stream slow data.
Server Routes (APIs)
Build API endpoints with +server.ts files — return JSON, handle GET and POST, read params and the query string.
Forms & Actions
Handle form submissions on the server with actions, progressively enhance with use:enhance, and return validation errors with fail.
Error Handling
Show expected errors with the error helper, customize the error page with +error.svelte, and place boundaries per section.
Hooks
Run code on every server request with hooks.server.ts — read cookies, attach the user to event.locals, and guard routes.
State & SSR Safety
Share state without leaking it between users — the server pitfall to avoid, load data, and Svelte 5 rune stores in .svelte.ts.
Environment Variables & Config
Keep secrets in .env, expose safe values with the PUBLIC_ prefix, and read them through SvelteKit’s typed $env modules.
SEO & Deployment
Set the title and meta tags with svelte:head, prerender static pages, choose an adapter, and build for production.