Svelte 5 Runes explained (for Svelte 4 developers)

Svelte 5 introduces a new feature called "Runes" that changes how Svelte developers manage reactivity. Runes are essentially a way to explicitely say what is reactive, rather than "everything" potentially being reactive in Svelte 4, which leaves it to the compiler to decide.

As Svelte 4 projects grow the compiler doesn't always get it right and things can slow down. In 5, developers explicitly tag variables as changeable - and causing change instead.

Key Features of Runes

1. Explicit Dependencies: Runes allow developers to clearly define which variables depend on others, making the flow of data and updates more explicit.
2. Fine-Grained Reactivity: By using Runes, you can create very specific reactive statements, which can lead to more optimized and efficient updates.
3. Declarative Syntax: Runes use a syntax that is similar to JavaScript, but with special characters and keywords that indicate reactive behavior.

The $state Rune

Wrap the function $state() around the value part of your declaration e.g.:

<script>
    // Wrap your "0" default value with the $state() function call
    let count = $state(0);
</script>

<button on:click={() => count++}>
    clicks: {count}
</button>

In this example, count can be punched out into the HTML in the normal Svelte way.

Annoyingly yes, this is more verbose that Svelte 4 but it scales better since the compiler doesn't have to try to figure out what you want to be reactive.
The real bonus however is arrays and objects are now deeply reactive - no more settings a variable to itself! e.g.
let numbers = $state([1, 2, 3]); is all you need.

The $props Rune

This replaces export let ... in sub-components:

<script>
  // Old
  export let title;
  export let amount = 0;
  // New
  let { title, amount = 0 } = $props();
</script>

$bindable

Annoyingly, to use bind and make the values updateable by the component you have to be explicit inside the component e.g.:

<script>
  let { title, amount = $bindable(0) } = $props();
</script>

---