Svelte

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.

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.

• 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).

<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.

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.