Reactivity in Svelte

Master reactive state management with $state, $derived, and $effect

🔢

Independent Counter Components

Each counter maintains its own reactive state using $state:

Derived Reactivity

The $derived rune automatically recalculates when dependencies change:

1 + 2 + 3 + 4 = 10

🖱️

Event Reactivity

Move your mouse over the area below to see reactive updates in real-time:

COORDINATES

0 × 0

⏱️

Side Effects with $effect

The $effect rune runs code when dependencies change and handles cleanup:

ELAPSED TIME

0s

Interval: 1000ms