Skip to main content

Part 1 / Reactivity / Assignments

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.

To demonstrate it, we first need to wire up an event handler (we'll learn more about these later):

<button on:click={increment}>

Inside the increment function, all we need to do is change the value of count:

function increment() {
	count += 1;
}

Svelte 'instruments' this assignment with some code that tells it the DOM will need to be updated.

Next: Declarations

1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
	let count = 0;
 
	function increment() {
		// event handler code goes here
	}
</script>
 
<button>
	Clicked {count}
	{count === 1 ? 'time' : 'times'}
</button>
initialising