Template Directives #

Use directives to bind state and control which HTML renders. They are template syntax, not JavaScript expressions or custom elements you register yourself.

<if condition="items.length">
  <ul>
    <for each="item in items">
      <li>{{item.name}}</li>
    </for>
  </ul>
</if>

Available Directives #

Choose the directive for the task:

• <if> Conditional Rendering - Conditionally render content based on expressions
• <for> Loop Iteration - Iterate over collections to generate repeated content
• <route> Routing - Map URL paths to components for SSR and optional client navigation
• <boundary> Streaming Boundary - Discover and hydrate complete regions inside entries and reusable components
• Lazy Component Policy - Defer offscreen rendering and hydration with root-template attributes
• {{}} Signal Binding - Insert dynamic values with automatic HTML escaping
• {{{}}} Raw Signal Binding - Insert unescaped HTML content
• Attribute Directives - Bind dynamic data to HTML attributes ({{}}, ?, :, and mixed)

How Directives Work #

The build validates directives and compiles them for the native renderer. The renderer evaluates them against request state without executing application JavaScript. In an interactive component, the browser framework also updates bindings, conditions, and loops when state changes.

Text bindings read paths only. Conditions and boolean attributes support the documented expression subset, not arbitrary JavaScript.