In Svelte, reactivity is built into the compiler. Whenever you assign a new value to a variable declared with let inside a <script> block, Svelte automatically tracks it and updates the DOM wherever that variable is used. This means you don't need functions like setState or manual watchers.
Svelte compiles your code at build time, turning variable assignments into optimized DOM update instructions.
When you write
count += 1, Svelte knowscounthas changed and updates every part of the template wherecountis used.No virtual DOM is involved — Svelte updates only the affected DOM nodes directly.
Here, simply changing count with count += 1 is enough for Svelte to detect the update and re-render the <p>Count: {count}</p> automatically.
In this example, Svelte not only tracks the direct assignment to count but also re-runs the reactive statement $: double = count * 2 whenever count changes.
Every variable declared with
letin a<script>block is tracked for reactivity.A simple assignment like
count += 1automatically triggers DOM updates.Reactive statements (
$:) are only needed for derived values or when running extra logic.
This design makes Svelte code simpler and more efficient, as you don't need boilerplate to keep the UI in sync with state.