🪄 Runes System
Runes are the new reactive primitives in Svelte 5. They replace the old reactive statements and provide more explicit control.
💎 $state Rune
Creates reactive state that triggers UI updates when changed.
count = 0
User Object (deeply reactive):
John is 30 years old
Items Array (3 items):
AppleBananaCherry
⚡ $derived Rune
Creates computed values that automatically update when dependencies change.
Simple derived values:
doubled = 0
isEven = true
Complex derived with $derived.by():
expensiveResult = 0.00
Check console for computation logs
String interpolation derived:
John is 30 years old
📝 Code Examples
$state usage:
let count = $state(0);
let user = $state({ name: 'John', age: 30 });
let items = $state(['Apple', 'Banana']);$derived usage:
let doubled = $derived(count * 2);
let isEven = $derived(count % 2 === 0);
let complex = $derived.by(() => {
return heavyComputation();
});