Svelte Reactivity Examples
A runnable gallery of everyday Svelte 4 reactivity patterns — counter, derived value, writable store, bind:value, toggle, list render, input echo and a reactive statement — each a short editable demo.
Examples · Updated
Overview
A gallery of runnable Svelte 4 reactivity patterns — edit any one live in the editor. New to the model? Start with Svelte reactivity.
Examples
Counter with a let variable
Derived value with $:
Writable store with $store
Two-way bind on an input
Toggle a boolean
List rendering with each
Text input echo
Reactive statement side effect
Frequently asked questions
How do I build a counter in Svelte?
Declare
let count = 0 and update it on click with count++, which reassigns it and updates the UI. See the counter demo above, and Svelte reactivity for why assignment drives the update.How do I derive a value from state in Svelte?
Use a reactive statement:
$: doubled = count * 2 recomputes whenever count changes. The $: reactive statement reference covers the derived and side-effect forms.How do I read a text input in Svelte?
Bind it with
bind:value={text} and read text anywhere. The full walk-through is how to bind an input; for shared state see the writable store reference.