Svelte 5 Patterns

Quick Guide: Runes make reactivity explicit and portable out of .svelte files. $state for values that change, $derived for everything computed from them, $effect only for reaching outside the component. Snippets replace slots, callback props replace createEventDispatcher, and onclick replaces on:click. The Svelte 4 forms still compile, so nothing flags them.

Detailed Resources:

• examples/core.md — $state, $state.raw, $derived, $props, $bindable, $effect, $effect.pre
• examples/snippets.md — children, named snippets as props, parameters, optional and recursive snippets
• examples/events.md — element events, callback props, forwarding, window events, composing handlers
• examples/advanced.md — $inspect, context, shared state modules, class-based state, $state.snapshot, $state.eager
• reference.md — rune cheat sheet, Svelte 4 → 5 migration table, decision trees, component template

Which path applies

• Inside a .svelte component — every rune is available, props arrive through $props(), and teardown belongs in the function an $effect returns.
• Inside a .svelte.ts or .svelte.js module — $state and $derived work, but a reassigned export does not propagate to importers, because the binding is copied at import. Export an object or a class holding $state fields instead: examples/advanced.md.