Why bindings enable two-way data flow in Svelte - See It in Action

Why bindings enable two-way data flow in Svelte

📖 Scenario: You are building a simple Svelte app where a user can type their name into an input box, and the app shows the name below. You want the input and the displayed name to stay in sync automatically.

🎯 Goal: Build a Svelte component that uses bind:value to connect an input field with a variable, so changes in the input update the variable and changes in the variable update the input. This shows how bindings enable two-way data flow.

📋 What You'll Learn

Create a variable name initialized to an empty string.

Add an <input> element with bind:value={name}.

Display the current value of name below the input.

Ensure that typing in the input updates the displayed name immediately.

💡 Why This Matters

🌍 Real World

Two-way data binding is common in forms and interactive UI where user input and app state must stay in sync.

💼 Career

Understanding bindings in Svelte helps build reactive web apps efficiently, a valuable skill for frontend developers.

1

Create the name variable

Create a variable called name and set it to an empty string '' inside the <script> tag.

Svelte

// Create a variable called name and set it to an empty string
// Your code here

Need a hint?

Use let name = ''; inside the <script> tag.

2

Bind the input value to name

Add bind:value={name} to the <input> element to connect it with the name variable.

Svelte

  let name = '';



  

Need a hint?

Use bind:value={name} inside the <input> tag.

3

Display the current value of name

Inside the <p> tag, add {name} to show the current value of the name variable.

Svelte

  let name = '';



{/* Display name here */}

Need a hint?

Use {name} inside the <p> tag to display the variable.

4

Complete the two-way binding setup

Ensure the full component code includes the <script> tag with let name = '';, the <input bind:value={name} />, and the <p>{name}</p> to complete the two-way data flow.

Svelte

  let name = '';



{name}

Need a hint?

Make sure all parts are present to enable two-way binding.