Runes and signals

Svelte 5 introduced runes — a small set of primitives that make reactivity explicit instead of magical. They read like ordinary JavaScript, which is the point.

`$state`

The most common rune. Wrap a value and the compiler takes care of tracking reads and writes.

let count = $state(0);

`$derived`

Compute one value from another. Memoised automatically.

let doubled = $derived(count * 2);

`$effect`

Side effects that re-run when their dependencies change. Think of it as a useEffect with the right dependency tracking for free.

If you find yourself reaching for $effect to compute a value, you almost certainly wanted $derived.

A clean rune setup makes a Svelte component read like a small, honest program.