svelte5-runes

What problem does it solve?

Migrating to Svelte 5's new reactivity system (runes) or understanding its core concepts can be challenging. This skill provides expert guidance on $state, $derived, $effect, $props, and $bindable, helping you leverage Svelte 5's power while avoiding common pitfalls and ensuring smooth migration.

Core Features & Use Cases

• Reactive State ($state): Define mutable, deeply reactive variables for dynamic UI updates.
• Computed Values ($derived): Create efficient, auto-updating values based on other state.
• Side Effects ($effect): Manage interactions with the DOM, APIs, or external systems in a controlled manner.
• Component Props ($props, $bindable): Master passing data and implementing two-way binding between components.
• Svelte 4 to 5 Migration: Get clear translation guides and avoid common syntax mixing mistakes.
• Use Case: Convert an existing Svelte 4 component to Svelte 5 runes, ensuring all reactive statements, props, and event handlers are correctly updated for the new syntax.

Quick Start

Show me how to use $state and $derived to create a simple counter with a computed double value. Explain the difference between $derived and $effect.