Svelte Cheat Sheet
Comprehensive Svelte 5 and SvelteKit reference covering runes, reactivity, template syntax, events, bindings, lifecycle, stores, routing, transitions, actions, and context API.
📚 Quick Navigation
Svelte Best Practices
⚡ Use Runes
Prefer $state, $derived, and $effect over legacy reactive declarations for clearer reactivity
🧩 Component Props
Use $props() with destructuring for type-safe, self-documenting component APIs
📦 Snippets Over Slots
Use {#snippet} and {@render} instead of slots for more flexible content composition
🔗 Callback Props
Pass callback functions as props instead of using createEventDispatcher for component events
🗃️ Context for Isolation
Use context API with stores for SSR-safe, component-tree-scoped state management
🧭 Load Functions
Fetch data in SvelteKit load functions, not in onMount, for SSR and better UX
Svelte 5 cheat sheet covering runes, reactivity, components, and SvelteKit patterns
What Is This Svelte 5 Cheat Sheet?
This Svelte 5 cheat sheet is a searchable, quick-reference guide covering every major feature of Svelte 5 and SvelteKit —
from the new runes system ($state, $derived, $effect, $props) to template syntax,
event handling, lifecycle hooks, stores, routing, transitions, animations, actions, and the context API.
Every section includes copy-ready code examples with syntax highlighting. Use the search bar at the top to instantly filter across all sections — ideal for quickly locating the exact pattern you need without scrolling through documentation.
Svelte 5 introduces a fundamentally new reactivity model based on runes — compiler-recognised symbols that replace the Svelte 4 $: reactive declarations, export let props,
and onMount-driven side effects. This reference covers both the new Svelte 5 patterns and their Svelte 4 equivalents where helpful.
How to Use This Cheat Sheet
- 1 Search — type any keyword (e.g. $state, bind, load, transition) into the search bar to instantly filter all matching sections and code snippets.
- 2 Expand sections — click any section header to expand or collapse it. All sections start expanded so you can scroll and scan at a glance.
- 3 Copy code — click the copy icon on any code block to copy the snippet to your clipboard with one click, ready to paste into your project.
- 4 Read the description — each snippet includes a short explanation of what the pattern does and when to use it, so you understand the code, not just copy it.
What This Cheat Sheet Covers
Svelte 5 Runes
All six runes with examples: $state, $derived, $effect, $props, $bindable, and $inspect — plus their Svelte 4 equivalents.
Template Syntax
Svelte's declarative template blocks: {#if}, {#each}, {#await}, {#key}, {#snippet}, and {@render}.
Events & Bindings
Svelte 5 event handler syntax, bind: directives for inputs, checkboxes, groups, dimensions, and the this binding for DOM element references.
SvelteKit Routing
File-based routing conventions, load functions, form actions, $page store, navigation helpers, and layout patterns.
Transitions & Animations
Built-in transitions (fade, slide, fly, scale), custom transitions, the animate: directive for list reordering, and motion tweening.
Stores, Actions & Context
Svelte readable/writable/derived stores, custom store patterns, the use: action directive, and the setContext / getContext API.
Frequently Asked Questions
What is new in Svelte 5 compared to Svelte 4?
Svelte 5 replaces Svelte 4's reactive label syntax ($:), export let props, and slot system with a runes-based API: $state, $derived, $effect, $props, and snippets ({#snippet} / {@render}). The new model is more explicit, easier to understand, and works outside of .svelte files.
What is the difference between $state and $derived?
$state holds mutable reactive data that you can read and write directly. $derived creates a read-only value computed from other reactive values — similar to a computed property in Vue or a selector in Redux. Svelte automatically tracks which reactive values a $derived expression depends on and recomputes it when they change.
When should I use $effect vs onMount?
Use $effect when your side effect depends on reactive state and should re-run whenever that state changes (e.g. updating the document title when a count changes). Use onMount for one-time setup that runs once after the component is mounted, with no reactive dependencies (e.g. initialising a third-party library). In Svelte 5, $effect covers most use cases previously handled by onMount.
What replaced slots in Svelte 5?
Svelte 5 replaces <slot> with snippets. Define reusable template fragments with {#snippet name()} and render them with {@render name()}. Snippets can accept parameters and be passed as props to child components, making them more powerful and composable than slots.
Do Svelte stores still work in Svelte 5?
Yes. Svelte stores (writable, readable, derived) remain fully supported in Svelte 5. The $store auto-subscription shorthand also still works inside .svelte files. For new code, $state and $derived can replace many store patterns, but stores are still the recommended approach for shared global state.
What is the difference between SvelteKit's load and onMount for data fetching?
SvelteKit's load function runs on the server (and client on navigation), enabling SSR and instant data availability without client-side loading spinners. onMount only runs on the client after hydration, causing a loading flash. Always prefer load for initial page data in SvelteKit applications.
Is this cheat sheet suitable for beginners?
Yes, though basic JavaScript knowledge is assumed. Each code snippet includes a description explaining what it does and when to use it. Start with the Svelte 5 Runes and Component Basics sections if you are new to Svelte, then work through template syntax and SvelteKit routing as you build more complex applications.