Svelte Cheatsheet - Svelte Framework Reference

For frontend developers who want less boilerplate and a minimal runtime. Svelte compiles reactivity directly into native DOM updates at build time, so the runtime is tiny and there is no virtual-DOM mental model; but it lives on assignment-driven updates, $: recomputation, and Store subscriptions that take getting used to. By the end you can declare reactive state with let and $:, communicate between components via events and dispatch, share cross-component state with Store, and hook into lifecycle and transitions.

Web Services·50 commands·Last updated 2026-07-21

Template Syntax 6

{ expression }

Insert JavaScript expression in template

{@html rawHtmlString}

Render raw HTML (beware of XSS)

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

Conditional rendering

{#each items as item, index}...{/each}

Iterate over arrays

{#await promise}...{:then value}...{:catch error}...{/await}

Handle async Promise states

{#key expression}...{/key}

Destroy and recreate content when expression changes

Reactive Declarations 5

let count = 0;

Declare a variable, assignment triggers view update

$: doubled = count * 2;

Reactive declaration, auto-recalculates on dependency changes

$: { console.log(count); }

Reactive statement block, executes when dependencies change

arr = [...arr, newItem];

Array update: assign new reference to trigger reactivity

obj = { ...obj, key: value };

Object update: assign new reference to trigger reactivity

Components & Props 7

export let name;

Declare a component prop

export let name = "default";

Prop with default value

$$props

Access all passed props

$$restProps

Access undeclared remaining props

<slot />

Default slot for child content

<slot name="header" />

Named slot

<slot let:item={item} />

Scoped slot, passing data to parent

Events & Bindings 7

<button on:click={handler}>

Bind DOM event

<form on:submit|preventDefault={handler}>

Event modifiers (preventDefault/stopPropagation)

import { createEventDispatcher } from "svelte"; const dispatch = createEventDispatcher(); dispatch("event", data);

Dispatch custom events from child to parent

<input bind:value={name}>

Two-way binding of input value

<input bind:this={inputEl}>

Bind DOM element reference

<input type="checkbox" bind:group={selected}>

Checkbox group binding to array

<input type="radio" bind:group={choice}>

Radio group binding

Lifecycle 6

import { onMount } from "svelte"; onMount(() => { ... });

Execute after component mounts (good for API calls)

import { beforeUpdate } from "svelte"; beforeUpdate(() => { ... });

Execute before DOM update

import { afterUpdate } from "svelte"; afterUpdate(() => { ... });

Execute after DOM update

import { onDestroy } from "svelte"; onDestroy(() => { ... });

Execute before component unmounts (cleanup timers/subscriptions)

import { tick } from "svelte"; await tick();

Wait for DOM to finish updating, get updated DOM state

import { untrack } from "svelte"; untrack(() => { ... });

Temporarily stop dependency tracking in reactive declarations

Store 7

import { writable } from "svelte/store"; export const count = writable(0);

Create a writable store

import { readable } from "svelte/store"; export const time = readable(new Date(), (set) => { ... });

Create a readable store (with initial value and set function)

import { derived } from "svelte/store"; export const doubled = derived(count, ($c) => $c * 2);

Create a derived store that depends on other stores

$count

Auto-subscribe and unsubscribe in components

count.set(10);

Directly set a store value

count.update(n => n + 1);

Update store value based on current value

import { get } from "svelte/store"; const val = get(count);

Get store value outside component context

Actions & Transitions 7

use:action={{ param }}

Custom action to manipulate DOM elements

transition:fade

Fade in/out transition

transition:slide

Slide expand/collapse transition

transition:scale

Scale transition

in:fly={{ x: 200, duration: 500 }}

Enter animation (fly in)

out:fly={{ x: -200 }}

Leave animation (fly out)

animate:flip

Animate list item position changes (FLIP)

Advanced Features 5

import { setContext, getContext } from "svelte"; setContext("key", value); const val = getContext("key");

Cross-level component communication (Context API)

import { hasContext } from "svelte"; hasContext("key");

Check if a context key exists

<script context="module">...</script>

Module-level script, runs once per component definition

export const greet = (name) => `Hello ${name}`;

Export functions from module script for external use

svelte:options

Compiler options, e.g. <svelte:options immutable={true} />

Tips

Svelte is a compiled framework with no runtime, producing minimal code
Reactivity is triggered by assignment; arrays and objects need new assignments
$: reactive declarations track any dependency changes
Store manages state outside components, $store syntax auto-subscribes
Svelte 5 introduces Runes ($state/$derived/$effect) new reactivity system

Official References

Each command links to its official documentation below, so you can verify the latest usage and read deeper.

MDN Web Docs

Maintained by LaoHand

Publicly updated on Jul 21, 2026, continuously proofread against official docs.

Contact Us

Wrong command or description? Send us corrections, business inquiries or product feedback by email.