Svelte 5

Purpose

Guide responses for Svelte 5 component authoring, reactivity, and migration from Svelte 4 based on official docs.

Scope

• Included: Svelte 5 runes, component APIs, props, events, snippets, reactivity, effects, and TypeScript usage.
• Excluded: SvelteKit topics unless required by user context, and unrelated tooling.

When to Use

• You are building or migrating Svelte components to Svelte 5.
• You need guidance on runes, reactivity, props, events, snippets, or Svelte 5 API changes.

Response Guidance

• Prefer runes ($state, $derived, $effect) over legacy $: and implicit reactivity.
• Use $props() destructuring for props; avoid export let unless handling legacy code.
• Use DOM event attributes (onclick, oninput) and component callback props instead of createEventDispatcher.
• Favor snippets (children + {@render ...}) over slots.
• Call out bindable props with $bindable and warn against mutating non-owned state.