What is Svelte?

Most frameworks you've used — React, Vue — ship a runtime library to the browser. That library does work while your app runs: it builds a virtual DOM, diffs it against the previous one, and patches the real DOM with the difference. Svelte skips all of that. It's a compiler: you write .svelte files, and at build time Svelte turns them into small, plain JavaScript that updates the DOM directly, with no framework code shipped alongside it.

No virtual DOM, no diffing

Because Svelte knows at compile time exactly which values a piece of markup depends on, it can generate code that updates only the specific DOM node that needs to change — no comparing old and new trees at runtime.

<script>
  let count = $state(0);
</script>

<button onclick={() => count++}>
  Clicked {count} times
</button>

When you compile this, Svelte doesn't ship a generic "render this component" function. It generates something closer to hand-written imperative code: create a button, create a text node, and when count changes, update that one text node directly. There's no diffing algorithm involved because the compiler already knows exactly what depends on what.

What this means in practice

• Smaller bundles. Your shipped JS is mostly your own logic, not a framework runtime. A simple Svelte app can ship kilobytes where an equivalent React app ships tens of kilobytes just for the library.
• Less runtime overhead. There's no virtual DOM tree being built and compared on every update — updates go straight to the real DOM.
• The framework "disappears" at build time. Once compiled, your component is just JavaScript and DOM calls. There's no React or Vue object living in memory at runtime coordinating things.

The tradeoff

Compilers make different tradeoffs than runtimes. Because Svelte generates code specific to each component, some patterns that are trivial in a runtime framework (like arbitrary dynamic composition) need Svelte-specific mechanisms — you'll meet these as snippets, actions, and stores later in this course. And because reactivity is compiled, not computed dynamically, Svelte needs its own syntax (runes, which you'll meet in the next section) to mark what should be reactive, rather than relying on library functions called at runtime.

Where Svelte fits

Plain Svelte, as you'll use it in this course, compiles components into a JavaScript app that runs in the browser — similar to using React with Vite. There's also SvelteKit, a separate meta-framework built on top of Svelte that adds routing, server-side rendering, and data loading conventions (much like Next.js sits on top of React). This course focuses on Svelte itself; SvelteKit is worth learning once you're comfortable with the fundamentals here.