svelte-docs

Svelte 5 + SvelteKit — Skill Documentation

Source: svelte.dev/docs | svelte.dev/docs/kit Version: Svelte 5.x, SvelteKit 2.x, sv CLI

What is Svelte?

Svelte is a UI framework that uses a compiler to turn declarative components (HTML, CSS, JS) into lean, optimized JavaScript. Unlike React/Vue which use a virtual DOM, Svelte compiles away at build time — no runtime framework overhead.

What is SvelteKit?

SvelteKit is the official application framework for Svelte, powered by Vite. It provides routing, SSR/SSG, data loading, form actions, adapters for deployment, and more. Similar to Next.js (React) or Nuxt (Vue).

Quick Start

npx sv create myapp
cd myapp
npm install
npm run dev

Core Concepts

• Runes: Compiler keywords ($state, $derived, $effect, $props, $bindable, $inspect, $host) that control reactivity
• Single-File Components: .svelte files with <script>, <template> (markup), <style>
• Reactive State: $state() for reactive variables, $derived() for computed values
• Effects: $effect() for side-effects that track dependencies
• Props: $props() rune for component inputs
• Snippets: Reusable markup chunks (replaced slots from Svelte 4)
• Stores: svelte/store for reactive state across components (writable, readable, derived)
• Context: createContext() / setContext() / getContext() for parent-child data sharing
• Filesystem Routing: src/routes/ directory defines routes with +page.svelte, +layout.svelte, etc.
• Load Functions: +page.js / +page.server.js for data loading
• Form Actions: +page.server.js exports for POST handling with progressive enhancement
• Adapters: Deploy to Node, static, Cloudflare, Netlify, Vercel, and more

File Index

File	Topics	Lines
getting-started.md	Overview, .svelte files, runes ($state/$derived/$effect/$props/$bindable/$inspect/$host), basic markup, control flow, snippets, @render, @html, @attach, @const/@debug, declaration tags, bind:, use:, transition:, animate:, style:, class:, await expressions, styling (scoped/global/custom properties), special elements	~650
components.md	svelte:boundary, svelte:window/document/body/head/element/options, stores (writable/readable/derived/readonly/get/store contract), context (createContext/setContext/getContext), lifecycle (onMount/onDestroy/tick/beforeUpdate/afterUpdate), imperative API (mount/unmount/render/hydrate), hydratable data, best practices, testing (Vitest/Storybook/Playwright), TypeScript, custom elements, browser support, Svelte 4 migration, Svelte 5 migration, FAQ	~600
api-reference.md	svelte (SvelteComponent/mount/unmount/onMount/onDestroy/createContext/createEventDispatcher/flushSync/fork/getAbortSignal/tick/untrack/Component/Snippet), svelte/action, svelte/animate (flip), svelte/attachments, svelte/compiler (compile/parse/preprocess/migrate/walk), svelte/easing (30 functions), svelte/events (on), svelte/legacy, svelte/motion (spring/tweened/prefersReducedMotion), svelte/reactivity (MediaQuery/SvelteDate/SvelteMap/SvelteSet/SvelteURL/createSubscriber), svelte/server (render), svelte/store (writable/readable/derived/readonly/get/fromStore/toStore), svelte/transition (fade/fly/slide/blur/draw/scale/crossfade), compiler errors, compiler warnings, runtime errors, runtime warnings	~550
sveltekit.md	Introduction, creating a project, project types, project structure, web standards, routing (+page/+layout/+error/+server), loading data (universal vs server/load events/cookies/streaming/parallel), form actions (default/named/progressive enhancement), page options (prerender/ssr/csr/trailingSlash), state management, remote functions (query/form/command), environment variables, building, adapters (Node/SSG/SPA/Cloudflare/Netlify/Vercel), advanced routing (rest params/matching/sorting/group layouts), hooks (handle/handleFetch/handleError/init/reroute/transport), errors, link options, service workers, server-only modules, snapshots, shallow routing, observability, packaging, auth, performance, images, accessibility, SEO, FAQ, integrations, breakpoint debugging, migration (SvelteKit v2/Sapper), glossary	~700
sveltekit-api.md	@sveltejs/kit (Server/error/fail/redirect/json/text/isHttpError/isRedirect/isActionFailure/VERSION), @sveltejs/kit/hooks (sequence/defineEnvVars), @sveltejs/kit/node (getRequest/setResponse/createReadableStream), @sveltejs/kit/node/polyfills (installPolyfills), @sveltejs/kit/vite (sveltekit), $app/environment (browser/building/dev/version), $app/forms (applyAction/deserialize/enhance), $app/navigation (goto/invalidate/invalidateAll/preloadCode/preloadData/pushState/replaceState/afterNavigate/beforeNavigate/onNavigate/disableScrollHandling/refreshAll), $app/paths (base/assets/asset/match/resolve/resolveRoute), $app/server (command/form/query/prerender/read/requested/getRequestEvent), $app/state (navigating/page/updated), $app/stores (page/navigating/updated/getStores), $app/types, $env/dynamic/private, $env/dynamic/public, $env/static/private, $env/static/public, $lib, $service-worker, configuration (Config/KitConfig), CLI (svelte-kit sync), types (app.d.ts/Generated types/$lib), sv CLI (create/add/check/migrate), add-ons (better-auth/drizzle/eslint/experimental/mcp/mdsvex/paraglide/playwright/prettier/storybook/sveltekit-adapter/tailwindcss/vitest), create your own add-on, sv-utils, MCP server, AI tools	~600