title: Step 6 — Loops & Conditionals active_step: 6

Step 6 — Loops & Conditionals

Render lists and conditional content without JavaScript.

The loop tag

<loop data="#items#" as="item"> iterates over an array. Nested properties use dot notation: #item.name#. 

<loop data="#products#" as="product">
  <div>
    <strong>#product.name#</strong>
    <span>$#product.price#</span>
  </div>
</loop>

Live loop example

Data is fetched via the <what> block and looped over in the template. Here's a hardcoded list of programming languages with their stats:

Language Type Year
#lang.name# #lang.type# #lang.type# #lang.type# #lang.type# #lang.year# 
<loop data="#languages#" as="lang">
  <tr>
    <td>#lang.name#</td>
    <td>#lang.type#</td>
    <td>#lang.year#</td>
  </tr>
</loop>

Conditionals

Use <if cond="..."> to show/hide content. <unless> is the negation. <else/> provides the fallback. 

<if cond="#user.authenticated#">
  Welcome, #user.full_name#!
  <else/>
  Please log in.
</if>

<unless cond="#items#">
  <p>No items found.</p>
</unless>

<!-- Comparisons -->
<if cond="#score# > 90">Grade: A</if>
<if cond="#status# == active">Active</if>

Live conditional demo

Toggle a session flag and watch the UI change.

Pro mode is ON. You see advanced options.
Standard mode. Click the button to switch.

Loop with empty state

<unless cond="#items#">
  <p class="text-gray-500">No items yet.</p>
</unless>

<loop data="#items#" as="item">
  <div>#item.name#</div>
</loop>
What you learned