Svelte Syntax

Svelte 5 template syntax and runes.

Runes

$state(0): Reactive state
$derived(expr): Computed value
$derived.by(() => ...): Computed with a function
$effect(() => {}): Side effect
$props(): Component props
$bindable(d): Two-way bindable prop

Template

{#if cond}…{/if}: Conditional
{#each list as item, i}…{/each}: Loop
{#await promise}…{:then v}…{/await}: Await
{#key value}…{/key}: Re-create on change
{@render snippet()}: Render a snippet
{#snippet row(x)}…{/snippet}: Define a snippet

Bindings & events

bind:value={x}: Two-way bind
onclick={fn}: DOM event
use:action: Use an action
class:active={cond}: Toggle a class