Svelte

What is it?

Svelte is a JavaScript framework created by Rich Harris in 2016 that takes a different approach from React or Vue: instead of shipping a runtime library that updates the page in the browser, Svelte is a compiler. You write components, and at build time Svelte turns them into small, plain JavaScript that surgically updates the exact DOM nodes that changed - no virtual DOM, no framework code shipped to the user.

The result is famously small bundle sizes and fast runtime performance, with a syntax many developers find closer to plain HTML/CSS/JS than any other component framework.

When to use it

Reach for Svelte when performance and bundle size matter a lot - embedded widgets, marketing sites with interactive pieces, or apps where every kilobyte counts - or simply because you enjoy writing less boilerplate. The trade-off is ecosystem size: fewer third-party components, fewer Stack Overflow answers, and fewer job listings than React. If you're optimizing for employability or need the largest possible community while learning, React or Vue are safer bets.

Core concepts

• Compiled, not interpreted - .svelte files are compiled to vanilla JS at build time; there's no Svelte runtime shipped to the browser.
• Reactivity by assignment - reassign a variable (count = count + 1) and Svelte updates the DOM. No useState or ref() wrapper needed.
• Single-file components - like Vue, a .svelte file holds markup, script, and scoped styles together.
• Stores - small, framework-provided objects for sharing state across components without extra libraries.
• SvelteKit - the official app framework built on Svelte, for routing, server-side rendering, and full apps (comparable to Next.js for React).

A taste of the code

<script>
  let count = 0;
</script>

<button on:click={() => count++}>
  Clicked {count} times
</button>

No hooks, no imports for reactivity. Assigning to count is enough - the compiler figures out which DOM node to update.

Your first steps

1. Be comfortable with JavaScript fundamentals first - Svelte removes boilerplate, not the need to know JS.
2. Scaffold a project with npx sv create my-app (the current SvelteKit CLI).
3. Run npm install and npm run dev, then edit src/routes/+page.svelte and watch it update live.
4. Build a counter, then a small todo list using reactive assignments and an {'{'}#each{'}'} block to render a list.
5. Try the interactive tutorial on svelte.dev - it runs entirely in the browser and covers the whole language in an afternoon.

Common beginner mistakes

• Mixing Svelte 4 and Svelte 5 syntax. Svelte 5 introduced runes - $state, $derived, $props - replacing let-based reactivity, $: statements and export let. Many tutorials still use the old style; follow the current docs.
• Confusing Svelte with SvelteKit. Svelte is the component framework; SvelteKit is the full application framework around it, with routing and server rendering. Most new projects start with SvelteKit.
• Assuming a library exists. The ecosystem is smaller than React's - check that a package is maintained and supports your Svelte version before depending on it.
• Putting everything in one component. Svelte makes components cheap to create; split them early.

Getting it online

SvelteKit uses adapters to target different hosts: adapter-static produces plain files for any static host or shared hosting, adapter-node builds a Node server for a VPS or platform service, and adapter-auto detects platforms such as Vercel, Netlify and Cloudflare.

A plain Svelte + Vite project builds to static files, deployable like any other Vite app.

Go deeper