Building with Svelte 5

Svelte 5 dropped and it’s a game-changer. The new runes system completely reimagines how we think about reactivity.

The Old Way

In Svelte 4, reactivity was implicit. Declare a variable with let, and it’s reactive:

let count = 0;
// This just works ✨

Simple, but sometimes magical in ways that confused newcomers.

Enter Runes

Svelte 5 introduces explicit reactivity with runes:

let count = $state(0);
let doubled = $derived(count * 2);

$effect(() => {
  console.log('Count changed:', count);
});

Why I Love It

1. Clarity — You know exactly what’s reactive
2. Portability — Runes work in .svelte.ts files too
3. Performance — Fine-grained reactivity by default
4. TypeScript — Better inference and tooling

The Learning Curve

It took me about a day to get comfortable with runes. The mental model shift is:

• $state() = reactive variable
• $derived() = computed value
• $effect() = side effect
• $props() = component props

Once it clicks, it feels natural.

Migration

Svelte 5 is backward compatible. Your Svelte 4 code still works. You can migrate gradually, file by file.

---

If you haven’t tried Svelte 5 yet, now’s the time. The DX is incredible.