Svelte 5 Syntax
Always use Svelte 5 runes. Never use Svelte 4 patterns.
Svelte 4 → Svelte 5
Svelte 4 ❌ Svelte 5 ✅
export let foo
let { foo } = $props()
export let foo = 'default'
let { foo = 'default' } = $props()
$: doubled = x * 2
let doubled = $derived(x * 2)
$: { sideEffect() }
$effect(() => { sideEffect() })
on:click={handler}
onclick={handler}
on:input={handler}
oninput={handler}
on:click|preventDefault={h}
onclick={e => { e.preventDefault(); h(e) }}
<slot />
{@render children()}
<slot name="x" />
{@render x?.()}
$$props
Use $props() with rest: let { ...rest } = $props()
$$restProps
let { known, ...rest } = $props()
createEventDispatcher()
Pass callback props: let { onchange } = $props()
Stores → Runes
Svelte 4 ❌ Svelte 5 ✅
import { writable } from 'svelte/store'
Remove import
const count = writable(0)
let count = $state(0)
$count (auto-subscribe) count (direct access)
count.set(1)
count = 1
count.update(n => n + 1)
count += 1
Quick Reference
<script> // Props (with defaults and rest) let { required, optional = 'default', ...rest } = $props();
// Two-way bindable prop let { value = $bindable() } = $props();
// Reactive state let count = $state(0); let items = $state([]); // arrays are deeply reactive let user = $state({ name: '' }); // objects too
// Derived values let doubled = $derived(count * 2); let complex = $derived.by(() => { // multi-line logic here return expensiveCalc(count); });
// Side effects $effect(() => { console.log(count); return () => cleanup(); // optional cleanup }); </script>
<!-- Events: native names, no colon --> <button onclick={() => count++}>Click</button> <input oninput={e => value = e.target.value} />
<!-- Render snippets (replaces slots) --> {@render children?.()}
Snippets (Replace Slots)
<!-- Parent passes snippets --> <Dialog> {#snippet header()} <h1>Title</h1> {/snippet}
{#snippet footer(close)} <button onclick={close}>Done</button> {/snippet} </Dialog>
<!-- Child renders them --> <script> let { header, footer, children } = $props(); </script> {@render header?.()} {@render children?.()} {@render footer?.(() => open = false)}
References
Load these when needed:
-
references/typescript.md — Typing props, state, derived, snippets, events, context
-
references/patterns.md — Context API, controlled inputs, forwarding props, async data, debouncing
-
references/gotchas.md — Reactivity edge cases, effect pitfalls, binding quirks