# What Svelte Is — Svelte / SvelteKit

Source: https://www.skillbyai.com/en/svelte/f-what

> A compiler that writes the DOM updates for you.

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

![Three ideas: the compiler model, project setup with sv, the anatomy of a component.](assets/figures/svelte/section-1-map.svg) — Figure 1.1 — Component source, compiler output, DOM updates.

## A complete component

Counter.svelte with Svelte 5 runes.

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

**Quiz:** 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
- [x] Compiled code updates only the nodes that depend on the changed state
- [ ] It reloads the component file in the browser

*Answer:* Compiled code updates only the nodes that depend on the changed state. Svelte is a compiler; the work is decided at build time.