Template Language Reference

You can use all operators from the Liquid template language.

1{{ error.type == 'error' }}

becomes

1true

This is particularly useful when creating HTML with boolean attributes:

1<input type="radio" checked="{{ error.type == 'error' }}"/>
2<input type="radio" checked="{{ error.type == 'warning' }}"/>

output:

1<input type="radio" checked/>
2<input type="radio"/>

1{{ true or false and false }}

1true

All standard Liquid template filters are supported:

All of these filters have been taken verbatim from Liquid Templates and are documented in more detail on the Liquid website.

where, map and sort support looking up a key deeper in objects while iterating through arrays. For instance

1{{ users | map: "custom.displayName" }}

Will return an array, where for each user, it finds a property named custom, and on that object, finds a property named displayName. If either of these properties are not defined, then the property is evaluated as nil.

This works similarly with where:

1{{ users | where: "custom.visibility", "visible" }}

This will return an array of users where custom.visibility evaluates to "visible".

And with sort:

1{{ users | sort: "custom.rank" }}

This returns the array of users, sorted by the value in custom.rank property.

• random_color - picks a random color (in CSS color format, eg #ff0088) for the given string. The same input always results in the same color.
• initials - extracts initials from a name. Supports Latin and Cyrillic scripts, returns the first character of the entire string for any other scripts. Eg "Alice von Smith" becomes "AvS", "Иван Лобов" becomes "ИЛ".
• filesize - converts a number of bytes into a human-readable file size string, eg "2 KB" or "251 MB"
• format_duration - converts a number of seconds into a MM:SS or HH:MM:SS string, eg "00:26" or "01:04:43"

In addition, four filters are supported that allow rudimentary logic inside expressions:

• is_falsy - if the input is falsy (= nil or false), return true
• is_truthy - if the input is truthy (= any other value), return true
• then - if input is truthy, return argument. otherwise return nil.
• else - if input is nil, return argument. otherwise return input.

Combined, then and else can be used as an inline conditional expression like this:

1{{ error.type === "error" | then: "Oh no!" | else: "Watch out" }}

output:

1Oh no!

is_falsy is particularly useful in t:if directives, which does not (currently) have a "not" operator:

1<!-- this will produce an error: -->
2<div t:if="{{ !user.custom.age }}">...</div>
3
4<!-- this will render the div if `age` is falsy (or does not exist) -->
5<div t:if="{{ user.custom.age | is_falsy }}">...</div>

You cannot emit or modify HTML tags using expressions, because then the template isn't valid HTML anymore. If you try to use expressions to create HTML tags, you'll instead see quoted text:

1{{ user.customCssUrl | prepend: "<link href='" | append: "'>" }}

output:

1<link href='myfile.css'>

You can use t:if, t:else-if and t:else to render different HTML based on expressions:

1<div t:if="{{ error.type == 'error' }}">
2    <h2>ERROR</h2>
3    <p>{{ error.message }}</p>
4</div>
5<div t:else-if="{{ error.message contains 'Watch out' }}">
6    <h3>Watch out</h3>
7    <p>{{ error.message }}</p>
8</div>
9<div t:else>
10    <p>{{ error.message }}</p>
11</div>

output:

1<div>
2    <h2>ERROR</h2>
3    <p>Sorry no can do</p>
4</div>

If an t:if expression returns a falsy value, the entire element along with all its children will be omitted from the output.

You can iterate over lists of data using t:for. Imagine a list of user data defined as follows:

1{
2    users: [
3        {id: "a", name: "Pete"},
4        {id: "b", name: "Alice"},
5        {id: "c", name: "Kerem"}
6    ]
7}

Display an element for each entry in users as follows:

1<p t:for="{{ user in users }}" t:key="{{ user.id }}">
2  {{ user.name }}
3</p>
4
5<!-- alternative syntax, if you need the index: -->
6<p t:for="{{ (user, index) in users }}" t:key="{{ index }}">
7  {{ index | plus: 1 }}. {{ user.name }}
8</p>

output:

1<p t:key="a">Pete</p>
2<p t:key="b">Alice</p>
3<p t:key="c">Kerem</p>
4
5<p t:key="a">1. Pete</p>
6<p t:key="b">2. Alice</p>
7<p t:key="c">3. Kerem</p>

To ensure that your app performs well, you must produce a t:key attribute with a unique value for each entry. Choose a value that doesn't usually change over time, such as an ID field or something like that.

1{
2    userMap: {
3        a: {name: "Pete"},
4        b: {name: "Alice"},
5        c: {name: "Kerem"}
6    }
7}

1<p t:for="{{ (user, id) in userMap }}" t:key="{{ id }}">
2  {{ user.name }}
3</p>

1<p t:key="a">Pete</p>
2<p t:key="b">Alice</p>
3<p t:key="c">Kerem</p>

1<span t:for="{{ user in userMap }}" t:key="{{ user.id }}">
2  {{ user.name }}<span t:if="{{ forloop.last == false }}">, </span>
3</span>

1<span>Pete<span>, </span></span>
2<span>Alice<span>, </span></span>
3<span>Kerem</span>

If an element has both an t:if and a t:for attribute, the t:if will be evaluated for every element of the list. This lets you make filtered lists:

1<p
2    t:for="{{ (user, index) in users }}"
3    t:if="{{ index > 0 }}" t:key="{{ user.id }}"
4>
5    {{user.name}}
6</p>

output:

1<p t:key="b">Alice</p>
2<p t:key="c">Kerem</p>

If you wish to reduce code duplication, or if you need to use t:if/t:else-if with complex expressions, you may want to define your own variables. This is done with the special <t:set/> element, which adds values to the current scope.

For example:

1<t:set shortBigName="{{user.name | upcase | truncate: 20}}"/>
2<div t:if="{{ shortBigName == 'ALICE'}}">
3    Hi Alice!
4</div>

Variables set using t:set inside a t:for are not available outside it. You can set multiple variables inside a single t:set element if you want. A t:set element produces no output.

1<t:set t:if="{{ user.age < 12 }}" age="young"/>
2<t:set t:else age="old"/>

1<t:set age="{{ user.age < 12 | then: 'young' | else: 'old' }}"/>

We tried hard not to re-invent the wheel. We imported the Liquid expression syntax verbatim, including all filters:

1{{ user.name | upcase | truncate: 20 }}

To be able to use boolean attributes such as disabled and checked easily, we added the ability to evaluate boolean expressions:

1<button disabled="{{ user.age < 16 }}">Watch scary move</button>

The above is not valid in Liquid templates.

1<h{{ section.level }}>
2    Section {{ section.index }}
3</h{{ section.level }}>

Vue.js is an excellent framework for building single-page web applications. It includes a template language which itself must be valid HTML, except for a few magic attributes. This not only makes it extremely easy to parse, it also guarantees that a template can be mapped one-on-one to a component structure. We took that idea verbatim from Vue.

We also cherry-picked core Vue directives, such as v-if and v-for, except that they're renamed to t:if and t:for. We took their exact syntax and semantics, except that expressions aren't JavaScript like in Vue templates, but Liquid-style expressions.

Like Vue templates and React's JSX syntax, we strip all whitespace between HTML elements and the start/end of the line, to avoid rendering dummy whitespace to the UI.

We plan to open-source this language in the near future and we plan to keep making it more powerful.