Understanding bindings

Bindings in Svelte allow you to keep the value of a component’s state in sync with the value of an <input /> element. If the state changes, the input updates; conversely, if the input changes, the state updates as well.

The following code snippet is an example of creating a binding in Svelte:

<script>
  let name = "John";
</script>
<input bind:value={name} />

Bindings are created through the bind: directive. In the preceding code snippet, the input element’s value is bound to the name variable. When you type in the input, the name variable will update automatically. Conversely, when you change the value of the name variable, the input element’s value will also automatically update.

As demonstrated, bindings create a two-way data flow, enabling data changes to propagate from the element to the component state, and from the component state into the element.

The previous example demonstrates...