Introduction to Reactivity in Svelte

Let’s see how reactivity in Svelte looks like by building a simple character/word counter example.

Here’s our barebones component:

<script>
    let text = '';
</script>

<style>
  textarea {
    width: 100%;
    background: aliceblue;
    font-size: 2rem;
  }
</style>

<textarea bind:value={text} rows="10" />

Nothing too special here, except for the two-way data binding between the value of text and the textarea’s value.

Now let’s add a reactive declaration to automatically compute the number of words and characters when the value of the text variable changes:

<script>
  let text = '';

  $: characters = text.length;
  $: words = text.split(' ').length;
</script>

<style>
  textarea {
    width: 100%;
    background: aliceblue;
    font-size: 2rem;
  }
</style>

<textarea bind:value={text} rows="10" />

<p>Character Count: {characters}</p>
<p>Word Count: {words}</p>

We declared two new variables: characters and words, which compute a value based on the value inside of text and which will automatically get recomputed.

This reactivity using the special label syntax is not only valid for declaring new variables, but it can also be used to execute statements reactively when a value changes.

Let’s log the value of text to the console when it changes:

<script>
  let text = "";

  $: characters = text.length;
  $: words = text.split(" ").length;

  $: console.log("your text:", text);
</script>

<style>
  textarea {
    width: 100%;
    background: aliceblue;
    font-size: 2rem;
  }
</style>

<textarea bind:value={text} rows="10" />

<p>Character Count: {characters}</p>
<p>Word Count: {words}</p>

Imagine how handy this can be for debugging applications!

Multiple statements

You can group together multiple statements in a block using curly braces:

$: {
  console.log("---");
  console.log("your text:", text);
}

Conditional statements

And you can even use conditionals as your statement:

$: if (text.toLowerCase().includes("see you later alligator")) {
  console.log("Not so soon baboon!");
  text = "";
}

Now every time our text variable contains the string “see you later alligator”, a message is logged to the console and we reset the value for the text variable.

🎩 With this, you can now go on and make your Svelte apps reactive!