Svelte

Svelte shifts work from the browser to compile time — there’s no runtime framework overhead, just optimised vanilla JavaScript. Its reactive assignments and simple syntax make it approachable for beginners while its performance characteristics appeal to production teams building fast, lightweight UIs. Svelte 5 introduced Runes ($state, $derived, $effect) as a more explicit reactivity system that also works outside of .svelte files.

Quick start

npm create svelte@latest my-app
cd my-app && npm install && npm run dev

<!-- src/lib/Counter.svelte -->
<script>
  let count = $state(0)
  const doubled = $derived(count * 2)
</script>

<button onclick={() => count++}>
  Count: {count} (doubled: {doubled})
</button>

<style>
  button {
    padding: 0.5rem 1rem;
    font-size: 1rem;
  }
</style>

<!-- Fetch data with onMount -->
<script>
  import { onMount } from 'svelte'

  let users = []

  onMount(async () => {
    const res = await fetch('/api/users')
    users = await res.json()
  })
</script>

{#each users as user (user.id)}
  <p>{user.name}</p>
{/each}

When to use

Svelte is the best choice when bundle size and runtime performance are priorities — marketing pages, interactive widgets embedded in larger sites, and performance-sensitive dashboards. Its simpler syntax lowers the barrier to entry compared to React or Vue. For a full-stack Svelte application with SSR and routing, use SvelteKit. The ecosystem is smaller than React’s, so factor in library availability for complex UI requirements.