svelte-runes

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. For @attach and other template directives, see the svelte-template-directives skill. - 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 - Use onclick not on:click , {@render children()} in layouts - $derived can be reassigned (5.25+) - use const for read-only - Use createContext over setContext / getContext for type safety - Use $inspect.trace to debug reactivity issues - Last verified: 2026-03-12