Svelte 5 Runes: A Quick Look

Svelte 5 introduces "runes" to handle reactivity. It's a significant shift that brings more explicit control.

The `$state` Rune

Instead of let count = 0, we now use:

let count = $state(0);

Derived values are now explicit:

let double = $derived(count * 2);

Side effects are handled with $effect:

$effect(() => {
	console.log(count);
});

This new model resolves many edge cases with the previous compiler-based reactivity and makes Svelte even more powerful.