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

<script lang="ts">
  let user = $state({ name: 'Alex', score: 10 });
</script>
<button onclick={() => user.score++}>
  Score: {user.score}
</button>

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

<script lang="ts">
  let dataset = $state.raw([{ id: 1, val: 'A' }]);
  function replaceAll() {
    dataset = [{ id: 2, val: 'B' }];
  }
</script>

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

<script lang="ts">
  let count = $state(5);
  let double = $derived(count * 2);
  let isEven = $derived(count % 2 === 0);
</script>
<p>{count} x 2 = {double} ({isEven ? 'Even' : 'Odd'})</p>

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

<script lang="ts">
  let items = $state([10, 25, 40]);
  let totalWithTax = $derived.by(() => {
    const sum = items.reduce((acc, curr) => acc + curr, 0);
    return sum * 1.2;
  });
</script>

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

<script lang="ts">
  interface Props {
    title: string;
    variant?: 'primary' | 'secondary';
  }
  let { title, variant = 'primary' }: Props = $props();
</script>
<span class={variant}>{title}</span>

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

<script lang="ts">
  // Child Component
  let { value = $bindable('') }: { value?: string } = $props();
</script>
<input bind:value={value} />

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

<script lang="ts">
  let query = $state('');
  $effect(() => {
    console.log('Search query changed:', query);
    return () => console.log('Cleanup before re-run');
  });
</script>

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

<script lang="ts">
  let messages = $state<string[]>([]);
  let listEl: HTMLElement;
  $effect.pre(() => {
    const isAtBottom = listEl?.scrollHeight - listEl?.scrollTop === listEl?.clientHeight;
  });
</script>

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

<script lang="ts">
  let count = $state(0);
  $inspect(count);
</script>

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

<script lang="ts">
  import { untrack } from 'svelte';
  let a = $state(0);
  let b = $state(0);
  $effect(() => {
    console.log('A changed to:', a);
    console.log('Current snapshot of B:', untrack(() => b));
  });
</script>

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