Svelte Cheat Sheet
Quick reference for Svelte framework. Reactivity, components, bindings, events, stores, and lifecycle — all in one page.
Reactivity
| let count = 0; | Reactive variable (auto-tracks changes) |
| $: doubled = count * 2; | Reactive declaration (recomputes on change) |
| $: console.log(count); | Reactive statement (runs on change) |
| $: if (count > 10) alert("High!"); | Reactive if statement |
| $: { total = price * qty; tax = total * 0.1; } | Reactive block with multiple statements |
| let items = []; items = [...items, newItem]; | Trigger reactivity on array (reassign) |
| let obj = {}; obj = { ...obj, key: val }; | Trigger reactivity on object (reassign) |
Template Syntax
| {expression} | Interpolate JavaScript expression |
| {@html rawHtml} | Render raw HTML (caution: XSS risk) |
| {#if condition}...{:else if other}...{:else}...{/if} | Conditional rendering |
| {#each items as item, index (item.id)}...{/each} | List rendering with key |
| {#each items as item}{:else}No items{/each} | List with empty state fallback |
| {#await promise}Loading...{:then data}{data}{:catch err}{err}{/await} | Async data rendering |
| {#key value}...{/key} | Destroy and recreate content when value changes |
Events & Bindings
| on:click={handler} | DOM event listener |
| on:click|preventDefault={handler} | Event modifier (also stopPropagation, once, self) |
| on:click={() => count++} | Inline event handler |
| bind:value={name} | Two-way binding on input value |
| bind:checked={isActive} | Bind checkbox state |
| bind:group={selectedOption} | Bind radio/checkbox group |
| bind:this={element} | Reference to DOM element |
| class:active={isActive} | Conditional CSS class |
Stores
| import { writable } from "svelte/store"; | Import writable store |
| const count = writable(0); | Create writable store with initial value |
| count.set(5); | Set store value |
| count.update(n => n + 1); | Update store value with function |
| $count | Auto-subscribe in component ($ prefix) |
| const double = derived(count, $c => $c * 2); | Derived (computed) store |
| const data = readable(0, (set) => { ... }); | Read-only store with setter |
Lifecycle
| import { onMount } from "svelte"; | Import lifecycle function |
| onMount(() => { /* runs after first render */ }); | Run code after component mounts |
| onMount(() => { return () => cleanup(); }); | Return cleanup function from onMount |
| onDestroy(() => { /* cleanup */ }); | Run code before component is destroyed |
| beforeUpdate(() => { ... }); | Run before DOM updates |
| afterUpdate(() => { ... }); | Run after DOM updates |
| tick().then(() => { ... }); | Wait for pending DOM updates to apply |
Component Communication
| export let propName; | Declare a component prop |
| export let propName = "default"; | Prop with default value |
| <Child propName={value} /> | Pass prop to child component |
| <Child {...obj} /> | Spread props from object |
| <Child on:message={handler} /> | Listen to child event |
| import { createEventDispatcher } from "svelte"; dispatch("message", data); | Dispatch event from child |
| <slot /> | Default slot for child content |
| <slot name="header">Fallback</slot> | Named slot with fallback |
Step-by-Step Guide
Read Guide →