
Svelte 5 Has a Free API You've Never Heard Of
Svelte 5 introduces Runes — a new reactivity system that replaces the old $: syntax with explicit, composable primitives. It's the biggest Svelte update ever, and the new APIs are incredibly powerful. What's New in Svelte 5? Runes — $state, $derived, $effect replace reactive declarations Fine-grained reactivity — only what changed updates Universal reactivity — works in .svelte AND .ts files Snippets — reusable template fragments Event attributes — onclick instead of on:click The Hidden API: Runes <script> // $state — reactive state let count = $state ( 0 ); let todos = $state ([{ text : ' Learn Svelte 5 ' , done : false }]); // $derived — computed values (replaces $:) let doubled = $derived ( count * 2 ); let remaining = $derived ( todos . filter ( t => ! t . done ). length ); // $effect — side effects (replaces $: blocks with side effects) $effect (() => { console . log ( `Count is now ${ count } ` ); document . title = `Count: ${ count } ` ; }); function addTodo ( text ) { todos . p
Continue reading on Dev.to Webdev
Opens in a new tab



