Svelte Explained: The Framework That Disappears

Introduction

React, Vue, and Angular all work the same way at runtime: they ship a framework to the browser, which watches your data and updates the page. Svelte takes a radically different approach — it is a compiler. It turns your components into plain JavaScript at build time, and ships no framework at all. The result: smaller bundles, faster pages, and code that reads almost like plain HTML, CSS, and JavaScript.

Reactivity without ceremony

In React you need hooks and state setters; in Svelte, reactivity is just assignment. Change a variable, and the page updates:

<script>
  let count = 0;
</script>
<button on:click={() => count += 1}>
  Clicked {count} times
</button>

There is no useState, no setter function, no virtual DOM diffing. The compiler sees count += 1 and generates the exact code to update the button text. Less code to write, less code shipped, and nothing to learn beyond assignment.

One file, three familiar languages

A Svelte component keeps its script, markup, and styles together — but in languages you already know, not a new template syntax:

<script>
  let name = "Sara";
</script>
<h1>Hello, {name}!</h1>
<style>
  h1 {
    color: #14b8a6;
  }
</style>

The <style> block is scoped automatically: those styles apply only to this component, never leaking to the rest of the page. No naming conventions, no CSS-in-JS libraries — scoping comes free from the compiler.

The trade-off, honestly

Svelte's approach has real costs: a smaller ecosystem than React, fewer ready-made component libraries, and fewer job listings. Its compiler magic can also surprise beginners when a reactivity rule (like needing to reassign an array, not just mutate it) is not obvious. But for personal projects, marketing sites, and anywhere bundle size matters, Svelte's simplicity is genuinely refreshing — and its ideas have influenced React's own compiler work.

Takeaway

Svelte compiles components into plain JavaScript instead of shipping a framework, reactivity is plain assignment, and styles are scoped by default. It is the framework that disappears — and the smaller your bundle, the faster your page.

Originally published at https://practicaldevblog.blogspot.com/2026/10/svelte-explained-framework-that.html