Skip to content

Tool Template

The end result of every tool is to output HTML content into your email or landing page. This is where the tool template comes in. We use Nunjucks templating engine which is quite rich and powerful in terms of features.

It has all the regular features you expect from a templating engine, for example:


Variables

A variable looks up a value from the tool properties. If you wanted to simply display a variable, you would do:

{{ username }}

This looks up username from the tool properties and displays it.

Another example would be to display text in a color picked by the user...

<div style="color: {{color}};">
  Hello World
</div>

This would look up the property with name color. You can use the color picker property editor to make it easier for the user to pick a color.


Passing Data to Template

Some tools may need data directly from your application to render dynamic content. You can pass this data to the tool's template directly.

Replace SLUG with your tool's slug. For example, if your tool's slug is video, you will use custom#video.

unlayer.init({
  ...
  tools: {
    'custom#SLUG': {
      data: {
        name: 'John Doe',
        age: '27',
        photo: 'http://via.placeholder.com/350x150'
      }
    }
  }
});

This data will be available in the template under the data variable. For example, {{ data.name }}, {{ data.age }} and {{ data.photo }}.


If Then Else

{% if hungry %}
  I am hungry
{% elseif tired %}
  I am tired
{% else %}
  I am good!
{% endif %}

For Loops

<ul>
{% for item in items %}
  <li>{{ item.title }}</li>
{% else %}
  <li>This would display if the 'item' collection were empty</li>
{% endfor %}
</ul>

Filters

Filters are essentially functions that can be applied to variables. They are called with a pipe operator (|) and can take arguments.

{{ foo | title }}
{{ foo | join(",") }}
{{ foo | replace("foo", "bar") | capitalize }}

Nunjucks Documentation

There's many more powerful features in Nunjucks. Check the Nunjucks Documentation for more information.