Template Engine
Quick Summary
The Template Engine, powered by Twig, is used to manipulate and dynamically generate large blocks of text or code with your own data, such as records from your Xano database, or from inputs sent to your APIs.
It's great for helping generate things like AI prompts, HTML, and other more large-format data without messing around with a bulk of separate functions to do so.
What is the Template Engine?
At its core, think of the Template Engine as text replacement and manipulation of the future. It is designed to give you a simple syntax to quickly manipulate large text strings with dynamic data, such as...
AI Prompts
HTML
JSON
SQL queries
The template engine is powered by Twig, which you can learn more about here.
When should I use the Template Engine instead of other text filters?
You should stick with filters like replace or sprintf if you're manipulating short strings of text, such as:
Replacing a name inside of a string like "Hello, [first_name] [last_name]"
Dynamically providing a price for a single product
The Template Engine, however, is useful for content templates where:
The template will be edited by non-developers
The data structure is complex with nested objects
You need to include conditional sections
Data formatting (like dates) needs to be consistent
Templates might be reused with different data sources
If you're doing dynamic replacement over a longer block of text, such as the example below, Template Engine will make this much easier for you.
Write a personalized email to {{ $customer.firstName }} {{ $customer.lastName }} about their recent {{ $order.type }} purchase.
Include:
- Reference to their purchase history (they've ordered {{ $customer.purchaseCount }} times)
- Mention that their {{ $order.item }} will be delivered on {{ $order.deliveryDate|date('F j, Y') }}
- If {{ $customer.isVIP }}, offer them a {{ $promotions.VIPDiscount }}% discount on their next purchase
- Thank them for being a customer since {{ $customer.joinDate|date('Y') }}
Sign off with the name of their account manager: {{ $accountManager.name }}Using the Template Engine
Template Syntax
Variables
Variables are wrapped in {{ curly braces }}, like this, and begin with a $ character. In the below example, we're getting the name from an object stored in the user1 variable.
Hi, {{ $user1.name }}Reference items in an array by using the item index.
Hi, {{ $users.0.name }}Conditionals
Conditionals are helpful if you want to dynamically determine what the end result of your template looks like outside of the actual data. For example, maybe you want VIP users to have a different greeting than regular users.
Conditionals are wrapped in {% and %} and have support for else and else if
{% if $user1.vip == true %}
Hey, {{ $user1.name }}! Thanks for being a part of our VIP program.
{% else %}
Hey, {{ $user1.name }}! Thanks for reading.
{% endif %}In the above example, for this user:
{ "name" == "Chris", "vip" == true }...the result would be:
Hey, Chris! Thanks for being a part of our VIP program.
{% if $score >== 90 %}
Your grade is an A
{% elseif $score >== 80 %}
Your grade is a B
{% elseif $score >== 70 %}
Your grade is a C
{% else %}
Your grade is an F
{% endif %}In the above example, for this score:
score = 85...the result would be:
Your grade is a B
Loops
You can use loops to populate lists of data without having to write out separate lines for each item, or knowing how many items you'll need to populate.
{% for item in $order.items %}
- {{ item.quantity }}x {{ item.name }} at ${{ item.price }} each
{% endfor %}[
{
quantity: 2,
name: "Blue T-shirt",
price: 19.99
},
{
quantity: 1,
name: "Denim jeans",
price: 59.99
},
{
quantity: 3,
name: "Cotton Socks",
price: 4.99
}
]2x Blue T-shirt at $19.99 each
1x Denim Jeans at $59.99 each
3x Cotton Socks at $4.99 each
You can also use an Else statement at the end of your For loop to determine what action to take if no items are found. In the next example, if $list contains no items, the template will return No items found.
{% for item in $list %}
{{ item }}
{% else %}
No items found.
{% endfor %}Filters
You can use Twig's built in filters, similar to our own, to transform or manipulate data as part of the template.
The below list is some of the most essential filters used in Twig, but it is not all of them. You can review the entire list here.
upper
Converts string to uppercase
{{ $user.name|upper }}
When $user.name is "John Smith"
"JOHN SMITH"
lower
Converts string to lowercase
{{ $user.name|lower }}
When $user.name is "John Smith"
"john smith"
trim
Removes whitespace from the beginning and end of a string
{{ $user.input|trim }}
When $user.input is " hello "
"hello"
join
Joins array elements into a string with a delimiter
{{ $user.tags|join(', ') }}
When $user.tags is ["php", "twig", "web"]
"php, twig, web"
default
Provides a fallback value if the variable is null, empty, or undefined
{{ $user.middleName|default('No middle name') }}
When $user.middleName is null
"No middle name"
number_format
Formats numbers with grouped thousands and decimal points
{{ $product.price|number_format(2, '.', ',') }}
When $product.price is 1234.56
"1,234.56"
shuffle
Randomly shuffles an array
{{ $user.items|shuffle }}
When $user.items is ["a", "b", "c"]
Random order like: ["c", "a", "b"]
date
Formats dates using PHP's date syntax
{{ $user.createdAt|date("F j, Y") }}
When $user.createdAt is "2023-12-25"
"December 25, 2023"
Escape Filter (e)
The escape filter is used to format text using specifications designated by the destination, such as a URL that only allows certain characters to remain valid.
When you use e by itself without specifying a format, it typically defaults to HTML escaping. This means it will convert characters like <, >, &, ", and ' to their HTML-safe equivalents.
When you specify a format (like e('html'), e('js'), e('url'), etc.), you're explicitly telling the Template Engine how to escape the content for a specific context, which can provide more precise protection. We'd recommend always specifying the format, just to be safe.
HTML Escaping
{% set $user_input = '<script>alert("XSS");</script>' %}
{{ $user_input|e('html') }}
Outputs: <script>alert("XSS");</script>JavaScript Escaping
{% set $js_string = 'Hello "world"! \n New line' %}
{{ $js_string|e('js') }}
{# Outputs: Hello \"world\"! \\n New line #}URL Escaping
{% set $search_query = 'hello world & special chars' %}
{{ $search_query|e('url') }}
{# Outputs: hello+world+%26+special+chars #}CSS Escaping
{% set $css_value = 'expression(alert("XSS"))' %}
{{ $css_value|e('css') }}
{# Outputs: expression\28 alert\28 "XSS"\29 \29 #}Comments
You can insert comments into your templates by wrapping them in {# and #}. They won't appear in your final template.
{# This is a hidden comment #}You can check out some examples of the Template Engine in real-world scenarios here: Sample Templates.
Sample Templates
Use these sample templates to get started with templates quickly and understand what real-world use cases might look like.
AI Prompting Template
Context: A template for generating structured AI prompts with dynamic instructions, constraints, and example inputs/outputs.
You are an AI assistant tasked with {{ $task.description }}.
Context:
{% if $context %}
{{ $context }}
{% else %}
*No additional context provided*
{% endif %}
Instructions:
1. {{ $task.primaryInstruction }}
{% for $step in $task.additionalSteps %}
{{ loop.index + 1 }}. {{ $step }}
{% endfor %}
Constraints:
{% for $constraint in $task.constraints %}
- {{ $constraint }}
{% endfor %}
Output Format:
{{ $output.format }}
Example Input:
{{ $example.input }}
Example Expected Output:
{{ $example.output }}HTML Template
Context: A product listing page for an e-commerce website, showing personalized content based on user authentication and product availability.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{ $page.title }}</title>
</head>
<body>
<header>
<h1>Welcome, {{ $user.name }}!</h1>
</header>
<nav>
{% if $user.isLoggedIn %}
<a href="/profile">My Profile</a>
<a href="/logout">Logout</a>
{% else %}
<a href="/login">Login</a>
<a href="/register">Register</a>
{% endif %}
</nav>
<main>
{% for $item in $products %}
<div class="product">
<h2>{{ $item.name }}</h2>
<p>Price: ${{ $item.price|number_format(2) }}</p>
{% if $item.inStock %}
<button>Add to Cart</button>
{% else %}
<span class="out-of-stock">Out of Stock</span>
{% endif %}
</div>
{% endfor %}
</main>
</body>
</html>Hint
Use an HTML template in combination with our HTTP Header function to serve HTML directly using your APIs by setting the header Content-Type: text/html; charset=utf-8
SQL Query Template
Context: A flexible database query generator that adapts to user roles and filtering requirements for a multi-tenant application.
PREVENTING SQL INJECTION ATTACKS
Xano offers some filters to help ensure that any dynamic / user input is not parsed in a way that might harm your database or cause other unintended consequences.
Make sure to process your inputs before they are used in any SQL queries with the appropriate filter.
These filters are sql_alias and sql_esc
SELECT
id,
{{ $select_columns|join(', ') }}
FROM {{ $table_name }}
WHERE
{% if $user.role == 'admin' %}
1=1
{% else %}
organization_id = {{ $user.organization_id }}
{% endif %}
{% if $filters.status %}
AND status = '{{ $filters.status }}'
{% endif %}
ORDER BY
{% if $sort_by %}
{{ $sort_by }} {{ $sort_direction|default('ASC') }}
{% else %}
created_at DESC
{% endif %}
LIMIT {{ $limit|default(10) }}Hint
Use an SQL template in combination with our Direct Database Query function to dynamically generate and use SQL queries against your Xano database. You can also use our External Database Query functions the same way.
Just type ?:raw into the query editor and point the statement argument to the output of your Template Engine function.
Markdown Template
Context: A Twig template for generating raw Markdown code with dynamic content and metadata.
{% if $document.title %}# {{ $document.title }}{% endif %}
{% if $author.name %}Author: {{ $author.name }}{% endif %}
{% if $document.date %}Date: {{ $document.date|date('Y-m-d') }}{% endif %}
## Overview
{% if $document.summary %}
{{ $document.summary }}
{% else %}
*No summary available*
{% endif %}
### Key Points
{% for $point in $document.keyPoints %}
- {{ $point }}
{% endfor %}
## Content
{{ $document.content }}
{% if $document.tags %}
### Tags
{% for $tag in $document.tags %}
`{{ $tag }}`{% if not loop.last %}, {% endif %}
{% endfor %}
{% endif %}
{% if $document.footnotes %}
## Footnotes
{% for $footnote in $document.footnotes %}
[^{{ loop.index }}]: {{ $footnote }}
{% endfor %}
{% endif %}
Email Template
Context: A flexible email template system that supports personalized messaging, dynamic sections, and optional signatures.
{% if $document.title %}# {{ $document.title }}{% endif %}
{% if $author.name %}Author: {{ $author.name }}{% endif %}
{% if $document.date %}Date: {{ $document.date|date('Y-m-d') }}{% endif %}
## Overview
{% if $document.summary %}
{{ $document.summary }}
{% else %}
*No summary available*
{% endif %}
### Key Points
{% for $point in $document.keyPoints %}
- {{ $point }}
{% endfor %}
## Content
{{ $document.content }}
{% if $document.tags %}
### Tags
{% for $tag in $document.tags %}
`{{ $tag }}`{% if not loop.last %}, {% endif %}
{% endfor %}
{% endif %}
{% if $document.footnotes %}
## Footnotes
{% for $footnote in $document.footnotes %}
[^{{ loop.index }}]: {{ $footnote }}
{% endfor %}
{% endif %}Last updated
Was this helpful?