Component structure (frontmatter + template) in Astro - Step-by-Step Execution

Concept Flow - Component structure (frontmatter + template)

Start file

↓

Frontmatter block

↓

Define variables, imports

↓

Template block

↓

Use variables in HTML

↓

Component ready to render

Astro components start with a frontmatter block for logic, then a template block for HTML using that logic.

Execution Sample

Astro

---
const greeting = "Hello, friend!";
---
<h1>{greeting}</h1>

This Astro component sets a greeting in frontmatter and shows it inside an h1 tag.

Execution Table

Step	Action	Evaluation	Result
1	Read frontmatter start ---	Begin frontmatter	Frontmatter mode active
2	Evaluate const greeting	greeting = "Hello, friend!"	Variable greeting set
3	Read frontmatter end ---	End frontmatter	Switch to template mode
4	Parse <h1>{greeting}</h1>	Insert greeting value	<h1>Hello, friend!</h1> rendered
5	Component ready	Output HTML	Component outputs <h1>Hello, friend!</h1>

💡 Frontmatter ends, template renders using variables, component output complete

Variable Tracker

Variable	Start	After frontmatter	Final
greeting	undefined	"Hello, friend!"	"Hello, friend!"

Key Moments - 2 Insights

Why do we use the --- lines in Astro components?

The --- lines mark the frontmatter block where you write JavaScript. The execution_table rows 1 and 3 show switching between frontmatter and template.

How does the template access variables from frontmatter?

Variables declared in frontmatter are available in the template. Row 4 shows the template inserting the greeting variable's value.

Visual Quiz - 3 Questions

Look at the execution table, what is the value of greeting after step 2?

A "Hello, friend!"

B undefined

C null

D Error

💡 Hint

Check the 'Evaluation' column in row 2 for greeting's value

At which step does the template start rendering HTML?

A Step 1

B Step 4

C Step 3

D Step 5

💡 Hint

Look for when the template parses the

tag in the execution_table

If you remove the frontmatter block, what happens to the greeting variable in the template?

A It shows default text

B It shows the last value

C It shows as empty or error

D It shows the variable name

💡 Hint

Variables must be declared in frontmatter to be available in template (see variable_tracker)

Concept Snapshot

---
// Frontmatter: JS logic here
const greeting = "Hello!";
---
<!-- Template: HTML here -->
<h1>{greeting}</h1>

Use --- to separate logic and template.
Variables in frontmatter are used in template with {}.

Full Transcript

Astro components have two parts: frontmatter and template. The frontmatter is between --- lines and contains JavaScript code like variable declarations. After the frontmatter ends, the template part contains HTML that can use those variables inside curly braces. The example sets a greeting variable in frontmatter and then shows it inside an h1 tag in the template. The execution steps show reading frontmatter, setting variables, then rendering the template with those variables. This structure helps separate logic from display cleanly.

Practice

1. What is the purpose of the frontmatter section in an Astro component?

easy

A. To style the component with CSS

B. To write JavaScript code and define variables used in the template

C. To write HTML markup for the component

D. To import other components only

Solution

1. Step 1: Understand frontmatter role

   The frontmatter section is where you write JavaScript code, such as variables or functions, that the template can use.

2. Step 2: Differentiate from template

   The template part is for HTML markup, not code. Styling is done separately, not in frontmatter.

3. Final Answer:

   To write JavaScript code and define variables used in the template -> Option B

4. Quick Check:

   Frontmatter = JavaScript code [OK]

Hint: Frontmatter holds code; template holds HTML display [OK]

Common Mistakes:

• Confusing frontmatter with template HTML
• Thinking frontmatter is for CSS styling
• Believing frontmatter is only for imports

2. Which of the following is the correct way to start the frontmatter section in an Astro component?

easy

A. //

B. { }

C. /* */

D. ---

Solution

1. Step 1: Identify frontmatter syntax

   Astro uses triple dashes --- at the top and bottom to mark the frontmatter section.

2. Step 2: Compare options

   Curly braces, comments, or single slashes are not used to mark frontmatter.

