svelte-5

Svelte 5

This project uses the newer Svelte 5 instead of the more common Svelte 4.

Version 5 comes with an overhauled syntax and reactivity system. While it may look different at first, you'll soon notice many similarities. This guide goes over the changes in detail and shows you how to upgrade. Along with it, we also provide information on why we did these changes.

Reactivity syntax changes

At the heart of Svelte 5 is the new runes API. Runes are basically compiler instructions that inform Svelte about reactivity. Syntactically, runes are functions starting with a dollar-sign.

let → $state

In Svelte 4, a let declaration at the top level of a component was implicitly reactive. In Svelte 5, things are more explicit: a variable is reactive when created using the $state rune. Let's migrate the counter to runes mode by wrapping the counter in $state.

Old, Svelte 4 syntax:

<script>
	let count = 0;
</script>

New, Svelte 5 syntax:

<script>
	let count = $state(0);
</script>

Nothing else changes. count is still the number itself, and you read and write directly to it, without a wrapper like .value or getCount().

$: → $derived/$effect

In Svelte 4, a $: statement at the top level of a component could be used to declare a derivation, i.e. state that is entirely defined through a computation of other state. In Svelte 5, this is achieved using the $derived rune.

Old, Svelte 4 syntax:

<script>
	let count = 0;
	$: double = count * 2;
</script>

New, Svelte 5 syntax:

<script>
	let count = $state(0);
	const double = $derived(count * 2);
</script>

As with $state, nothing else changes. double is still the number itself, and you read it directly, without a wrapper like .value or getDouble().

Sometimes you need to create complex derivations that don't fit inside a short expression. In these cases, you can use $derived.by which accepts a function as its argument.

<script>
	let numbers = $state([1, 2, 3]);
	let total = $derived.by(() => {
		let total = 0;
		for (const n of numbers) {
			total += n;
		}
		return total;
	});
</script>

<button onclick={() => numbers.push(numbers.length + 1)}>
	{numbers.join(' + ')} = {total}
</button>