Svelte

Pronunciation: SVELT

Updated October 3, 20262 min read

In short

Svelte is a front-end framework that compiles components into small, efficient JavaScript at build time instead of running a large framework in the browser.

What is Svelte?

Svelte was created by Rich Harris and first released in 2016. Most frameworks ship a runtime library to the browser and compare virtual DOM trees to work out what changed. Svelte moves that work to the build step: its compiler reads each component and generates code that updates exactly the DOM nodes affected when the data changes.

A Svelte component is a .svelte file with a script, plain HTML-like markup and scoped styles. Since Svelte 5, released in 2024, reactive state is declared with runes such as $state and $derived: assigning to a state variable is enough for the page to update, with no setter functions or dependency lists.

The result is small bundles and fast updates, which suits interactive widgets, dashboards and sites where load time matters. SvelteKit is the official application framework on top of it, adding routing, server-side rendering, data loading and deployment adapters, much as Next.js does for React.

A common misconception is that Svelte has no runtime at all. The compiler removes most of the framework, but a small runtime is still included. The bigger trade-off is ecosystem size: React has far more ready-made libraries and developers, while Svelte is often praised for a simpler, more direct way of writing components.

Key takeaways

Svelte compiles components to efficient JavaScript at build time.
It updates the DOM directly, without a virtual DOM.
Svelte 5 uses runes such as $state and $derived for reactivity.
SvelteKit adds routing, SSR and data loading on top.
Bundles are small, but the ecosystem is smaller than React's.

Example

A counter component in Svelte 5svelte

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

<button onclick={() => count++}>
  Clicked {count} times
</button>
<p>Doubled: {doubled}</p>

<style>
  button { font-weight: 600; }   /* scoped to this component */
</style>

Readers ask

What is the difference between Svelte and React?

React runs in the browser and uses a virtual DOM to find what changed. Svelte compiles components ahead of time into code that updates the DOM directly, which usually means smaller bundles and less boilerplate, while React has a much larger ecosystem.

What is SvelteKit?

The official framework for building full applications with Svelte. It provides file-based routing, server-side rendering, static generation, API endpoints and adapters for hosts such as Vercel and Netlify.

What are runes in Svelte?

Special symbols introduced in Svelte 5, such as $state, $derived and $effect, that mark reactive state and computed values explicitly, replacing the earlier implicit reactivity.