Reactivity

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. Replace line 9 with this:

<button on:click={handleClick}>

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

function handleClick() {
	count += 1;
}

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



			
loading editor...
loading Svelte compiler...


			
loading editor...

Compiler options

result = svelte.compile(source, {
generate:
});


			
loading editor...