Skip to main content

At the heart of Svelte is a powerful system of reactivity for keeping the DOM in sync with your application state — for example, in response to an event.

Make the count declaration reactive by wrapping the value with $state(...):

App
let count = $state(0);

This is called a rune, and it’s how you tell Svelte that count isn’t an ordinary variable. Runes look like functions, but they’re not — when you use Svelte, they’re part of the language itself.

All that’s left is to implement increment:

App
function increment() {
	count += 1;
}

Edit this page on GitHub

previous next
<script>
let count = 0;

function increment() {
// TODO implement
}
</script>

<button onclick={increment}>
Clicked {count}
{count === 1 ? 'time' : 'times'}
</button>