Svelte Cheatsheet - Svelte Framework Reference

Essential Svelte compiled frontend framework syntax from reactivity to component communication, Store to animations. Organized by category, copy directly when coding.

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

Back to Web Services

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