> For the complete documentation index, see [llms.txt](https://azutopia.gitbook.io/azu/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://azutopia.gitbook.io/azu/templates/render-html-templates.md).
# Render HTML Templates
This guide shows you how to render HTML templates using Azu's Crinja template engine.
## Basic Template Rendering
Create an endpoint that renders a template:
```crystal
struct HomeEndpoint
include Azu::Endpoint(EmptyRequest, Azu::Response::Html)
include Azu::Templates::Renderable
get "/"
def call
view "home/index.html", {
title: "Welcome",
message: "Hello, World!"
}
end
end
```
## Template Location
Templates are stored in the `views` directory by default:
```
views/
├── layouts/
│ └── application.html
├── home/
│ └── index.html
├── users/
│ ├── index.html
│ ├── show.html
│ └── edit.html
└── shared/
├── _header.html
└── _footer.html
```
## Template Syntax
Crinja uses Jinja2-style syntax:
```html
{{ title }}
{{ message }}
{% if user %}
Welcome, {{ user.name }}!
{% else %}
Please log in.
{% endif %}
```
## Variables
Pass data to templates:
```crystal
def call
view "users/show.html", {
user: User.find(params["id"]),
posts: user.posts.recent.all,
is_admin: current_user.admin?
}
end
```
Access in template:
```html
```
## Loops
Iterate over collections:
```html
{% for item in items %}
{{ loop.index }}.{{ item.name }}
{% else %}
No items found.
{% endfor %}
```
Loop variables:
* `loop.index` - Current iteration (1-indexed)
* `loop.index0` - Current iteration (0-indexed)
* `loop.first` - True on first iteration
* `loop.last` - True on last iteration
* `loop.length` - Total number of items
## Conditionals
```html
{% if user.admin %}
Admin
{% elif user.moderator %}
Moderator
{% else %}
User
{% endif %}
```
## Filters
Transform values with filters:
```html
{{ name | upper }}
{{ description | truncate(100) }}
{{ price | round(2) }}
{{ created_at | date("%Y-%m-%d") }}
{{ content | escape }}
{{ list | join(", ") }}
{{ text | default("N/A") }}
```
## Layouts
Create a base layout:
```html
{% block title %}My App{% endblock %}
{% include "shared/_header.html" %}
{% block content %}{% endblock %}
```
Extend the layout:
```html
{% extends "layouts/application.html" %}
{% block title %}Users - My App{% endblock %}
{% block content %}
Users
{% for user in users %}
{{ user.name }}
{% endfor %}
{% endblock %}
```
## Partials
Include reusable components:
```html
{{ user.name }}
{{ user.bio }}
```
Use the partial:
```html
{% for user in users %}
{% include "shared/_user_card.html" with user=user %}
{% endfor %}
```
## Macros
Define reusable template functions:
```html
{% macro input(name, value="", type="text") %}
{% endmacro %}
{{ input("email", user.email, "email") }}
{{ input("password", type="password") }}
```
## Comments
```html
{# This is a comment and won't be rendered #}
{#
Multi-line
comment
#}
```
## Raw Output
Disable template processing:
```html
{% raw %}
This {{ will not }} be processed
{% endraw %}
```
## Custom Helpers
Add custom template functions:
```crystal
Azu::Templates.register_function("format_currency") do |args|
amount = args[0].as_f
"$#{sprintf("%.2f", amount)}"
end
```
Use in template:
```html
{{ format_currency(order.total) }}
```
## See Also
* [Enable Hot Reload](/azu/templates/enable-hot-reload.md)
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://azutopia.gitbook.io/azu/templates/render-html-templates.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.