Mustache templates

Mustache syntax overview.

If you are not familiar with Mustache, we recommend you to start reading the super simple Mustache’s syntax and build templates. Here is a basic example:

template.mustache

<h1>{{header}}</h1>
{{#bug}}
{{/bug}}

{{#items}}
  {{#first}}
    <li><strong>{{name}}</strong></li>
  {{/first}}
  {{#link}}
    <li><a href="{{url}}">{{name}}</a></li>
  {{/link}}
{{/items}}

{{#empty}}
  <p>The list is empty.</p>
{{/empty}}

With the data

{
	"header": "Colors",
	"items": [
      {"name": "red", "first": true, "url": "#Red"},
      {"name": "green", "link": true, "url": "#Green"},
      {"name": "blue", "link": true, "url": "#Blue"}
	],
	"empty": false
}

Produces the following HTML when rendered:

<h1>Colors</h1>
<li><strong>red</strong></li>
<li><a href="#Green">green</a></li>
<li><a href="#Blue">blue</a></li>

Couldn’t be more easy!

Continue to Hot reload →

← Back to Running the generator

Star

Table of Contents

Mustache templates