
Svelte 5 Runes Has a Free API You're Not Using
Svelte 5 introduced Runes — a new reactivity system that's simpler, more powerful, and works everywhere (not just .svelte files). Most developers are still writing Svelte 4 code. The Free APIs You're Missing 1. $state — Universal Reactive State <script> let count = $state ( 0 ); let user = $state ({ name : " Alice " , age : 30 }); let items = $state ([ " apple " , " banana " ]); // Deep reactivity — mutations trigger updates! function birthday () { user . age += 1 ; // Just mutate — Svelte tracks it } function addItem () { items . push ( " cherry " ); // Array mutations work too! } </script> <button onclick= { () => count ++ } > { count } </button> <p> { user . name } is { user . age } </p> 2. $derived — Computed Values <script> let items = $state ([{ price : 10 , qty : 2 }, { price : 5 , qty : 3 }]); let total = $derived ( items . reduce (( sum , i ) => sum + i . price * i . qty , 0 )); let itemCount = $derived ( items . length ); let expensive = $derived ( items . filter ( i => i . p
Continue reading on Dev.to JavaScript
Opens in a new tab


