--- og_image: "/images/guides/svelte-5-runes-complete-guide-2026.webp" title: "Svelte 5 Runes: A Practical Guide 2026" description: "Complete guide to Svelte 5 runes: $state, $derived, $effect, $props, $bindable. Reactivity system, migration from Svelte 4, and production patterns in 2026." date: "2026-03-16" tier: 1 authors: ["team"] tags: ["svelte", "svelte-5", "runes", "reactivity", "javascript", "frontend"] --- Svelte 5 shipped in October 2024 with a completely new reactivity system. Instead of Svelte 4's compiler-detected reactive declarations, Svelte 5 introduces **runes** — explicit reactive primitives that work in both `.svelte` files and plain `.svelte.ts` files. The result is a more predictable, more composable, and more powerful reactivity model. If you're starting a Svelte project today, you're using runes. If you're on Svelte 4, this guide covers everything you need to know to migrate. ## TL;DR **Svelte 5 runes are explicit reactive primitives** (`$state`, `$derived`, `$effect`, `$props`) that replace Svelte 4's implicit reactive declarations. They're compiler directives — not function calls — so the `$` prefix is not a dollar sign convention, it's Svelte's syntax for reactive state. The biggest wins: reactive state works outside `.svelte` files, `$derived` is always-consistent, and `$effect` runs after DOM updates with proper cleanup semantics. ## Key Takeaways - **`$state(value)`**: reactive state — replaces `let count = 0` in Svelte 4 - **`$derived(expr)`**: computed values — replaces `$: doubled = count * 2` - **`$effect(() => {})`**: side effects with auto-cleanup — replaces `$: { sideEffect() }` - **`$props()`**: component props — replaces `export let name` - **`$bindable()`**: marks a prop as two-way bindable - **`$inspect(value)`**: dev-only reactive logging — logs when dependencies change - **Universal reactivity**: runes work in `.svelte.ts` files, not just `.svelte` - **Snippets**: `{#snippet name()}{/snippet}` replaces named slots; `{@render snippet()}` renders them - **Svelte 4 syntax still works**: backward-compatible, gradual migration supported - **Svelte 5 version**: 5.45.0 (December 2025); GA October 22, 2024 ## At a Glance | Concept | Svelte 4 | Svelte 5 (Runes) | |---------|----------|-----------------| | Reactive state | `let count = 0` | `let count = $state(0)` | | Computed values | `$: doubled = count * 2` | `let doubled = $derived(count * 2)` | | Side effects | `$: { doSomething(x) }` | `$effect(() => { doSomething(x) })` | | Component props | `export let name: string` | `let { name } = $props()` | | Two-way binding | `export let value` + `bind:value` | `let { value = $bindable() } = $props()` | | Lifecycle | `onMount`, `onDestroy` | `$effect` with cleanup return | | Named slots | `` | `{#snippet header()}{/snippet}` | | Stores | `writable()`, `$store` | `$state()` in `.svelte.ts` files | | Reactive in non-components | ❌ | ✅ (`.svelte.ts` files) | --- ## $state: Reactive State `$state` is the foundation. Declare any value as reactive state and Svelte tracks it: ```svelte ``` ### Deep Reactivity `$state` is deeply reactive for objects and arrays — mutations are tracked automatically: ```svelte ``` ### $state.raw For values where you want to opt out of deep reactivity (large arrays, expensive objects): ```svelte ``` ### Svelte 4 vs Svelte 5 State ```svelte ``` --- ## $derived: Computed Values `$derived` creates values that automatically recompute when their dependencies change: ```svelte

Area: {area}, Perimeter: {perimeter}

