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's reactivity is built directly into the language through reactive assignments, labeled statements, and—in Svelte 5—runes that provide explicit, signal-based reactivity. Key mental model: state changes are compiled into surgical DOM updates, not runtime diffing. This makes Svelte feel closer to writing vanilla JavaScript while still offering full framework conveniences like components, stores, and transitions.
What This Cheat Sheet Covers
This topic spans 23 focused tables and 127 indexed concepts. Below is a complete table-by-table outline of this topic, spanning foundational concepts through advanced details.
Table 1: Component Basics
| Concept | Example | Description |
|---|---|---|
<script> let count = 0;</script><h1>{count}</h1> | A .svelte file contains <script>, markup, and optional <style> — all scoped to the component by default. | |
let count = 0;count += 1; | Top-level let declarations are automatically reactive in Svelte 4 — reassignment triggers DOM updates. | |
let { name, age = 18 } = $props(); | • Use $props() in Svelte 5 to declare props• supports destructuring and default values. | |
$: doubled = count * 2; | Prefix with $: to create a reactive declaration that reruns whenever dependencies change. |