svelte-runes

Svelte 5 reactive state uses the `$state` rune to declare reactive variables. You initialize values using `$state` in your script block, which automatically tracks dependencies and updates the DOM when the value changes.

Migrating Svelte 4 reactive variables to Svelte 5 involves replacing `let` declarations with `$state` runes, computed properties with `$derived`, and reactive statements (`$:`) with `$effect` blocks.

Use `$derived` in Svelte 5 to compute values from other reactive state, ensuring efficient updates. Use `$effect` only for side effects like manual DOM manipulations or data fetching that need to run after the DOM updates.

Svelte 5 component props are managed using the `$props` rune. You can mark specific props as bindable using the `$bindable` function to allow two-way data binding between parent and child components.

Svelte 5 reactivity issues often stem from mutating arrays or objects without reassignment, or misusing runes. Ensure you follow best practices by using `$state` correctly and leveraging `$derived` for computed values.

Svelte 5 runes require the Svelte compiler to process reactivity. You must use them within `.svelte` components or `.svelte.js`/`.svelte.ts` modules to ensure the compiler correctly transforms the reactivity patterns.