Understanding Runes in Svelte 5

Runes are a new way to handle reactivity in Svelte 5, offering developers more control and flexibility in managing state and side effects. This article will provide a comprehensive overview of runes and how to use them effectively in your Svelte applications.

The Philosophy Behind Runes

Svelte has always been about simplifying the development of reactive user interfaces. With runes, Svelte takes this philosophy a step further by making reactivity more explicit and giving developers fine-grained control over how their application responds to changes.

Core Runes

$state

The $state rune is used to declare reactive state variables. Unlike previous versions of Svelte, where reactivity was implicit, $state makes it clear which values are meant to be reactive.

let count = $state(0);

$derived

$derived is used to compute values based on other reactive values. It's similar to computed properties in other frameworks.

let double = $derived(count * 2);

$effect

The $effect rune is used for running side effects when dependencies change. It's similar to the useEffect hook in React, but with automatic dependency tracking.

$effect(() => {
    console.log(`The count is now ${count}`);
  });

Advanced Usage

We'll explore more advanced usage of runes, including:

Combining multiple runes
Using runes with async operations
Optimizing performance with fine-grained reactivity

Stay tuned for deep dives into each of these topics!

Understanding Runes in Svelte 5

Interested in contributing?

Our sponsors:

Upcoming Events

2025/06 - Svelte Society Austria