Svelte 5 Runes — A Complete Guide

What Are Runes?

Runes are special compiler signals in Svelte 5 that replace the old reactivity model. Instead of let variables being reactive by default, you now opt-in to reactivity explicitly.

$state

Declare reactive state:

<script lang="ts">
  let count = $state(0);
  let user = $state({ name: 'Ahmad', age: 25 });
</script>

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

$derived

Compute values that automatically update:

<script lang="ts">
  let count = $state(0);
  let doubled = $derived(count * 2);
  let isEven = $derived(count % 2 === 0);
</script>

$effect

Run side effects when state changes:

<script lang="ts">
  let count = $state(0);

  $effect(() => {
    document.title = `Count: ${count}`;
  });
</script>

$props

Declare component props:

<script lang="ts">
  interface Props {
    name: string;
    age?: number;
    onclick?: () => void;
  }

  let { name, age = 18, onclick }: Props = $props();
</script>

$bindable

Allow a prop to be two-way bound:

<script lang="ts">
  let { value = $bindable('') } = $props();
</script>

<input bind:value />

Reactive Classes

You can now use classes with reactive state:

<script lang="ts">
  class Counter {
    count = $state(0);

    increment() { this.count++; }
    reset() { this.count = 0; }
  }

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

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

Conclusion

Svelte 5 runes make reactivity explicit, composable, and predictable. They work in .svelte files, .svelte.ts files, and even plain JavaScript classes — giving you reactivity anywhere you need it.