
#6Svelte cheat sheet (2025 edition)
Hello {name}!
``` --- ## Reactivity Variables automatically update the UI when they change. ```typescript let a = 1; let b = 2; $: sum = a + b; ``` You can run reactive blocks whenever their dependencies change: ```typescript $: { console.log('Sum changed:', sum); } ``` --- ## Event Handling Svelte handles DOM events directly in templates. ```typescript ``` Event modifiers adjust behavior: ```typescript ``` --- ## Bindings Two-way binding connects input elements to variables: ```typescriptHello {name}
``` ```typescript ``` Access DOM nodes directly with bind:this : ```typescript ``` --- ## Looping Loop over arrays with #each optionally using index and key: ```typescript {#each items as item, i (item.id)}{i + 1}: {item.name}
{/each} ``` Keyed each blocks help Svelte track elements efficiently: ```typescript {#each todos as todo (todo.id)}Welcome!
{:else if loading}Loading...
{:else}Please log in.
{/if} ``` --- ## Components Reuse code by importing and passing props: ```typescript{title}
``` Slots allow injecting custom content: ```typescriptHello inside card!
Body content
Count: {$count}
``` Derived stores compute values from other stores: ```typescript import { derived } from 'svelte/store'; export const double = derived(count, $count => $count * 2); ``` Readable stores with custom updates: ```typescript import { readable } from 'svelte/store'; export const time = readable(new Date(), (set) => { const interval = setInterval(() => set(new Date()), 1000); return () => clearInterval(interval); }); ``` --- ## Style & Classes Class binding for conditional styling: ```typescriptHello
``` Dynamic inline styles: ```typescriptDynamic Style
``` --- ## Lifecycle Hooks Run code at different stages of a component: ```typescript ``` --- ## Transitions & Animations Svelte provides built-in transitions for smooth UI effects: ```typescript {#if visible}Fades in/out
Flies in
{/if} ``` Animate elements when a list changes: ```typescript {#each list as num (num)}A comprehensive guide to Svelte, covering everything from the basics to advanced features like stores, transitions, and lifecycle hooks. Perfect as a reference or learning guide.
Basics
Svelte components combine logic, markup, and scoped styles in a single file. Here's the simplest example:
typescript



