Svelte 5 Runes: The Future of Reactive JavaScript is Here

Svelte 5 introduces runes, a revolutionary new way to handle reactivity that makes the framework even more intuitive while improving performance.

What Are Runes?

Runes are special functions that replace Svelte's compiler-driven reactivity with explicit declarations:

<script>
  // Svelte 4
  let count = 0;
  $: doubled = count * 2;

  // Svelte 5
  let count = $state(0);
  let doubled = $derived(count * 2);
</script>

Core Runes

• $state: Reactive state declaration
• $derived: Computed values
• $effect: Side effects
• $props: Component props
• $bindable: Two-way binding props

Example Component

<script>
  let { initialCount = 0 } = $props();

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

  $effect(() => {
    console.log(`Count changed to ${count}`);
  });
</script>

<button onclick={() => count++}>
  {count} (doubled: {doubled})
</button>

Migration from Svelte 4

Use the migration tool:

npx svelte-migrate svelte-5

Benefits of Runes

1. More explicit and predictable reactivity
2. Better TypeScript support
3. Easier to understand for newcomers
4. Improved performance through fine-grained updates