Templating Rules

Render context

A render context is a JSON structure that includes information about the current context. For example a single post could look like this:

   "title": "My post title",
   "link": "https://mysite.com/link-to-my-post" 

Content interpolation

To inject content from a render context into your template, use the following syntax: {{title}}

For example:

<a class="post" href="{{link}}">
   <h2 class="post__title">{{title}}<h2>


To render content when a specific condition is met, you can use the following syntax:

<a href="{{homeUrl}}" class="header__home-link">
   <!-- render the following if the logoPath property evaluates truthy -->
      <img src="{{logoPath}}" class="header__home-link-image">
   <!-- render the following if the logoPath property evalutes falsy -->
      <span class="header__home-link-title">{{projectName}}</span>   

This sample code would render the project's logo if a logo has been uploaded, otherwise the project name would be rendered.

The following conditions evaluate falsy:

  • empty array,

  • false,

  • undefined property.

Inline conditions

Inline conditions can be used to conditionally render specific content within a single line of code (for example a class name). To do this you can use {{# myCondition : render-if-true #}}, or the negated condition {{!# myCondition : render-if-false #!}}:

<article class="post {{!# image : post--no-img #!}}">
   <!-- post content ... -->


Iterating over an array is done in the same way as defining conditions. Let's consider the following array of posts that should be rendered:

   "posts": [
      {"title": "My post title", link: "https://mysite.com/post-1"},
      {"title": "My post 2 title", link: "https://mysite.com/post-2"}
      {"title": "My post 3 title", link: "https://mysite.com/post-3"}

To render those in a list, you can use the following template code:

<ul class="post-list">
      <li class="post-list__entry"><a href="{{link}}">{{title}}</a></li>

To query a post at a specific index, you can use {{#posts[0]}}, for example:

<article class="featured__post">{{title}}</article>

To iterate over a part of an array, you can specify the lower and the upper index (e.g. {{#posts[1-5]}} — this would iterate from the second to the sixth posts). You can also omit the start or the end index, e.g. {{#posts[1-]}} would start at the second post and would iterate until the end of the array is reached.

Querying object properties

To query a specific property of an object, you can use the following syntax:


For example, to render the contact information you could use the following template:

<address itemscope="" itemtype="http://schema.org/Organization">
   <span itemprop="name">
   <div itemprop="address" itemscope="" itemtype="http://schema.org/PostalAddress">
   <span itemprop="streetAddress">{{contact.street}}</span>
      <span itemprop="postalCode">{{contact.zip}}</span> 
      <span itemprop="addressLocality">{{contact.location}}</span>
   <span itemprop="email">
      <a href="mailto:{{contact.email}}">{{contact.email}}</a>