Svelte 5: Goodbye Stores, Hello Runes

Svelte has always been known for its simplicity and "magical" reactivity. But as applications grew, some of that magic became harder to manage, especially when sharing logic between components. Svelte 5 solves these issues with a groundbreaking new feature: Runes.

What are Runes?

Runes are special symbols that tell the Svelte compiler how to handle reactivity. They replace many of the older patterns like let declarations for state and the $ syntax for derived values.

The Big Three Runes

1. $state

Instead of just let count = 0;, you now use:

javascript
let count = $state(0);

This makes it explicit that count is a reactive variable. The best part? You can use $state inside regular JavaScript files (not just .svelte files), making logic sharing a breeze.

2. $derived

Say goodbye to the confusing $: doubled = count * 2; syntax. Now it's:

javascript
let doubled = $derived(count * 2);

It's clearer, more predictable, and easier to debug.

3. $effect

For side effects, Svelte 5 introduces $effect, which works similarly to React's useEffect but with Svelte's automatic dependency tracking.

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

Why the Change?

You might be wondering: "Why change what wasn't broken?" The truth is, Svelte's previous reactivity system had limits, especially with large objects and arrays. Runes use Fine-Grained Reactivity (via Signals), which means Svelte can update exactly what changed without re-running entire blocks of code.

Farewell to Stores

For years, writable and derived stores were the way to handle global state. While they still work, Runes make them mostly unnecessary. You can now create reactive classes or objects that work everywhere without the subscription boilerplate ($store).

Conclusion

Svelte 5 with Runes is a bold leap forward. It makes the framework more robust for enterprise applications while keeping the "fun" remains. If you're building with Svelte in 2026, Runes are your new best friend.