AppHost logoAppHost

Devii · Frontend · 2026-06-24 · 7 min read

Share

Svelte 5 Runes: Explicit Reactivity With $state And $derived

Svelte 5 replaced implicit let reactivity with runes; what changed for components, props, and stores.

**Svelte 5** (stable from late 2024) introduced **runes**: compiler directives such as `$state`, `$derived`, `$effect`, and `$props` that make reactivity explicit. Documentation lives on `svelte.dev/docs/svelte`.

`$state` marks mutable reactive values. `$derived` computes values from dependencies without manual subscription lists. `$effect` runs side effects when dependencies change, replacing many `onMount` plus reactive statement patterns from Svelte 4.

UI state diagram on whiteboard
UI state diagram on whiteboard

Migration from Svelte 4 is incremental via compatibility mode. Libraries shipping components should document minimum Svelte versions because runes change public API ergonomics.

Svelte still compiles to lean JavaScript. Benchmark your app after migration: runes reduce magic but require discipline to avoid effect loops. Pair with SvelteKit for routing and deployment adapters.