Svelte Cheat Sheet

Updated 2026-05-25

Next Topic: SvelteKit Meta-Framework Cheat Sheet

Svelte is a compile-time reactive UI framework that compiles components into highly optimized, imperative JavaScript at build time—eliminating the need for a virtual DOM. Unlike traditional frameworks like React or Vue, Svelte shifts work from the browser to the compiler, resulting in smaller bundle sizes and faster runtime performance. Svelte 5, released in October 2024, overhauled reactivity with explicit runes ($state, $derived, $effect) that replace magic $: labels and implicit top-level reactivity. Key mental model: state changes are compiled into surgical DOM updates, not runtime diffing, and in Svelte 5 runes mode on:click is replaced by plain onclick event attributes—making Svelte feel closer to writing vanilla HTML and JavaScript while still offering components, stores, transitions, and the full SvelteKit framework.

What This Cheat Sheet Covers

This topic spans 26 focused tables and 197 indexed concepts. Below is a complete table-by-table outline of this topic, spanning foundational concepts through advanced details.

Table 1: Component BasicsTable 2: Svelte 5 Runes (Explicit Reactivity)Table 3: Conditional RenderingTable 4: List RenderingTable 5: Async & PromisesTable 6: Data BindingTable 7: Event HandlingTable 8: Lifecycle HooksTable 9: Stores (Shared State)Table 10: Context APITable 11: TransitionsTable 12: AnimationsTable 13: Component CommunicationTable 14: Actions (DOM Enhancements)Table 15: Special ElementsTable 16: StylingTable 17: Reactivity PatternsTable 18: Component Props & ExportsTable 19: Module ContextTable 20: HTML & Text RenderingTable 21: DebuggingTable 22: Advanced Svelte 5 FeaturesTable 23: SvelteKit BasicsTable 24: SvelteKit Form ActionsTable 25: SvelteKit Navigation & App StateTable 26: SvelteKit Hooks & Error Handling

Table 1: Component Basics

A Svelte component is a .svelte file containing a <script> block, HTML markup, and an optional <style> block. Understanding the difference between Svelte 4's implicit top-level reactivity and Svelte 5's explicit rune syntax is the first decision every Svelte developer must make when starting a new project.

Concept	Example	Description
Component structure	`<script>` `let count = $state(0);` `</script>` `<h1>{count}</h1>`	A `.svelte` file contains `<script>`, markup, and optional `<style>` — all scoped to the component by default.
Reactive variable (Svelte 5)	`let count = $state(0);` `count += 1;`	Use `$state()` in Svelte 5 to declare reactive state — reassignment and mutations trigger DOM updates.
Reactive variable (Svelte 4)	`let count = 0;` `count += 1;`	Top-level `let` declarations are automatically reactive in Svelte 4 legacy mode — reassignment triggers updates.
Props declaration (Svelte 5)	`let { name, age = 18 } = $props();`	Use `$props()` in Svelte 5 to declare props — supports destructuring and default values.
Event handling (Svelte 5)	`<button onclick={() => count++}>` `+1` `</button>`	In runes mode, use plain HTML event attributes (`onclick`, `oninput`, etc.) — no `on:` directive needed.

Table 1: Component Basics

Concept	Example	Description
Component structure	`<script>` `let count = $state(0);` `</script>` `<h1>{count}</h1>`	A `.svelte` file contains `<script>`, markup, and optional `<style>` — all scoped to the component by default.
Reactive variable (Svelte 5)	`let count = $state(0);` `count += 1;`	Use `$state()` in Svelte 5 to declare reactive state — reassignment and mutations trigger DOM updates.
Reactive variable (Svelte 4)	`let count = 0;` `count += 1;`	Top-level `let` declarations are automatically reactive in Svelte 4 legacy mode — reassignment triggers updates.
Props declaration (Svelte 5)	`let { name, age = 18 } = $props();`	Use `$props()` in Svelte 5 to declare props — supports destructuring and default values.
Event handling (Svelte 5)	`<button onclick={() => count++}>` `+1` `</button>`	In runes mode, use plain HTML event attributes (`onclick`, `oninput`, etc.) — no `on:` directive needed.