Svelte Reference

let count = $state(0)

Declare reactive state. The compiler tracks reads and writes and updates the DOM automatically.

let items = $state.raw([])

Declare state that is never made deeply reactive. Ideal for large read-only arrays or objects.

let doubled = $derived(count * 2)

Derived value that recalculates whenever its reactive dependencies change.

let result = $derived.by(() => expr)

Derived value using a function body — useful when the derivation needs multiple statements.

$effect(() => { /* side effect */ })

Run a side effect whenever its reactive dependencies change. Auto-cleans up on destroy.

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

Like $effect but runs before the DOM is updated. Useful for reading layout before a repaint.

let { name, age = 25 } = $props()

Declare component props with optional defaults. Replaces export let.

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

Mark a prop as bindable so the parent can use bind:value on it.

$inspect(value)

Debug helper that logs whenever the tracked value changes. Stripped in production builds.

$host()

Access the host custom element node inside a Svelte component compiled as a custom element.

import { untrack } from 'svelte'

Read reactive state without creating a dependency — the surrounding effect will not re-run.

import { unstate } from 'svelte'

Get a plain snapshot of a reactive proxy. Useful for serialisation or logging.

import { tick } from 'svelte'

Returns a promise that resolves after pending state changes have been applied to the DOM.

import { flushSync } from 'svelte'

Synchronously flush all pending reactive updates — forces immediate DOM reconciliation.

import { createRawSnippet } from 'svelte'

Create a snippet from raw HTML — useful for server-side rendering or dynamic content injection.

import { mount } from 'svelte'

Imperatively mount a Svelte component into a target DOM element.

<script> ... </script> + markup

A .svelte file is a component. Script block for logic, markup below, optional style block.

{#snippet name(params)}...{/snippet}

Reusable markup block within a component. Passed as props or used locally.

{@render snippetName(args)}

Render a snippet. Replaces the slot mechanism from Svelte 4.

<input bind:value={variable} />

Two-way binding between a form element and a reactive variable.

<div bind:this={element}></div>

Get a reference to a DOM element after it is mounted.

onclick={(e) => handler(e)}

In Svelte 5 use native event attributes. The on: directive is Svelte 4 legacy.

{#if cond}...{:else if cond}...{:else}...{/if}

Conditional rendering — only the matching branch is in the DOM.

{#each list as item, i (key)}...{/each}

Iterate over an array. Use a keyed expression for efficient updates.

{#await promise}...{:then val}...{:catch err}...{/await}

Handle promise states declaratively in the template.

{#key expr}...{/key}

Destroy and recreate contents whenever the expression changes.

{@html rawHtml}

Render raw HTML. Warning: XSS risk — only use with trusted content.

{@const variable = expression}

Declare a local constant inside a template block.

{@debug var1, var2}

Trigger a debugger breakpoint whenever the listed variables change.

class:name={condition}

Conditionally toggle a CSS class on an element.

style:property={value}

Set a single CSS property dynamically.

import { writable } from 'svelte/store'

Create a writable store — subscribers are notified on .set() or .update().

import { readable } from 'svelte/store'

Create a read-only store whose value is set by an internal start function.

import { derived } from 'svelte/store'

Create a store derived from one or more other stores.

import { get } from 'svelte/store'

Synchronously read a store value without subscribing.

$storeName

Auto-subscribe to a store in .svelte files using the $ prefix. Unsubscribes on destroy.

src/routes/[path]/+page.svelte

The page component rendered for a given route.

export async function load({ params, fetch })

Load function that fetches data for the page. .server.ts runs on the server only.

src/routes/+layout.svelte

Shared layout wrapper — persists across child route navigations.

export function GET({ params }) { }

API endpoint handler. Export GET, POST, PUT, DELETE, PATCH functions.

src/routes/+error.svelte

Custom error page rendered when a load function throws or returns an error.

import { goto } from '$app/navigation'

Programmatic navigation to another route.

<div use:myAction={params}></div>

Attach an action (lifecycle function) to a DOM element for imperative logic.

transition:fn={params}

Apply an enter + exit transition to an element when it is added/removed from the DOM.

in:fn out:fn

Separate enter and exit transitions for different effects.

animate:flip={{ duration: 300 }}

Animate element position changes inside an each block using the FLIP technique.

import { onMount } from 'svelte'

Run code after the component is first rendered to the DOM.

import { onDestroy } from 'svelte'

Run cleanup code when the component is destroyed.

import { setContext, getContext } from 'svelte'

Share data down the component tree without props — Svelte equivalent of dependency injection.

import { createEventDispatcher } from 'svelte'

Create a dispatcher for custom component events (Svelte 4 pattern, still supported).