Template Engine

ARO includes a built-in template engine for generating dynamic HTML content. Templates use the familiar {{ }} delimiter syntax and support variable interpolation, control flow, and template includes.

Basic Usage

Load and render a template using the Transform action:

(homePage: My App API) {
    Transform the <html> from the <template: index.html>.
    Return an <OK: status> with <html>.
}

Templates are loaded from the templates/ directory in your application.

Variable Interpolation

Output variables using double braces:

<h1>Welcome, {{ user.name }}</h1>
<p>Your balance: {{ account.balance }}</p>

Variables from the ARO context are automatically available in templates.

Conditional Rendering

Use when blocks for conditional content:

{{ when user.isAdmin {
    <div class="admin-panel">
        <h2>Admin Controls</h2>
        <button>Manage Users</button>
    </div>
} }}

{{ when order.status = "shipped" {
    <p>Your order is on its way!</p>
} }}

Iteration

Loop over collections with for each:

<ul class="messages">
{{ for each message in messages {
    <li>
        <span class="author">{{ message.author }}</span>
        <p>{{ message.text }}</p>
        <time>{{ message.createdAt }}</time>
    </li>
} }}
</ul>

Template Includes

Include other templates to compose layouts:

<!-- layout.html -->
<!DOCTYPE html>
<html>
<head>
    <title>{{ title }}</title>
</head>
<body>
    {{ Include the <template: header.html>. }}

    <main>
        {{ content }}
    </main>

    {{ Include the <template: footer.html>. }}
</body>
</html>

Pass variables to included templates:

{{ Include the <template: user-card.html> with { user: currentUser, showEmail: true }. }}

ARO Statements in Templates

Execute ARO statements directly within templates:

<div class="stats">
{{ Compute the <count: length> from the <messages>. }}
<p>Total messages: {{ count }}</p>

{{ Retrieve the <latest> from the <messages: last>. }}
<p>Latest: {{ latest.text }}</p>
</div>

Project Structure

MyApp/
├── openapi.yaml
├── main.aro
├── api.aro
└── templates/
    ├── index.html
    ├── layout.html
    ├── partials/
    │   ├── header.html
    │   └── footer.html
    └── components/
        └── user-card.html

Complete Example

api.aro

(homePage: Dashboard API) {
    Retrieve the <messages> from the <message-repository>.
    Transform the <html> from the <template: dashboard.html>.
    Return an <OK: status> with <html>.
}

templates/dashboard.html

<!DOCTYPE html>
<html>
<head>
    <title>Dashboard</title>
    <style>
        .message { padding: 1rem; border-bottom: 1px solid #eee; }
        .empty { color: #888; font-style: italic; }
    </style>
</head>
<body>
    <h1>Recent Messages</h1>

    {{ when messages {
        <div class="messages">
        {{ for each msg in messages {
            <div class="message">
                <strong>{{ msg.message }}</strong>
                <time>{{ msg.createdAt }}</time>
            </div>
        } }}
        </div>
    } }}

    {{ when not messages {
        <p class="empty">No messages yet.</p>
    } }}
</body>
</html>

Template Syntax Reference

Syntax	Description
`{{ variable }}`	Output a variable value
`{{ obj.property }}`	Access nested property
`{{ when condition { } }}`	Conditional block
`{{ when not condition { } }}`	Negated conditional
`{{ for each x in list { } }}`	Iterate over collection
`{{ Action ... }}`	Execute ARO statement
`{{ Include the <template: path>. }}`	Include another template

← WebSockets | Repositories →