Svelte

Svelte is a frontend framework and compiler created by Rich Harris and now maintained by an active open-source community. It ties for #16 most-used web framework at roughly 7.2% usage share. Unlike React or Vue, Svelte shifts most of its work to compile time — instead of shipping a runtime framework to the browser, it compiles components into small, highly optimized vanilla JavaScript with no virtual DOM, which developers pick for its minimal bundle size and simple, low-boilerplate syntax.

Example

A Svelte component is a single `.svelte` file mixing markup, script, and scoped styles; reactive state updates the DOM automatically with no extra API.

<!-- Counter.svelte -->
<script>
  let count = 0;

  function increment() {
    count += 1;
  }

  // reactive declaration: recomputes whenever `count` changes
  $: doubled = count * 2;
</script>

<button on:click={increment}>
  Clicked {count} {count === 1 ? 'time' : 'times'}
</button>
<p>Doubled: {doubled}</p>

<style>
  button { color: #ff3e00; }
</style>

Getting started

The official way to start a new Svelte project today is through SvelteKit, its companion app framework.

# scaffold a new SvelteKit project
npx sv create my-app

cd my-app
npm install
npm run dev