Reactivity

Three runes cover almost everything: $state for values, $derived for computed values, and $effect for side effects.

$state

Declare reactive state with $state. Read it like a normal variable; assign to it to trigger updates.

svelte

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

<button onclick={() => count++}>clicked {count} times</button>

$derived

$derived computes a value from other state. It re-runs only when its inputs change.

svelte

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

<p>{count} doubled is {doubled}</p>

$effect

$effect runs code *after* the DOM updates — use it for things like logging, timers, or talking to a non-Svelte library. Prefer $derived for computing values.

svelte

<script>
  let count = $state(0);
  $effect(() => {
    console.log('count is now', count);
  });
</script>