Svelte Reactivity Examples

Svelte handles reactivity automatically when you assign to local variables. This page demonstrates several ways reactivity works in Svelte.

Basic Reactivity

Click the buttons to see reactive updates

Count: 0

Doubled: 0

Squared: 0

Two-way Binding

Type in the input to see reactive binding

Name:

Hello world!

Array Reactivity

Any assignment to the array variable will trigger reactive updates.

Numbers:

1234

Sum: 10

Object Reactivity

Objects need a full assignment to reliably trigger reactivity.

Name: Alice

Age: 25

Note: The second button uses direct property mutation. In this simple case it works, but for more complex objects, it's recommended to use full assignment as shown in the first button.