svelte-runes

Migrate Svelte 4 components to runes by replacing reactive declarations with $state for mutable state, $derived for computed values, and $effect for side effects. This ensures deep reactivity is preserved and components follow Svelte 5's explicit binding model, reducing common pitfalls during the transition.

$state creates mutable reactive state, $derived computes values that update when dependencies change, and $effect runs side effects when state changes. Understanding these rune semantics prevents misuse and ensures your component reactivity works correctly in Svelte 5.

$bindable enables explicit two-way binding between parent and child components in Svelte 5, replacing implicit reactive prop binding. Use it when a child needs to update a parent's state, making data flow transparent and preventing unexpected mutations.

Svelte 5 runes preserve deep reactivity by automatically tracking nested object and array mutations through $state and $derived. Structure your state declarations at the top level and use $derived for computed values to maintain reactivity across your component's entire state tree.

$attach lifecycle references DOM nodes during component initialization, replacing traditional ref patterns. Use it alongside $state and $effect to manage DOM interactions and attach event listeners while maintaining clean reactivity semantics.

Avoid forgetting to declare top-level rune discipline, mixing reactive declarations with runes inconsistently, and breaking deep reactivity by reassigning entire objects instead of mutating properties. Follow migration guides to catch these patterns before they cause unexpected behavior.