What is Svelte 5 and what are runes?
Answer
Svelte 5 (released 2024) introduces a new reactivity model called runes — special functions prefixed with $ that the compiler recognizes. Runes replace the implicit reactivity of let, $:, and stores with explicit, portable signals. $state(): declares reactive state: let count = $state(0); — replaces let count = 0 with compiler tracking. $derived(): computed value: let doubled = $derived(count * 2); — replaces $: doubled = count * 2. $effect(): side effects: $effect(() => { console.log(count); }); — replaces $: { console.log(count); }. $props(): declare props: let { name, count = 0 } = $props(); — replaces export let. Runes work in .svelte files and regular .svelte.js/.svelte.ts files, enabling reactive logic outside components. Svelte 4 syntax is still supported.
Previous
What are SvelteKit form actions?
Next
How do you handle forms in SvelteKit with use:enhance?