Svelte 5 Runes Have Changed Everything — Here's the Complete Guide to the New Reactivity System

Svelte 5 replaced its compiler magic with runes — explicit reactive primitives that work everywhere, not just in .svelte files. What Are Runes? Runes are Svelte 5's new reactivity system. Instead of the compiler magically making let reactive, you explicitly mark state with $state , effects with $effect , and derived values with $derived . $state — Reactive Variables <script> let count = $state ( 0 ); let user = $state ({ name : ' Alice ' , age : 30 }); let items = $state ([ ' apple ' , ' banana ' ]); </script> <button onclick= { () => count ++ } > Count: { count } </button> <button onclick= { () => user . name = ' Bob ' } > Change name (deep reactivity!) </button> <button onclick= { () => items . push ( ' cherry ' ) } > Add item (array mutations work!) </button> $derived — Computed Values <script> let count = $state ( 0 ); let doubled = $derived ( count * 2 ); let isEven = $derived ( count % 2 === 0 ); // Complex derivations let items = $state ([ 1 , 2 , 3 , 4 , 5 ]); let total = $deri