Why template syntax renders dynamic content in Svelte - See It in Action

Why template syntax renders dynamic content

📖 Scenario: You are building a simple Svelte app that shows a greeting message. The message should change when the user types their name. This helps you understand how Svelte's template syntax updates the page automatically when data changes.

🎯 Goal: Create a Svelte component that uses template syntax to display a greeting message that updates dynamically as the user types their name.

📋 What You'll Learn

Create a variable called name with an empty string as initial value

Create a variable called greeting with the value 'Hello'

Use Svelte template syntax to display the greeting followed by the name

Add an input box bound to the name variable so typing updates the greeting dynamically

💡 Why This Matters

🌍 Real World

Dynamic content rendering is essential for interactive web apps where the page updates as users type or interact.

💼 Career

Understanding how template syntax works in frameworks like Svelte is key for frontend developer roles building modern user interfaces.

1

Set up the initial variables

Create a variable called name and set it to an empty string ''. Also create a variable called greeting and set it to the string 'Hello'.

Svelte

let name = '';
let greeting = 'Hello';

// Your code here

Need a hint?

Use let to declare variables in Svelte script.

2

Display the greeting message using template syntax

Use Svelte template syntax to display the greeting message followed by the name inside an <h1> tag. Use curly braces {} to insert the variables greeting and name.

Svelte

let name = '';
let greeting = 'Hello';

{greeting} {name} 

Need a hint?

Use {variable} inside HTML to show dynamic content in Svelte.

3

Add an input box bound to the name variable

Add an <input> element with a bind:value attribute bound to the variable name. This will update name as the user types.

Svelte

let name = '';
let greeting = 'Hello';

{greeting} {name}
  

Need a hint?

Use bind:value={name} on the input to connect it to the variable.

4

Complete the component with script tags

Wrap the variables name and greeting inside a <script> tag at the top of the file to complete the Svelte component.

Svelte

let name = '';
let greeting = 'Hello';


{greeting} {name}
  

Need a hint?

All JavaScript variables in Svelte components go inside <script> tags.