A New Era of Reactivity

Svelte 5 introduces Runes, a powerful new way to handle reactivity. This page is enhanced with AI to provide simple explanations.

The Foundation: `$state`

The $state rune is the base of the new reactivity system. It's how you declare a piece of reactive state. Any time you assign a new value to a $state variable, Svelte will know to update any parts of your app that depend on it. 

// App.svelte

// no need to import in svelte 5

let count = $state(0);

function increment() {
    count++;
}

Calculating Values: `$derived`

Often, you have values that depend on other state. In Svelte 4 you'd use $: doubled = count * 2. In Svelte 5, you use the $derived rune. It creates a new reactive value that re-calculates whenever its dependencies change. 

//App.svelte
let count = $state(0);
let doubled = $derived(count * 2);

Running Side Effects: `$effect`

The $effect rune is the replacement for the reactive $: statement when you need to run code in response to a state change, but not to create a new value. This is perfect for things like logging or interacting with the DOM (Document Object Model = HTML tree with nodes). 

//App.svelte
let count = $state(0);

$effect(() => {
    // This code runs whenever 'count' increments
    console.log(`The new count is ${count}`);
    document.title = `Count is ${count}`;
});

Frequently Asked Questions