Variable substitution syntax in Flask - Step-by-Step Execution

Concept Flow - Variable substitution syntax

Start Template Rendering

↓

Find {{ variable }}

↓

Look up variable in context

↓

Replace {{ variable }} with value

↓

Continue until all variables replaced

↓

Render final HTML output

The template engine scans for {{ variable }} placeholders, looks up their values, replaces them, and produces the final HTML.

Execution Sample

Flask

<html>
  <body>
    <p>Hello, {{ name }}!</p>
  </body>
</html>

This template replaces {{ name }} with the value passed from Flask to show a greeting.

Execution Table

Step	Template Part	Action	Variable Lookup	Replacement Result
1	<html>	No variable	N/A	<html>
2	<body>	No variable	N/A	<body>
3	<p>Hello, {{ name }}!</p>	Find variable	name = 'Alice'	<p>Hello, Alice!</p>
4	</body>	No variable	N/A	</body>
5	</html>	No variable	N/A	</html>
6	All parts combined	Final output	All variables replaced	<html><body><p>Hello, Alice!</p></body></html>

💡 All variables replaced, template fully rendered.

Variable Tracker

Variable	Start	After Replacement	Final
name	undefined	'Alice'	'Alice'

Key Moments - 2 Insights

Why does {{ name }} get replaced with 'Alice'?

Because in step 3 of the execution_table, the template engine looks up 'name' in the context dictionary passed from Flask and finds the value 'Alice', then replaces the placeholder.

What happens if a variable is not found in the context?

If a variable is missing, Flask's template engine renders it as an empty string by default or raises an error depending on configuration (e.g., StrictUndefined). This is why all variables should be provided in the context.

Visual Quiz - 3 Questions

Look at the execution_table at step 3, what is the value of 'name' used for substitution?

A undefined

B 'Alice'

C 'Bob'

D null

💡 Hint

Check the 'Variable Lookup' column at step 3 in the execution_table.

At which step does the template engine finish replacing all variables?

A Step 6

B Step 3

C Step 5

D Step 2

💡 Hint

Look at the 'Action' and 'Replacement Result' columns to see when final output is ready.

If the variable 'name' was missing, what would happen to the output at step 3?

A The template rendering would fail with an error

B It would be replaced with an empty string

C Empty string or error depending on configuration

D The placeholder {{ name }} remains unchanged

💡 Hint

Refer to key_moments about missing variables and their handling.

Concept Snapshot

Variable substitution uses {{ variable }} in templates.
Flask replaces these with values from the context dictionary.
If variable missing, renders empty string by default; configurable to raise error.
This creates dynamic HTML output from static templates.

Full Transcript

In Flask templates, variable substitution uses double curly braces like {{ name }}. When rendering, Flask looks up 'name' in the context dictionary passed from the Python code. It replaces the placeholder with the actual value, for example 'Alice'. This process repeats for all variables in the template. If a variable is missing, Flask renders an empty string by default or raises an error depending on settings. The final result is a fully rendered HTML page with dynamic content.

Practice

1. In Flask templates, which syntax correctly inserts the value of a variable named username into the HTML?

easy

A. [[ username ]]

B. {{ username }}

C. {% username %}

D. <% username %>

Solution

1. Step 1: Understand Flask template syntax

   Flask uses Jinja2 templating where variables are inserted using double curly braces {{ variable }}.

2. Step 2: Identify correct variable substitution

   The correct way to show the value of username is {{ username }}.

3. Final Answer:

   {{ username }} -> Option B

4. Quick Check:

   Variable substitution = {{ username }} [OK]

Hint: Use double curly braces {{ }} for variables in Flask templates [OK]

Common Mistakes:

• Using {% %} which is for control statements
• Using brackets like [[ ]] which is not Flask syntax
• Using <% %> which is from other template engines

2. Which of the following is the correct syntax to display a variable age inside a Flask template?

easy

A. {{ age }}

B. {% age %}

C. <%= age %>

D. [[ age ]]

Solution

1. Step 1: Recall Flask variable syntax

   Flask templates use Jinja2 syntax where variables are shown with double curly braces {{ variable }}.

2. Step 2: Match the correct option

   Only {{ age }} correctly shows the variable value.

3. Final Answer:

   {{ age }} -> Option A

4. Quick Check:

   Variable display = {{ age }} [OK]

Hint: Remember: {{ variable }} shows variable value in Flask templates [OK]

Common Mistakes:

• Confusing {% %} for variables instead of control blocks
• Using syntax from other template engines like <%= %>
• Using brackets [[ ]] which Flask does not recognize

3. Given this Flask template snippet:

Hello, {{ user }}!

And the Flask code:

return render_template('template.html', user='Alice')

What will be the rendered output?

medium

A. Hello, {{ user }}!

B. Hello, user!

C. Hello, Alice!

D. Hello, !

Solution

1. Step 1: Understand variable substitution in template

   The template uses {{ user }} which will be replaced by the value passed from Flask code.

2. Step 2: Check the passed variable value

   The Flask code passes user='Alice', so {{ user }} becomes 'Alice'.

3. Final Answer:

   Hello, Alice! -> Option C

4. Quick Check:

   Variable user = Alice [OK]

Hint: Variables in {{ }} show passed values, not literal text [OK]

Common Mistakes:

• Thinking {{ user }} prints literally
• Ignoring the passed variable value
• Confusing variable name with string

4. Identify the error in this Flask template snippet:

Hello, {% user %}!

What will happen when rendering this template?

medium

A. TemplateSyntaxError due to wrong tag usage

B. SyntaxError: invalid syntax

C. It will display the literal text '{% user %}'

D. It will display the value of user variable

Solution

1. Step 1: Understand {% %} usage in Flask templates

   The {% %} syntax is for control statements like loops or conditions, not for variable substitution.

2. Step 2: Identify the error type

   Using {% user %} is invalid and causes a TemplateSyntaxError because 'user' is not a valid control tag.

3. Final Answer:

   TemplateSyntaxError due to wrong tag usage -> Option A

4. Quick Check:

   Wrong tag usage = TemplateSyntaxError [OK]

Hint: Use {{ }} for variables, {% %} only for control blocks [OK]

Common Mistakes:

• Using {% %} for variables instead of {{ }}
• Expecting literal output from {% %} tags
• Ignoring template error messages

5. You want to display a user's full name in a Flask template using two variables: first_name and last_name. Which template code correctly combines them with a space?

hard

A. {{ first_name }} + ' ' + {{ last_name }}

B. {{ first_name, ' ', last_name }}

C. {{ first_name & ' ' & last_name }}

D. {{ first_name ~ ' ' ~ last_name }}

Solution

1. Step 1: Recall string concatenation in Jinja2 templates

   Jinja2 uses the tilde (~) operator to join strings inside {{ }}.

2. Step 2: Evaluate each option

   {{ first_name ~ ' ' ~ last_name }} uses ~ correctly to join first_name, a space, and last_name. {{ first_name }} + ' ' + {{ last_name }} treats + as literal text. {{ first_name, ' ', last_name }} creates a tuple with comma. {{ first_name & ' ' & last_name }} uses invalid & operator.

3. Final Answer:

   {{ first_name ~ ' ' ~ last_name }} -> Option D

4. Quick Check:

   String join in Jinja2 = ~ operator [OK]

Hint: Use ~ to join strings in Flask (Jinja2) templates [OK]

Common Mistakes:

• Placing + outside {{ }} so it prints literally
• Using invalid operators like & or commas
• Trying Python code directly in templates