Svelte Runes Quick Start
Which rune? Props: $props() | Bindable: $bindable() | Computed: $derived() | Side effect: $effect() | State: $state()
Key rules: Runes are top-level only. $derived can be overridden (use const for read-only). Don't mix Svelte 4/5 syntax. Objects/arrays are deeply reactive by default.
Example
Reference Files reactivity-patterns.md - When to use each rune migration-gotchas.md - Svelte 4→5 translation component-api.md - $props, $bindable patterns snippets-vs-slots.md - New snippet syntax common-mistakes.md - Anti-patterns with fixes
For @attach and other template directives, see the svelte-template-directives skill.
Notes Use onclick not on:click, {@render children()} in layouts $derived can be reassigned (5.25+) - use const for read-only Last verified: 2025-01-11