Step 6 — Loops & Conditionals

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:

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

Conditionals

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

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

<unless items>
  <p>No items found.</p>
</unless>

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

Simplified if syntax

You can skip the cond attribute and write the condition directly. No #...# wrapping needed:

<!-- Simplified syntax -->
<if active_step == 2>Step 2!</if>
<if count gt 0>There are items.</if>
<unless error>No errors.</unless>

<!-- Equivalent to: -->
<if cond="#active_step# == 2">Step 2!</if>
<if cond="#count# > 0">There are items.</if>
<unless cond="#error#">No errors.</unless>

Use keyword operators when > or < would conflict with the HTML tag:

Live conditional demo

Toggle a session flag and watch the UI change.

Nested loops

Loops can be nested. Each loop has its own scope — use distinct as names. Here's a live example with categories and their items:

<loop data="#categories#" as="category">
  <h3>#category.name#</h3>
  <loop data="#category.items#" as="item">
    <span>#item.name#</span>
  </loop>
</loop>

Loop with empty state

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

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