Svelte Runes

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

<script>	let count = $state(0); // Mutable state	const doubled = $derived(count * 2); // Computed (const = read-only)
	$effect(() => {		console.log(`Count is ${count}`); // Side effect	});</script>
<button onclick={() => count++}>	{count} (doubled: {doubled})</button>

Reference Files

• reactivity-patterns.md [blocked] - When to use each rune
• migration-gotchas.md [blocked] - Svelte 4→5 translation
• component-api.md [blocked] - $props, $bindable patterns
• snippets-vs-slots.md [blocked] - New snippet syntax
• common-mistakes.md [blocked] - 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
• Use createContext over setContext/getContext for type safety
• Use $inspect.trace to debug reactivity issues
• Last verified: 2026-03-12