←Back

Introducing runes

Despite it’s name: Runes is a newer Svelte syntax with several updates;

“Runes are symbols that influence the Svelte compiler. Whereas Svelte today uses let, =, the export keyword and the $: label to mean specific things, runes use function syntax to achieve the same things and more.”

NOTE: You are either using runes or not can’t use both syntaxes simultaneously in one Svelte file (but you can use both in one project..);

Which am I using?

At the top of your svelte file it will say either

Or 

Legacy mode is the older version, runes mode is newer. I didn’t realize this at first.. so I used both depending on which tutorial I used / which examples I found (:

Runes mode;

E.g., runes adds $state( ) declaration to declare which variables are reactive, so it’s easier to keep track and not every single variable is reactive.

Includes derived and effect, so that not only the variables inside $: ….. are ‘watched’, but also the variables underlying them

When importing variables like this:

    let { mix, measures } = $props();

you’re using runes mode

when importing like this