Svelte
A frontend framework that compiles components down to plain JavaScript at build time. Smaller bundles, less runtime weight, beloved by developers.
Mindmap
The plain-English version
Svelte is a frontend framework where the magic happens at build time, not at runtime. There's no virtual DOM; the compiler generates direct DOM manipulation code from your components. The result is smaller bundle sizes and excellent performance. SvelteKit is the meta-framework on top, equivalent to what Next.js is for React.
The problem it solves
Svelte's pitch: write less code, ship less code. The syntax is closer to plain HTML/CSS/JS, the reactivity is built-in (assigning to a variable updates the UI), and the bundle is small. Adoption is real but smaller than React's. AI agents are competent at it, especially the latest models — but you'll need more handholding than for React.
Alternatives
| Alternative | Type | When it wins |
|---|---|---|
| React | library | The dominant JavaScript library for building component-based user interfaces. The thing your AI agent reaches for unless you tell it not to. |
| Next.js | meta-framework | The React meta-framework. Pages, routing, server-rendering, API routes, image optimization — the things you'd otherwise wire up yourself, bundled in. |
Deep links
The words you'll hear
.sveltefile- A single-file component:
<script>,<style>, and markup all in one. - Stores
- Svelte's reactive state mechanism.
writable,readable,derived. - $:
- Reactive statement.
$: doubled = count * 2updates whenevercountdoes. - SvelteKit
- The meta-framework. Routing, SSR, endpoints — Next.js for Svelte.
- Runes (Svelte 5)
- New reactivity primitives (
$state,$derived,$effect) replacing implicit reactivity.