3. Final Answer:

   --- -> Option D

4. Quick Check:

   Frontmatter starts with --- [OK]

Hint: Frontmatter always starts and ends with --- [OK]

Common Mistakes:

• Using curly braces to start frontmatter
• Confusing comments with frontmatter markers
• Omitting the closing ---

3. Given this Astro component code, what will be displayed when rendered?

---
const greeting = "Hello, Astro!";
---
{greeting}

medium

A. {greeting}

B.

C. Hello, Astro!

D. Error: greeting is undefined

Solution

1. Step 1: Understand variable usage

   The variable greeting is defined in frontmatter with value "Hello, Astro!".

2. Step 2: Template interpolation

   The template uses curly braces {greeting} to insert the variable's value into the HTML.

3. Final Answer:

   <h1>Hello, Astro!</h1> -> Option C

4. Quick Check:

   Curly braces insert variable value [OK]

Hint: Curly braces show frontmatter variables in template [OK]

Common Mistakes:

• Thinking curly braces show as text literally
• Assuming variable is undefined without frontmatter
• Forgetting to close frontmatter with ---

4. What is wrong with this Astro component code?

---
const name = "Astro";

Hello, {name}!
---

medium

A. The template HTML is inside the frontmatter section

B. The variable name is not defined

C. Curly braces cannot be used in Astro templates

D. Missing closing tag for <h1>

Solution

1. Step 1: Identify frontmatter boundaries

   Frontmatter is only for JavaScript code and must be enclosed between --- lines.

2. Step 2: Check template placement

   The HTML template must be outside the frontmatter. Here, the <h1> is inside frontmatter, causing an error.

3. Final Answer:

   The template HTML is inside the frontmatter section -> Option A

4. Quick Check:

   Template must be outside frontmatter [OK]

Hint: Keep HTML outside --- frontmatter --- [OK]

Common Mistakes:

• Placing HTML inside frontmatter
• Forgetting to close frontmatter with ---
• Misusing curly braces syntax

5. How can you display a list of items defined in frontmatter inside the template in Astro? Choose the correct code snippet to render a list of fruits stored in fruits array.

hard

A. ---
const fruits = ["Apple", "Banana", "Cherry"];
---

{fruits.map(fruit => {fruit})}

B. ---
const fruits = ["Apple", "Banana", "Cherry"];
---

{for fruit in fruits}
{fruit}
{/for}

C. ---
const fruits = ["Apple", "Banana", "Cherry"];
---

{fruits.forEach(fruit => {fruit})}

D. ---
const fruits = ["Apple", "Banana", "Cherry"];
---

{fruits.map(fruit => "" + fruit + "")}

Solution

1. Step 1: Understand how to loop in Astro template

   Astro templates use JavaScript expressions inside curly braces. map() returns an array of JSX elements to render.

2. Step 2: Check each option's correctness

   ---
   const fruits = ["Apple", "Banana", "Cherry"];
   ---
   
     {fruits.map(fruit => 
   {fruit}
   )}
   

   uses map() correctly to return <li> elements.

   ---
   const fruits = ["Apple", "Banana", "Cherry"];
   ---
   
     {for fruit in fruits}
       
   {fruit}
     {/for}
   

   uses invalid syntax.

   ---
   const fruits = ["Apple", "Banana", "Cherry"];
   ---
   
     {fruits.forEach(fruit => 
   {fruit}
   )}
   

   uses forEach() which returns undefined.

   ---
   const fruits = ["Apple", "Banana", "Cherry"];
   ---
   
     {fruits.map(fruit => "
   " + fruit + "
   ")}
   

   returns strings, not JSX elements.

3. Final Answer:

   Option A correctly renders the list using map() -> Option A

4. Quick Check:

   Use map() to render lists in Astro templates [OK]

Hint: Use map() inside curly braces to render lists [OK]

Common Mistakes:

• Using forEach instead of map for rendering
• Trying template loops with invalid syntax
• Returning strings instead of JSX elements