Svelte 5 introduced Runes — explicit reactivity primitives that replace the old implicit compiler magic. This post explores how they work and why they matter.
From $: to $state
The old Svelte reactive statement ($: doubled = count * 2) was elegant but magical. If you didn't know the exact rules, you could easily create bugs.
With Runes, everything is explicit:
let count = $state(0);
let doubled = $derived(count * 2);Why This Matters
Explicit reactivity means better TypeScript support, easier debugging, and more predictable behavior. The tradeoff is slightly more verbose code, but the clarity gain is worth it.