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

1

Look for the Template Engine function under Utility Functions.

2

Once you add the Template Engine to your function stack, click the ✏️ button in the panel to open the editor.

3

Take a tour of the editor and begin building your template.

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 %}

Data	Sample Output
[ { 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.

Filter	Description	Example	Result
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: &lt;script&gt;alert(&quot;XSS&quot;);&lt;/script&gt;

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 #}

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 %}