Skip to content

Working with Variables

Variables let you create templates that generate personalized documents. Instead of hardcoding values, you use placeholders that get replaced with real data at render time.

The Basics

Variables use double curly braces: {{variableName}}

When you render a template, you send JSON data. TemplateTo replaces each variable with the corresponding value from your data.

Template: 

Hello, {{name}}!

Data: 

{
  "name": "Alice"
}

Result: 

Hello, Alice!

Adding Test Data

In the template editor, paste your JSON into the Template Data panel to test your template.

JSON data editor

Sample JSON Data 
{
  "customerInvoice": {
    "name": "Lynx",
    "total": "123",
    "lines": [
      { "sku": "qwe123", "qnt": "2", "name": "Fragrance", "total": "82" },
      { "sku": "qwe124", "qnt": "1", "name": "Fragrance Bold", "total": "41" }
    ],
    "date": "15/11/23"
  },
  "email": "[email protected]",
  "country": "UK"
}

For simple key-value data, use the Create button to add variables without writing JSON manually.

Create Template data

Using Variables in Templates

From the Editor

Use the variable dropdown to insert variables without typing:

variables from dropdown

By Typing

Type the variable name directly in your HTML:

<p>Customer: {{customerInvoice.name}}</p>
<p>Email: {{email}}</p>

Accessing Nested Data

Use dot notation to access nested properties:

<!-- Access nested object properties -->
{{customerInvoice.name}}
{{customerInvoice.total}}
{{customerInvoice.date}}

For more complex data access patterns including arrays, see Data Binding.

Liquid Templating

TemplateTo uses the Liquid templating engine. This gives you:

  • Variables: {{variable}}
  • Logic: {% if condition %}...{% endif %}
  • Loops: {% for item in collection %}...{% endfor %}
  • Filters: {{value | filter}}

See Liquid Reference for complete syntax documentation.

Computed Variables

For complex transformations, create Liquid Variables in the editor:

Liquid variable editing

  1. Navigate to the Data tab in the editor
  2. Give your variable a name
  3. Write your Liquid expression

Variable Order

If one variable uses another, define the dependency first. Variables are processed in order.

Example: Create a computed variable called formattedDate: 

{{ customerInvoice.date | parse_date | date: "%e %B %Y" }}

Then use it in your template: 

<p>Invoice Date: {{formattedDate}}</p>

Next Steps