A radical idea: do the work at compile time. Svelte compiles your components into tiny vanilla-JS that touches the DOM directly — no virtual DOM, smallest bundles, fastest runtime.
← Back to Client Side.svelte file and emits surgical DOM update code — no framework runtime to download.$state, $derived, $effect).<script>, markup, and scoped <style>.<script> let products = $state([]); let loading = $state(true); $effect(async () => { const res = await fetch('/api/products'); products = await res.json(); loading = false; }); </script> {#if loading} <p>Loading…</p> {:else} <ul> {#each products as p (p.id)} <li>{p.name} — \${p.price}</li> {/each} </ul> {/if} <style> ul { padding-left: 1.5rem; } </style>
React/Vue ship a runtime that interprets your components in the browser. Svelte ships your component, compiled to direct DOM manipulation. Result: smaller bundles, faster updates, lower memory — all without giving up an ergonomic API.
$state — reactive variable.$derived — computed value (think useMemo).$effect — side effect, like Vue's watchEffect.$props — declare component props.Runes make reactivity explicit and scale better than the implicit "let" reactivity of Svelte 3/4.
Cross-component state via writable, readable, derived stores — subscribe with $store auto-syntax. Svelte 5 also lets you put $state into plain JS modules for global reactive state.
First-class transition:fade, animate:flip, in:slide, out:scale directives. The animations API is one of Svelte's most distinctive features.
.svelte files.News, marketing, e-commerce — every kilobyte counts.
Tiny bundles make Svelte great for embeds & micro-frontends.
Built-in animations save dozens of dependencies.
Less code, fewer concepts, faster iteration.