Svelte is a JavaScript framework for building user interfaces in which components are compiled ahead of time. Instead of sending a framework runtime that interprets your components in the browser, the Svelte compiler turns each component into plain code that updates the DOM directly when state changes.
Why it matters
Because there is no large runtime and no virtual DOM diffing, Svelte bundles tend to be small and updates fast, which helps on low-end phones and slow networks. Reactivity is built into the language, so a variable assignment can update the page without extra state libraries.
SvelteKit, the companion application framework, adds routing, server rendering and deployment adapters, much as Next.js does for React.
Example
<script>
let count = 0;
</script>
<button on:click={() => count += 1}>
Clicked {count} times
</button>Updating count triggers a targeted DOM update for that text node only. Newer Svelte versions use a different reactivity syntax called runes, so check the version you use.
Common mistakes
- Assuming a smaller bundle always means a faster app; images, fonts and data fetching usually dominate.
- Mutating state in ways the compiler cannot detect in older syntax, such as some array methods, and wondering why nothing updates.
- Comparing it to React feature by feature; the ecosystem and hiring pool are smaller.
Related
Get notified when this term updates
Plus occasional practical tips on uptime and monitoring, nothing else. Unsubscribe anytime.
This page is general information written by our editorial team and updated when documentation changes. Servers and providers differ, so test changes safely first. See our editorial policy and disclaimer.