Mustache cheatsheet

Common syntax for writing mustache templates.

You can find the official documentation here.

{
  name: 'John',
  isFeatured: true,
  tags: ['Tag A', 'Tag B', 'Tag C'],
  categories: [
    { name: 'Category A' },
    { name: 'Category B' },
    { name: 'Category C' },
  ],
  image: 'https://website.com/path/image.jpg'
}

You can write your thumbnail template as such :

Basic tag

<h1>Hello {{name}} !!</h1>

Conditional rendering by truthy value

{{#isFeatured}}
  <p>isFeatured is truthy!</p>
{{/isFeatured}}

Conditional rendering by falsy value

{{^foobar}}
  <p>foobar is falsy!</p>
{{/foobar}}

Loop through a list of strings

<ul>
  {{#tags}}
    <li>{{.}}</li>
  {{/tags}}
</ul>

Loop through a list of objects

<ul>
  {{#categories}}
    <li>{{name}}</li>
  {{/categories}}
</ul>

Render raw values

This is useful for passing URLs in HTML attributes which contain special characters.

<img src="{{{imageUrl}}}" />