A compiler, not a runtime. Svelte turns your components into tiny, surgical JavaScript at build time — there is no virtual DOM and no framework shipped to the browser.
In Svelte you just reassign a variable (count += 1) and the DOM updates. No setState, no hooks. The simulation below mimics exactly that.
<!-- Counter.svelte (real Svelte) --> <script> let count = 0; </script> <button on:click={() => count -= 1}>–</button> <span>{count}</span> <button on:click={() => count += 1}>+</button>
$:The $: label marks a value that re-computes whenever its inputs change — Svelte's elegant take on derived state. Here doubled tracks the counter.
<script> let count = 0; $: doubled = count * 2; // reactive declaration </script> <p>{count} → {doubled}</p>
A $: block can sum a whole array. Change any quantity and the total recomputes — just like Svelte would after the compile step.
<script> let cart = [ { name: 'Coffee', price: 3.5, qty: 2 }, { name: 'Croissant', price: 2.2, qty: 1 } ]; $: total = cart.reduce((s, i) => s + i.qty * i.price, 0); </script> {#each cart as item} <input type="number" bind:value={item.qty}> {/each} <p>Total: {total.toFixed(2)}</p>
A writable store holds state any component can subscribe to. Both badges below read the same store, so they always match.
// store.js import { writable } from 'svelte/store'; export const count = writable(0); <!-- any component --> <script> import { count } from './store.js'; </script> <button on:click={() => $count += 1}>{$count}</button>
$: declarations and stores) because Svelte compiles ahead-of-time and has no CDN runtime. Every code block shows the real Svelte component source. The shared CSS shell provides page styling.