svelte-5-runes

Svelte 5 runes replace Svelte 4's reactivity model with explicit functions like $state, $derived, and $effect. Migration involves converting reactive declarations and stores to rune-based patterns while preserving component behavior and type safety.

Svelte 5 runes are functions that declare reactive state ($state), derived values ($derived), side effects ($effect), component props ($props), and two-way binding ($bindable). They form the foundation of Svelte 5's explicit reactivity system, replacing implicit reactivity.

Yes. Svelte 5 runes handle forms and data fetching through $state for reactive form values, $effect for side effects like API calls, and $derived for computed data. The guide includes production-ready templates and patterns for both use cases.

Use $props to declare component inputs with type safety and $bindable to enable two-way binding. The guide covers anti-patterns and best practices for prop management across components.

Svelte 5 provides the $inspect rune for debugging reactive values and tracking state changes. The guide includes debugging tips and techniques to trace reactivity problems in your components.

Yes. The $host rune enables custom element hosting, and $props.id() provides stable component identifiers. Both patterns are documented with production-ready examples in the migration guide.