Svelte: The Compiler-Based JavaScript Framework

What is Svelte?

Svelte is a framework for building user interfaces on the web. You write components in HTML, CSS and JavaScript, and the Svelte compiler turns them into lean, optimized JavaScript at build time. Instead of shipping a runtime that diffs a virtual DOM, Svelte generates targeted update code. SvelteKit is its companion framework for full applications.

How Svelte works

A .svelte file holds markup, styles scoped to the component and a script. At build time the compiler analyses it and emits code that updates exactly the parts of the page that depend on changed state. Rich Harris, Svelte's creator, put the idea this way: Svelte is a compiler that knows at build time how things could change in your app. In practice you use Vite to build, either directly or through SvelteKit.

Runes in Svelte 5

Svelte 5 introduced runes, symbols with a $ prefix that control the compiler and need no import. $state declares reactive state, $derived computes a value from other state, and $effect runs side effects, for example after the DOM updates. Svelte 5 still supports the Svelte 4 syntax, and old and new components can be mixed, so migration can be gradual.

<script>
  let count = $state(0);
  let double = $derived(count * 2);
</script>

<button onclick={() => count++}>
  {count} x 2 = {double}
</button>

The compiler rewrites each reference to count into a signal operation, so you read and write the variable normally, without a .value wrapper.

Common mistakes

• Mixing old and new reactivity. $: statements and runes behave differently. A component in runes mode follows the new rules, for example props are not bindable unless you use $bindable.
• Reaching for $effect too often. If a value can be computed from other state, use $derived. The migration guide says that is the right choice most of the time.
• Expecting class instances to be reactive. $state proxies plain objects and arrays, not class instances. Put $state on the class fields.
• Confusing Svelte with SvelteKit. Svelte renders components. Routing, server rendering and data loading come from SvelteKit.

Testing and monitoring a Svelte app

The Svelte docs recommend Vitest for unit and component tests when you use Vite, with Testing Library for component tests, and Playwright for end-to-end tests, which are unaware of Svelte and work through the DOM. For a Svelte site that is server-rendered and then hydrated, also check the real user flow in a browser. See what is Playwright for an introduction. Before a launch, LoadFocus load testing shows how your server and APIs behave under traffic. In production, LoadFocus API monitoring checks endpoints on a schedule and, on paid plans, runs Playwright browser checks. Compare approaches in synthetic monitoring vs real user monitoring.

FAQ

Does Svelte use a virtual DOM?

No. Svelte's creator describes it as a compiler that knows at build time how things could change, so it emits targeted DOM update code instead of diffing two virtual trees at runtime.

What are Svelte runes?

Runes are $-prefixed symbols such as $state, $derived and $effect that control the compiler. They arrived in Svelte 5.

Is Svelte the same as SvelteKit?

No. Svelte is the component framework. SvelteKit is the companion application framework for routing, server rendering and full stack apps.

Can I still use Svelte 4 syntax?

Yes. The Svelte 5 migration guide says Svelte 5 still supports the old syntax and lets you mix it with runes.

How do I test a Svelte app end to end?

Use a browser tool such as Playwright. It drives the real DOM, so it works the same for Svelte as for any other framework.