Runes in Svelte

Runes

Eliminating dollar sign syntax in Svelte.js. Why? Because reactivity only worked in .svelte components. The fix is to introduce new syntax. I was confused as to what exactly is the change. Fireship breaks it down for us. Let’s use Pareto’s Law to get started with Svelte 5 and runes.

• $state()
• $derived()
• $effect()
• $props()

Let’s look at the code below

<script>
let count = 0;
 
$: doubled = count * 2
$: document.title = `count is ${count}`
</script>

There are multiple things going on with this piece of code. First, the let count = 0 is not an ordinary JavaScript declaration of a count variable. It is actually a reactive variable that updates the DOM when its value changes.¹

Next we have the $: doubled = count * 2 that essentially recalculates the value of doubled (which is another reactive variable) whenever the value of count changes (and not otherwise).

Finally we have an side-effect $: document.title = `count is ${count}` that runs this function whenever the value of count changes.

Nice, now let’s see how Svelte 5 makes it better (or worse).

<script>
let count = $state(0) // reactive value
 
let doubled = $derived(count * 2) // memoized
$effect(() => {
	document.title = `count is ${count}`
})
</script>

This too does the exact same thing. Just draw parallels. But under the hood they are using signals.

The last rune that we need to know is the $props() rune, that allows us to avoid the sussy export let name syntax with something more organic.

<script>
let {myprop1, myprop2} = $props()
</script>

Footnotes

1. We call it compiled reactivity. ↩