Svelte

Overview

Svelte is a compiler-based UI framework that shifts work from runtime to build time, producing minimal JavaScript with no virtual DOM. Svelte 5 introduces runes for explicit, fine-grained reactivity. SvelteKit is the full-stack framework built on Svelte, providing file-based routing, server-side rendering, and deployment adapters.

When to use: Full-stack web apps, static sites, progressive enhancement, SSR/SSG, projects needing small bundle sizes, migration from Svelte 4 to 5.

When NOT to use: React/Vue ecosystem lock-in, projects requiring extensive third-party component libraries only available for other frameworks, teams with no Svelte experience on tight deadlines.

Quick Reference

Pattern	API / Syntax	Key Points
Reactive state	`let count = $state(0)`	Replaces `let` reactivity from Svelte 4
Derived state	`const double = $derived(count * 2)`	Replaces `$:` reactive declarations
Complex derivation	`const value = $derived.by(() => { ... })`	Multi-statement derived computations
Side effects	`$effect(() => { ... })`	Runs after DOM update, auto-tracks dependencies
Component props	`let { name, age = 25 } = $props()`	Replaces `export let`, supports defaults
Bindable props	`let { value = $bindable() } = $props()`	Two-way binding with `bind:value`
Debug inspection	`$inspect(value)`	Dev-only logging, stripped in production
Snippets	`{#snippet name(params)}...{/snippet}`	Replaces slots, reusable template blocks
Render snippet	`{@render name(args)}`	Invoke a snippet with arguments
Event handling	`<button onclick={handler}>`	Properties replace `on:click` directive
Each blocks	`{#each items as item (item.id)}...{/each}`	Keyed iteration for efficient updates
Await blocks	`{#await promise}...{:then}...{:catch}...`	Inline async rendering
Server load	`export function load({ params })` in `+page.server.ts`	Runs server-side only, accesses DB/secrets
Universal load	`export function load({ fetch })` in `+page.ts`	Runs on server and client
Form actions	`export const actions` in `+page.server.ts`	Progressive enhancement with `use:enhance`
Layout	`+layout.svelte` / `+layout.server.ts`	Shared UI and data across child routes
Server hooks	`handle()` in `src/hooks.server.ts`	Request middleware, auth, redirects
Error page	`+error.svelte`	Per-route error boundaries
Adapters	`adapter-auto`, `adapter-node`, `adapter-static`	Deploy to Vercel, Node, static hosting
API routes	`+server.ts` with `GET`, `POST`, etc.	Standalone endpoints, not tied to pages
Page options	`export const prerender = true`	Per-route SSR, CSR, prerender control
Shared state	`$state()` in `.svelte.ts` modules	Replaces writable stores for cross-component state
Raw state	`$state.raw(data)`	Opts out of deep proxying for large datasets

Svelte 4 to 5 Migration

Svelte 4 (Legacy)	Svelte 5 (Current)
`let count = 0` (reactive)	`let count = $state(0)`
`$: double = count * 2`	`const double = $derived(count * 2)`
`$: { sideEffect() }`	`$effect(() => { sideEffect() })`
`export let name`	`let { name } = $props()`
`<slot />`	`{#snippet children()}{/snippet}` + `{@render}`
`on:click={handler}`	`onclick={handler}`
`createEventDispatcher()`	Callback props: `let { onclick } = $props()`
`import { writable } from 'svelte/store'`	`$state()` in `.svelte.ts` modules
`$store` auto-subscription	Direct value access from rune-based state

Common Mistakes

Mistake	Correct Pattern
Using `$state` on non-primitives without care	`$state` deeply proxies objects; use `$state.raw()` for large read-only data
Destructuring `$props()` loses reactivity	Destructure at declaration only: `let { x } = $props()`
Reading `$effect` dependencies conditionally	Ensure all tracked reads happen unconditionally
Returning cleanup from `$effect` incorrectly	Return a function: `$effect(() => { return () => cleanup() })`
Mixing `on:click` and `onclick` in Svelte 5	Use `onclick` exclusively in Svelte 5 components
Using stores in new Svelte 5 code	Use `$state()` in `.svelte.ts` modules for shared state
Forgetting `(key)` in `{#each}` blocks	Always key: `{#each items as item (item.id)}`
Exporting load from `.svelte` files	Load functions belong in `+page.ts` or `+page.server.ts`
Not awaiting parent `load` in layouts	Use `await parent()` when child load depends on layout
Using `goto()` in server load functions	Use `redirect(303, '/path')` from `@sveltejs/kit`

Delegation

Pattern discovery: Use Explore agent
Code review: Delegate to code-reviewer agent
Build configuration: Delegate to Task agent

If the tailwind skill is available, delegate Tailwind CSS utility class patterns and configuration to it. If the vitest-testing skill is available, delegate Svelte component unit testing patterns to it. If the playwright skill is available, delegate end-to-end testing of SvelteKit routes and form actions to it. If the drizzle-orm skill is available, delegate database schema and query patterns used in SvelteKit server load functions to it. If the vite skill is available, delegate Vite build configuration and plugin setup to it.