Svelte: The Compiler-First UI Framework

Q: What changed in Svelte 5?

Svelte 5 introduced runes ($state, $derived, $effect), making reactivity explicit and usable outside components, and updated event syntax (onclick instead of on:click). The older let/$: reactivity still exists but runes are the new standard.

Svelte

Svelte is a component framework with a radical idea: instead of shipping a runtime that does work in the browser, it compiles your components into efficient vanilla JavaScript at build time. There's no virtual DOM — the compiler generates code that surgically updates the DOM when state changes.

Created by Rich Harris in 2016 for interactive news graphics, Svelte trades a large runtime for a compile step, producing some of the smallest bundles and fastest startup of any framework.

TL;DR

Svelte is a compiler — the framework largely "disappears" at build time.
No virtual DOM; updates are direct and minimal.
Svelte 5 uses runes ($state, $derived, $effect) for reactivity.
SvelteKit is the official full-stack meta-framework.

Quick Example

A counter in Svelte 5 — $state makes a value reactive, and the markup updates automatically:

Core Concepts

Component — a .svelte file containing markup, <script>, and scoped <style>.
Runes (Svelte 5) — $state (reactive value), $derived (computed), $effect (side effect).
Stores — shareable reactive state (writable, readable, derived) for cross-component data.
The compiler — transforms all of the above into imperative DOM updates with no framework runtime to ship.

💡 In Svelte 4 and earlier, reactivity came from plain assignments (count += 1) and $: reactive statements. Svelte 5's runes make that reactivity explicit and usable outside components.

Best Practices

Lean on the compiler — write declarative code and let Svelte generate the updates.
Use runes for component state and stores for state shared across the app.
Reach for SvelteKit for routing, SSR, and full-stack features.
Keep components small; scoped styles keep CSS local by default.

Comparison: Svelte vs React

See React for the other side.

Common Mistakes

Expecting a React-sized ecosystem

Mixing Svelte 4 and 5 reactivity blindly

FAQ

How is Svelte different from React or Vue?

Svelte compiles components to vanilla JavaScript at build time rather than shipping a runtime/virtual DOM. The result is smaller bundles and faster startup, at the cost of a smaller ecosystem and a build step that's central rather than optional.

What changed in Svelte 5?

Svelte 5 introduced runes ($state, $derived, $effect), making reactivity explicit and usable outside components, and updated event syntax (onclick instead of on:click). The older let/$: reactivity still exists but runes are the new standard.

Do I need SvelteKit?

For anything beyond a single embedded widget — routing, SSR, data loading, full-stack endpoints — yes, SvelteKit is the official answer. For a small embedded component, plain Svelte is enough. See SvelteKit.

Is Svelte's ecosystem big enough for production?

For most apps, yes — Svelte is mature and production-proven. Just verify library coverage for your specific needs, since the ecosystem is smaller than React's.