What are Svelte 5 runes and how do they differ from $: statements?

Runes are compiler keywords that make reactivity explicit and also work in .svelte.js and .svelte.ts modules, not just components. $state creates a reactive value, deeply reactive through a proxy for objects and arrays. $derived declares a computed value that updates when its dependencies change. $effect runs a side effect after the DOM updates, tracking whatever reactive values it reads.

<script>
  let count = $state(0);
  let doubled = $derived(count * 2);
  $effect(() => console.log(doubled));
</script>
<button onclick={() => count++}>{doubled}</button>

$props() declares component inputs, $bindable() enables two-way binding, and $inspect helps debugging. Effects run in a microtask after rendering and should return a cleanup function for subscriptions.

Unlike $: labels, reactivity follows the value wherever it is defined, so shared state modules no longer need stores. Avoid overusing $effect for derived state; use $derived instead, because effects are for side effects and are harder to reason about.