Text interpolation with {} in Svelte - Step-by-Step Execution

Concept Flow - Text interpolation with {}

Start Svelte Component

↓

Parse Template

↓

Find {} placeholders

↓

Evaluate JS expressions inside {}

↓

Replace {} with evaluated values

↓

Render final HTML with interpolated text

↓

Display on Browser

Svelte reads the template, finds {} placeholders, evaluates the expressions inside, replaces them with values, and renders the final text.

Execution Sample

Svelte

<script>
  let name = 'Alice';
</script>
<p>Hello, {name}!</p>

This code shows how Svelte replaces {name} with the value of the variable name.

Execution Table

Step	Action	Expression inside {}	Evaluated Value	Rendered Output
1	Start parsing template	N/A	N/A	<p>Hello, {name}!</p>
2	Find {} placeholder	{name}	N/A	<p>Hello, {name}!</p>
3	Evaluate expression inside {}	name	Alice	N/A
4	Replace {} with evaluated value	{name}	Alice	<p>Hello, Alice!</p>
5	Render final HTML	N/A	N/A	<p>Hello, Alice!</p>

💡 All {} placeholders replaced with evaluated values; rendering complete.

Variable Tracker

Variable	Start	After Render
name	undefined	Alice

Key Moments - 2 Insights

Why does the text inside {} update automatically when the variable changes?

Svelte tracks reactive variables and re-runs the interpolation step when variables like 'name' change, as shown in the evaluation and replacement steps in the execution_table.

Can we put any JavaScript expression inside {}?

Yes, any valid JS expression can be inside {}, and Svelte evaluates it before rendering, as seen in step 3 of the execution_table.

Visual Quiz - 3 Questions

Look at the execution table, what is the rendered output after step 4?

A <p>Hello, Alice!</p>

B <p>Hello, {name}!</p>

C Hello, {name}!

D Hello, Alice!

💡 Hint

Check the 'Rendered Output' column at step 4 in the execution_table.

At which step does Svelte evaluate the expression inside {}?

A Step 2

B Step 4

C Step 3

D Step 5

💡 Hint

Look at the 'Action' and 'Evaluated Value' columns in the execution_table.

If the variable 'name' changes to 'Bob', what changes in the variable_tracker?

A The 'Start' value changes to 'Bob'

B The 'After Render' value changes to 'Bob'

C Both 'Start' and 'After Render' change to 'Bob'

D No change in variable_tracker

💡 Hint

Variable tracker shows variable values before and after render.

Concept Snapshot

Svelte text interpolation uses {expression} inside HTML.
The expression is evaluated and replaced with its value.
Variables inside {} update reactively.
You can use any JS expression inside {}.
This creates dynamic, readable templates.

Full Transcript

In Svelte, text interpolation means putting JavaScript expressions inside curly braces {} in your HTML. When Svelte builds the page, it finds these braces, evaluates the expressions inside, and replaces them with the actual values. For example, if you have a variable called name with the value 'Alice', writing {name} in your HTML will show 'Alice' on the page. This process happens step-by-step: Svelte parses the template, finds the placeholders, evaluates the expressions, replaces them, and finally renders the updated text. If the variable changes later, Svelte updates the text automatically. This makes your UI dynamic and easy to read.

Practice

1. In Svelte, how do you display the value of a variable name inside your HTML?

easy

A. Use {name} inside the HTML to show the variable's value.

B. Use <name> tags around the variable.

C. Use $name directly in the HTML.

D. Use $(name) inside the HTML.

Solution

1. Step 1: Understand Svelte's text interpolation syntax

   Svelte uses curly braces {} to insert variables or expressions inside HTML. To display the value of name, write {name} inside the HTML.

2. Final Answer:

   Use {name} inside the HTML to show the variable's value. -> Option A

3. Quick Check:

   Text interpolation = {name} [OK]

Hint: Remember: Curly braces {} show variables in Svelte [OK]

Common Mistakes:

• Using $name instead of {name}
• Trying to use HTML tags like <name>
• Using parentheses like $(name)

2. Which of the following is the correct syntax to show the result of 2 + 3 inside a Svelte component?

easy

A. $(2 + 3)

B. {{2 + 3}}

C. {2 + 3}

D. <2 + 3>

Solution

1. Step 1: Recall Svelte's expression interpolation

   Svelte allows expressions inside curly braces {} to be evaluated and shown. Only {2 + 3} correctly uses curly braces for expression evaluation; others are invalid.

2. Final Answer:

   {2 + 3} -> Option C

3. Quick Check:

   Expression in {} = {2 + 3} [OK]

Hint: Use curly braces {} for expressions, not $ or double braces [OK]

Common Mistakes:

• Using $(2 + 3) which is invalid in Svelte
• Using double curly braces {{}} like in other frameworks
• Using angle brackets around expressions

3. What will be displayed when this Svelte code runs?

<script>
  let count = 5;
</script>
<p>Count is: {count * 2}</p>

medium

A. Count is: 10

B. Count is: count * 2

C. Count is: 5

D. Count is: {count * 2}

Solution

1. Step 1: Evaluate the expression in the component

   The variable count is 5, and count * 2 equals 10, so "Count is: 10" is displayed.

2. Final Answer:

   Count is: 10 -> Option A

3. Quick Check:

   count * 2 = 10 [OK]

Hint: Calculate expressions inside {} before display [OK]

Common Mistakes:

• Showing the expression text instead of its value
• Not multiplying and showing just the variable
• Leaving braces visible in output

4. Identify the error in this Svelte code snippet:

<script>
  let message = 'Hello';
</script>
<p>{message</p>

medium

A. Use parentheses instead of braces (message)

B. Variable 'message' is not declared

C. Curly braces should be double like {{message}}

D. Missing closing brace '}' after {message}

Solution

1. Step 1: Check the interpolation syntax

   The code opens { but lacks closing } after message. Proper syntax is {message}.

2. Final Answer:

   Missing closing brace '}' after {message} -> Option D

3. Quick Check:

   Interpolation needs matching {} [OK]

Hint: Always close your curly braces {} in interpolation [OK]

Common Mistakes:

• Forgetting the closing brace '}'
• Using double braces {{}} which is invalid in Svelte
• Not declaring the variable before use

5. You want to display a user's full name by combining firstName and lastName inside a Svelte component. Which code correctly shows "Full Name: John Doe" if firstName = 'John' and lastName = 'Doe'?

hard

A. <script>
let firstName = 'John';
let lastName = 'Doe';
</script>
<p>Full Name: {firstName, ' ', lastName}</p>

B. <script>
let firstName = 'John';
let lastName = 'Doe';
</script>
<p>Full Name: {firstName + ' ' + lastName}</p>

C. <script>
let firstName = 'John';
let lastName = 'Doe';
</script>
<p>Full Name: {firstName & lastName}</p>

D. <script>
let firstName = 'John';
let lastName = 'Doe';
</script>
<p>Full Name: {firstName.concat(lastName)}</p>

Solution

1. Step 1: Identify correct string concatenation

   Svelte evaluates JS expressions in {}. Use +: {firstName + ' ' + lastName} gives "John Doe". Commas invoke comma operator (returns lastName), & is bitwise, concat(lastName) gives "JohnDoe" (no space).

2. Final Answer:

   Full Name: {firstName + ' ' + lastName} -> Option B

3. Quick Check:

   Use + to join strings inside {} [OK]

Hint: Use + to join strings inside {} for full text [OK]

Common Mistakes:

• Using commas instead of + for concatenation
• Using & which is a bitwise operator
• Forgetting space between names