Basic Svelte
Introduction
Bindings
Advanced Svelte
Advanced reactivity
Motion
Advanced bindings
Advanced transitions
Context API
Special elements
<script module>
Next steps
Basic SvelteKit
Introduction
Routing
Loading data
Headers and cookies
Shared modules
API routes
$app/state
Errors and redirects
Advanced SvelteKit
Page options
Link options
Advanced routing
Advanced loading
Environment variables
Conclusion
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;
}
previous next
1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
let count = 0;
function increment() {
// TODO implement
}
</script>
<button onclick={increment}>
Clicked {count}
{count === 1 ? 'time' : 'times'}
</button>