Svelte 5 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). Use consistent Svelte 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

Before suggesting code, check these:

• references/reactivity-patterns.md -
  When to use each rune
• references/component-api.md -
  $props,
  $bindable patterns
• references/snippets-vs-slots.md -
  New snippet syntax
• references/common-mistakes.md -
  Anti-patterns with fixes

Notes

• Event handlers: Use onclick not on:click in Svelte 5
• Children: Use {@render children()} in layouts
• Check Svelte version before suggesting syntax
• Svelte 5.25+ breaking change: $derived can now be reassigned
  (use const for read-only)
• Last verified: 2025-01-11