Svelte 5 Has Free Runes That Replace Reactivity — $state, $derived, $effect Are the New Signals

The Svelte 4 Problem

Svelte 4's reactivity was implicit. let count = 0 was reactive. $: doubled = count * 2 was derived. Magic. But when things got complex, the magic broke.

Svelte 5 Runes make reactivity explicit. $state(), $derived(), $effect() — clear, composable, debuggable.

What Svelte 5 Gives You

$state — Reactive State

<script>
  let count = $state(0);
</script>

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

$derived — Computed Values

<script>
  let width = $state(10);
  let height = $state(20);
  let area = $derived(width * height);
</script>

<p>Area: {area}</p>

No dependency arrays. Svelte tracks what area depends on automatically.

$effect — Side Effects

<script>
  let query = $state('');

  $effect(() => {
    // Runs when query changes
    const results = searchAPI(query);
    console.log('Search results:', results);
  });
</script>

$props — Component Props

<script>
  let { name, age = 25 } = $props();
</script>

<p>{name} is {age} years old</p>

Class Fields Are Reactive

<script>
  class Counter {
    count = $state(0);
    doubled = $derived(this.count * 2);

    increment() {
      this.count++;
    }
  }

  const counter = new Counter();
</script>

<button onclick={() => counter.increment()}>
  {counter.count} (doubled: {counter.doubled})
</button>

Fine-Grained Reactivity

<script>
  let todos = $state([
    { text: 'Learn Svelte 5', done: false },
    { text: 'Build app', done: false },
  ]);
</script>

{#each todos as todo}
  <label>
    <input type="checkbox" bind:checked={todo.done} />
    {todo.text}
  </label>
{/each}

Mutate objects directly. Svelte tracks changes at the property level.

Migration

npx sv migrate svelte-5

Automatic migration tool converts Svelte 4 syntax to runes.

Quick Start

npx sv create my-app
cd my-app
npm install
npm run dev

Why This Matters

Svelte 5 runes bring the best of signals (fine-grained, composable) with Svelte's compiler advantage (no runtime overhead). Reactivity that's explicit AND compiled away.

---

Building reactive Svelte dashboards? Check out my web scraping actors on Apify Store — real-time data for your runes. For custom solutions, email [e-mail].