Macros for reusable components in Flask - Step-by-Step Execution

Concept Flow - Macros for reusable components

Define macro in template

↓

Use macro in same or other template

↓

Render template

↓

Macro expands to HTML

↓

Final HTML sent to browser

Macros are like little helpers in templates. You define them once, then use them many times to create repeated HTML parts easily.

Execution Sample

Flask

{% macro button(text, url) %}
  <a href="{{ url }}" class="btn">{{ text }}</a>
{% endmacro %}

{{ button('Home', '/') }}

Defines a button macro and uses it to create a link styled as a button.

Execution Table

Step	Action	Macro Called	Parameters	Output HTML
1	Define macro 'button'	No	-	-
2	Call macro 'button'	Yes	text='Home', url='/'	<a href="/" class="btn">Home</a>
3	Insert macro output into template	No	-	<a href="/" class="btn">Home</a>
4	Render final HTML	No	-	<a href="/" class="btn">Home</a>

💡 All macro calls expanded and template fully rendered

Variable Tracker

Variable	Start	After Macro Call	Final
text	undefined	Home	Home
url	undefined	/	/

Key Moments - 3 Insights

Why does the macro need parameters like 'text' and 'url'?

Parameters let the macro create different buttons each time. See execution_table step 2 where 'text' and 'url' change the output.

Can I use a macro before defining it in the template?

No, macros must be defined before use. Step 1 shows macro definition happens first.

Does the macro output replace the macro call in the final HTML?

Yes, as shown in step 3 and 4, the macro call is replaced by the generated HTML.

Visual Quiz - 3 Questions

Look at the execution table, what is the output HTML after the macro call at step 2?

A <button>Home</button>

B <a href="#" class="btn">Home</a>

C <a href="/" class="btn">Home</a>

D <a href="/home" class="btn">Home</a>

💡 Hint

Check the 'Output HTML' column at step 2 in the execution_table

At which step is the macro 'button' defined?

A Step 2

B Step 1

C Step 3

D Step 4

💡 Hint

Look at the 'Action' column in the execution_table for macro definition

If you change the parameter 'text' to 'About', what will be the output HTML at step 2?

A <a href="/" class="btn">About</a>

B <a href="/" class="btn">Home</a>

C <a href="/about" class="btn">About</a>

D <button>About</button>

💡 Hint

Refer to variable_tracker for 'text' value and execution_table step 2 output pattern

Concept Snapshot

Macros in Flask templates:
- Define with {% macro name(params) %}...{% endmacro %}
- Call with {{ name(args) }}
- Reusable HTML snippets
- Parameters customize output
- Expands to HTML during rendering

Full Transcript

In Flask templates, macros let you create reusable HTML parts. First, you define a macro with parameters. Then you call it with specific values. When rendering, the macro call is replaced by the HTML it generates using those values. This helps avoid repeating code and keeps templates clean. For example, a button macro can be defined once and used many times with different text and links. The execution table shows defining the macro, calling it with parameters, and rendering the final HTML. Variables like 'text' and 'url' hold the values passed to the macro. Remember, macros must be defined before use, and their output replaces the call in the final page.