In this post we will create a Counter with SvelteJS. This is a very simple implementation, but will you to see what the source code of a simple SvelteJS application looks like.

Creating the template

Add the template to our Counter.svelte file

<p>{count}</p>
<button>
  Click to increment
</button>

Our script tag

Add the variable count in the script section

<script>
  let count = 0;
</script>

Adding our increment method

Add the handleIncrement method to update the variable count

<script>
  let count = 0;

  function handleIncrement() {
    count += 1;
  }
</script>

Adding our increment method

Add the handleIncrement method in the click event handle of the button

<p>{count}</p>
<button on:click={handleIncrement}>
  Click to increment
</button>

And that's it. After the user clicks the button, the variable will update and the DOM will display the new value. Yes, that reactive!

Thanks for reading. I will release some in-depth posts soon.

Follow me on my social media to know when it's available!