{#if isSquare}

It's a square!

{/if} ``` `$derived` is **lazy and always consistent** — it recomputes only when accessed after a dependency changed, never runs unnecessarily. ### $derived.by For complex computations that need a function body (multiple statements): ```svelte ``` ### Svelte 4 vs Svelte 5 Derived ```svelte ``` The key Svelte 4 problem: `$:` could be either a computed value OR a side effect — same syntax for different things, execution order was implicit. Svelte 5 separates these cleanly. --- ## $effect: Side Effects `$effect` runs after the DOM has been updated, whenever reactive dependencies change: ```svelte ``` ### $effect.pre Runs BEFORE DOM updates (like `beforeUpdate` in Svelte 4): ```svelte ``` ### $effect.tracking Check whether you're inside a reactive context: ```svelte ``` ### Svelte 4 vs Svelte 5 Effects ```svelte ``` --- ## $props: Component Props `$props()` replaces `export let` for declaring component props: ```svelte ``` ### Rest Props ```svelte ``` ### TypeScript with $props ```svelte ``` --- ## $bindable: Two-Way Binding When a parent needs to bind to a child's prop value: ```svelte

Current: {text}

``` `$bindable()` declares that this prop can be two-way bound. Without it, `bind:value` on the parent would be a Svelte error. --- ## $inspect: Development Logging `$inspect` is a dev-only rune that logs reactive values whenever they change — like `console.log` but reactive: ```svelte ``` `$inspect` is automatically removed in production builds. It's the reactive equivalent of adding `$: console.log(x)` in Svelte 4, but cleaner. --- ## Universal Reactivity: Runes Outside .svelte The most powerful change in Svelte 5: runes work in `.svelte.ts` and `.svelte.js` files, enabling reactive state outside of components: ```typescript // counter.svelte.ts export function createCounter(initial = 0) { let count = $state(initial) let doubled = $derived(count * 2) return { get count() { return count }, get doubled() { return doubled }, increment() { count++ }, decrement() { count-- }, reset() { count = initial }, } } ``` ```svelte

{counter.count} (×2 = {counter.doubled})

``` This replaces Svelte stores for most use cases. Stores (`writable`, `readable`, `derived`) still work in Svelte 5 but the `.svelte.ts` pattern is more idiomatic. ```typescript // Old pattern: Svelte store import { writable, derived } from 'svelte/store' export const count = writable(0) export const doubled = derived(count, $c => $c * 2) // New pattern: $state in .svelte.ts // (see createCounter above — no store boilerplate) ``` --- ## Snippets: Replacing Slots Svelte 5 replaces named slots with **snippets**: ```svelte

Title

Content here

{#snippet header()}

Title

{/snippet}

Content here

``` Defining snippet-accepting props in a component: ```svelte

{#if header}

{@render header()}

{/if}

{@render children()}

``` Snippets with parameters: ```svelte {#snippet item(todo)} {todo.text} {/snippet} {#each items as i} {@render item(i)} {/each} ``` --- ## Migrating from Svelte 4 Svelte 5 is backward-compatible — Svelte 4 syntax still works. You can migrate incrementally: ### Migration Tool ```bash npx sv migrate svelte-5 ``` This automatically converts most Svelte 4 patterns to runes. Review the output — some patterns need manual adjustment. ### Common Conversions ```svelte ``` ### What Breaks / Major Changes - **`` with `name` attribute** — still works but snippets are preferred - **`$: label` statement** — works but should migrate to `$derived` / `$effect` - **Svelte stores with `$store` syntax** — still work, no change needed yet - **`export let`** — still works but should migrate to `$props()` - **`createEventDispatcher` is removed** — use callback props instead: ```svelte ``` - **`$$props`, `$$restProps`, `$$slots`** — replaced by `$props()` rest spread (`...rest`) and `{@render children()}` checks - **``** — deprecated; use the component directly as a value - **Object/class mutation**: class field reactivity requires `$state` at the field level, not wrapping `new Foo()` with `$state()` --- ## Performance and Bundle Size Svelte 5 is meaningfully faster and produces smaller bundles than Svelte 4: **Bundle size reduction:** - Existing Svelte 4 apps see ~50% bundle size reduction after upgrading to Svelte 5 — same components, no code changes - Real-world example: one app went from **261 KB → 181 KB** (80 KB reduction) - Svelte 5 runtime: **~1.6 KB** gzipped (vs React 18 at ~42 KB, Vue 3 at ~22 KB) **Runtime benchmarks:** ``` Framework runtime sizes (gzipped): Svelte 5: ~1.6 KB SolidJS: ~7 KB Vue 3: ~22 KB React 18: ~42 KB Real-world e-commerce benchmark: Svelte 5.38: 8.2 KB initial bundle, 156ms time-to-interactive React 18: 47 KB initial bundle, 340ms time-to-interactive js-framework-benchmark vs Svelte 4: Simple app init: ~12% faster Complex updates: ~15% faster Overall ranking: 2nd (behind SolidJS, ahead of Vue 3 and React) ``` Why Svelte 5 bundles are smaller than Svelte 4 despite adding a signals runtime: fine-grained reactivity means fewer components re-render on any given update, so the compiler emits less update code per component. The compiled output is more compact. Svelte 5 is also more tree-shakeable. The `$state` deep reactivity (proxy) does add some overhead for large object trees — use `$state.raw` when you have large arrays or objects where you're always replacing, not mutating. --- ## Svelte 5 + SvelteKit SvelteKit 2 supports Svelte 5 fully. Your load functions, form actions, and routes work identically. The main migration concern is component files — page and layout components need the same Svelte 4→5 conversion. ```typescript // +page.ts — unchanged import type { PageLoad } from './$types' export const load: PageLoad = async ({ params }) => { return { id: params.id } } ``` ```svelte

Item {data.id}

``` ### $app/state replaces $app/stores SvelteKit 2.12 added `$app/state` as the runes-based replacement for `$app/stores`: ```typescript // Svelte 4 / SvelteKit 1 — store syntax import { page } from '$app/stores' $page.url.pathname // $ prefix to auto-subscribe // Svelte 5 / SvelteKit 2 — runes syntax import { page } from '$app/state' page.url.pathname // no $ prefix needed — it's a reactive object ``` `$app/stores` is deprecated as of SvelteKit 2.12. The `page`, `navigating`, and `updated` state objects from `$app/state` work in `.svelte.ts` files as well as components. --- ## Adopting Runes on an Existing Team The Svelte 5 migration path is designed to be gradual, but the change in mental model is real. Svelte 4's implicit reactivity — where any `let` variable in a `.svelte` file was automatically reactive — felt like magic and caused subtle bugs when developers expected reactivity to work outside components or in plain `.ts` files. Runes are explicit and transportable: the same `$state` and `$derived` primitives work identically in component files and in standalone `.svelte.ts` modules, which eliminates the "why isn't this reactive?" confusion that was common in Svelte 4 codebases. For teams migrating incrementally, the key insight is that Svelte 4 and Svelte 5 syntax coexist in the same project. Individual components can be migrated file by file without breaking others. The `npx sv migrate svelte-5` tool handles the mechanical conversion of most patterns. The patterns that still require human review are components using `$$props`, `$$restProps`, or `createEventDispatcher` — all of which have clean Svelte 5 equivalents but need manual verification that the new callback prop pattern matches how the component is used by its parents. One area where developers get tripped up: class-based state. In Svelte 5, wrapping a class instance with `$state(new MyClass())` makes the reference reactive but does NOT make the class's internal properties reactive. For class-based state patterns, each reactive property must be declared with `$state` at the field level inside the class. This is a meaningful architectural change for codebases that use class instances extensively, and it is not caught by the auto-migration tool. The Svelte team's commitment to backward compatibility in Svelte 5 means Svelte 4 component syntax continues to work — there is no forced migration deadline. This makes incremental adoption practical for large codebases: you can introduce runes in new components and utility files without touching existing Svelte 4 components, letting the migration happen naturally over multiple development cycles rather than as a single high-risk upgrade. *Compare Svelte and SvelteKit download trends on [PkgPulse](https://www.pkgpulse.com/compare/svelte).* *Related: [SolidJS vs Svelte 5 vs React Reactivity](/guides/solidjs-vs-svelte-5-vs-react-reactivity-2026) · [Vue 3 vs Svelte 5 2026](/guides/vue-3-vs-svelte-5-2026) · [React 19 vs Svelte 5 Compiler](/guides/react-19-compiler-vs-svelte-5-compiler-2026)*