What Svelte Is

Compile-time reactivity, no virtual DOM

Svelte is a UI framework whose main work happens at build time. A .svelte file is compiled into plain JavaScript that creates the DOM and updates exactly the nodes that depend on changed state; there is no virtual DOM to diff on every update. Svelte 5 introduced runes such as $state, $derived and $effect that make reactivity explicit and fine-grained (signal-based under the hood). SvelteKit is the companion application framework: routing, server-side rendering, data loading, form handling and deployment adapters, built on Vite. Svelte is the component layer; SvelteKit is the app layer.

A compiler, not a runtime library

Svelte turns components into small JavaScript modules at build time that update the DOM directly.

A complete component

Counter.svelte with Svelte 5 runes.

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

  function increment() {
    count += 1;
  }
</script>

<button onclick={increment}>
  Clicked {count} {count === 1 ? 'time' : 'times'}
</button>

A tailor versus a one-size-fits-all suit

A virtual-DOM library ships a general engine that works out changes at run time; Svelte tailors code for each component at build time, so the browser only runs what that component needs.

Quick check: How does Svelte update the DOM when state changes?

• It re-renders the whole page from the server
• It diffs a virtual DOM tree on every change
• Compiled code updates only the nodes that depend on the changed state
• It reloads the component file in the browser