Svelte 5 API Quick Reference

Svelte 5 Runes Cheatsheet

Dense interactive reference for state primitives, component boundary interfaces, and side-effect runes.

Showing 10 of 10 items

$state

Runes

Declares fine-grained reactive state. Mutating properties on objects or arrays triggers targeted updates.

let count = $state(0);

$state Usage

✨ Svelte 5 (Runes)

Pro Tip: Deeply reactive proxy by default. Replaces Svelte 3/4 `let x = 0;` and writable stores.

$state.raw

Runes

Declares shallow reactive state. Variable is reactive, inner properties are not proxied.

let data = $state.raw(largeObject);

$state.raw Usage

✨ Svelte 5 (Runes)

Pro Tip: Optimized for large immutable datasets, third-party library instances, or canvas objects.

$derived

Runes

Computes derived state automatically when referenced reactive signals change.

let double = $derived(count * 2);

$derived Usage

✨ Svelte 5 (Runes)

Pro Tip: Replaces Svelte 3/4 `$:` reactive declarations. Derived values are pure and read-only.

$derived.by

Runes

Computes complex derived state using a multi-line closure function.

let total = $derived.by(() => { ... return val; });

$derived.by Usage

✨ Svelte 5 (Runes)

Pro Tip: Use when derivation requires loops, branch conditionals, or temporary local variables.

$props

Props & Binding

Declares component input props with optional default values and rest properties.

let { title, count = 0 } = $props();

$props Usage

✨ Svelte 5 (Runes)

Pro Tip: Replaces `export let prop = ...`. Destructured variables retain reactivity automatically.

$bindable

Props & Binding

Marks a prop as eligible for two-way binding using `bind:prop`.

let { value = $bindable() } = $props();

$bindable Usage

✨ Svelte 5 (Runes)

Pro Tip: Parents can bind via `<Child bind:value={myVar} />` or pass a standard one-way prop.

$effect

Effects & Utilities

Runs side effects when read reactive signals update. Executes post-DOM render.

$effect(() => { ... return () => cleanup(); });

$effect Usage

✨ Svelte 5 (Runes)

Pro Tip: Replaces `onMount`, `afterUpdate`, and `$:` side effects. Automatically tracks dependencies.

$effect.pre

Effects & Utilities

Runs side effects BEFORE the DOM updates.

$effect.pre(() => { ... });

$effect.pre Usage

✨ Svelte 5 (Runes)

Pro Tip: Ideal for scroll positioning synchronization or DOM measurements prior to paint.

$inspect

Effects & Utilities

Console-logs reactive signal changes in development builds. Stripped in production.

$inspect(count, user).with(console.trace);

$inspect Usage

✨ Svelte 5 (Runes)

Pro Tip: Development debugging rune. Attach `.with(fn)` to pipe inspection into custom loggers.

untrack()

Effects & Utilities

Reads reactive signals inside `$effect` or `$derived` without creating a tracking dependency.

import { untrack } from "svelte";

untrack() Usage

✨ Svelte 5 (Runes)

Pro Tip: Prevents infinite effect loops when reading auxiliary state values inside side effects.