Svelte
Svelte is a component framework that shifts work from the browser to a compile step. Instead of using a virtual DOM, Svelte compiles components into efficient imperative code that surgically updates the DOM.
§ 1 Definition
Svelte is a free and open-source frontend framework created by Rich Harris that redefines the role of a framework. Unlike React, Vue, or Angular which do most of their work at runtime in the browser (diffing virtual DOM trees, running change detection), Svelte is a compiler that converts components into vanilla JavaScript at build time. This compilation step produces code that directly manipulates the DOM when state changes, eliminating the need for a runtime framework. This results in smaller bundle sizes and faster initial execution. Svelte 5 (released October 2024) introduced runes, a set of compiler-annotated reactive primitives that extend Svelte's reactivity beyond `.svelte` files into plain `.js` and `.ts` files. Svelte has consistently ranked as the most loved and most admired framework in the Stack Overflow Developer Survey.
§ 2 Compile-Time Reactivity
Svelte's defining characteristic is compile-time reactivity. When you write `let count = 0;` and then reference `count` in your template, the Svelte compiler tracks this assignment and generates code that updates the exact DOM nodes affected. There is no virtual DOM diffing, no change detection cycle, no intermediate representation. The assignment `count += 1` compiles directly to something like `count = count + 1; updateNode(element, count);`.
§ 3 Runes (Svelte 5)
Svelte 5 introduced runes: `$state`, `$derived`, `$effect`, and `$props`. These are compiler-annotated symbols that make reactivity explicit and work in any JavaScript file, not just `.svelte` components. `$state` declares a reactive variable, `$derived` creates a computed value, and `$effect` runs side effects when dependencies change. Runes unified Svelte's reactivity model and eliminated the distinction between components and plain modules for reactive logic.
§ 4 Note
§ 5 In code
```svelte
<script>
let count = $state(0);
let doubled = $derived(count * 2);
</script>
<button onclick={() => count++}>
{count} doubled is {doubled}
</button>
```§ 6 Common questions
- Q. Does Svelte use a virtual DOM?
- A. No. Svelte compiles components into imperative JavaScript that updates the DOM directly. This is a fundamental architectural difference from React and Vue.
- Q. What changed in Svelte 5?
- A. Svelte 5 introduced runes ($state, $derived, $effect, $props) which make reactivity explicit and work outside of .svelte files. It also removed the old reactivity syntax based on `let` and `export let`.
- Svelte is a compiler, not a runtime library. It shifts work from browser to build step.
- Svelte 5 runes ($state, $derived, $effect) make reactivity explicit and work in any JS/TS file.
- No virtual DOM means smaller bundles and faster startup time.
Atomic Glue follows the evolving frontend landscape closely. While our core work centers on React and Next.js, we recognize Svelte's advantages for projects where bundle size and performance are the primary constraints. We can evaluate whether Svelte's compiler-based approach serves your project better than a traditional runtime framework.
Get in touchSvelte is a component framework that shifts work from the browser to a compile step. Instead of using a virtual DOM, Svelte compiles components into efficient imperative code that surgically updates the DOM.
Category: Front End (also: Software Engineering, Backend)
Author: Atomic Glue Development Team
## Definition
Svelte is a free and open-source frontend framework created by Rich Harris that redefines the role of a framework. Unlike React, Vue, or Angular which do most of their work at runtime in the browser (diffing virtual DOM trees, running change detection), Svelte is a compiler that converts components into vanilla JavaScript at build time. This compilation step produces code that directly manipulates the DOM when state changes, eliminating the need for a runtime framework. This results in smaller bundle sizes and faster initial execution. Svelte 5 (released October 2024) introduced runes, a set of compiler-annotated reactive primitives that extend Svelte's reactivity beyond `.svelte` files into plain `.js` and `.ts` files. Svelte has consistently ranked as the most loved and most admired framework in the Stack Overflow Developer Survey.
## Compile-Time Reactivity
Svelte's defining characteristic is compile-time reactivity. When you write `let count = 0;` and then reference `count` in your template, the Svelte compiler tracks this assignment and generates code that updates the exact DOM nodes affected. There is no virtual DOM diffing, no change detection cycle, no intermediate representation. The assignment `count += 1` compiles directly to something like `count = count + 1; updateNode(element, count);`.
## Runes (Svelte 5)
Svelte 5 introduced runes: `$state`, `$derived`, `$effect`, and `$props`. These are compiler-annotated symbols that make reactivity explicit and work in any JavaScript file, not just `.svelte` components. `$state` declares a reactive variable, `$derived` creates a computed value, and `$effect` runs side effects when dependencies change. Runes unified Svelte's reactivity model and eliminated the distinction between components and plain modules for reactive logic.
## Note
Common misunderstanding: Svelte is not 'React without the virtual DOM.' The architecture is fundamentally different. React is a runtime library that uses reconciliation; Svelte is a compiler that generates imperative DOM update code. Another misconception: Svelte is only for small projects. The New York Times, Apple Music, Spotify, and 1Password all use Svelte in production at scale.
## In code
## Common questions Q: Does Svelte use a virtual DOM? A: No. Svelte compiles components into imperative JavaScript that updates the DOM directly. This is a fundamental architectural difference from React and Vue. Q: What changed in Svelte 5? A: Svelte 5 introduced runes ($state, $derived, $effect, $props) which make reactivity explicit and work outside of .svelte files. It also removed the old reactivity syntax based on `let` and `export let`.
## Key takeaways
- Svelte is a compiler, not a runtime library. It shifts work from browser to build step.
- Svelte 5 runes ($state, $derived, $effect) make reactivity explicit and work in any JS/TS file.
- No virtual DOM means smaller bundles and faster startup time.
## Related entries
Last updated June 2026. Permalink: atomicglue.co/glossary/svelte