Mustache is a logic-less template engine widely used for generating HTML pages and dynamic content. The syntax consists of a minimal set of tags that handle variable interpolation, conditional rendering, loops, and partial templates.

Syntax Overview

{{variable}}        - Variable interpolation
{{#section}}{{/section}}  - Section/block rendering
{{^section}}{{/section}}  - Inverted section
{{.}}               - Current context reference
{{>partial}}        - Partial template inclusion
{{{unescaped}}}     - Unescaped HTML output
{{!comment}}        - Comments

Basic Usage Example

var viewModel = {
    userName: " Alice ",
    profile: {
        gender: " female ",
        years: 28,
        hobby: " painting "
    },
    courses: ["Chinese", "English", "Chemistry", "Biology"]
};

var template = '<div class="user-info">{{userName}}</div>';
var result = Mustache.render(template, viewModel);

Varible Interpolation: {{variable}}

Double-brace syntax outputs the value corresponding to the specified key. Leading and trailing whitespace within the value is preserved.

var template = '{{userName}}';
var output = Mustache.render(template, viewModel);
// Result:
//  Alice 

Sections: {{#section}}{{/section}}

Sections begin with # and end with /. They control rendering based on the data type and value of the referenced key.

Rendering Object Values:

var template = '{{#profile}}<span>{{gender}}, {{years}}, {{hobby}}</span>{{/profile}}';
var output = Mustache.render(template, viewModel);
// Result:
// <span> female, 28, painting</span>

Rendering Arrays:

var template = '{{#courses}}<li>{{.}}</li>{{/courses}}';
var output = Mustache.render(template, viewModel);
// Result:
// <li>Chinese</li><li>English</li><li>Chemistry</li><li>Biology</li>

Boolean False Values:

When a section's value is null, undefined, false, or an empty array, the content within the section block is not rendered.

Inverted Sections: {{^section}}{{/section}}

Inverted sections render when the referenced key is null, undefined, false, or does not exist—essentially the opposite behavior of standard sections.

var template = '{{^missingKey}}<p>Default fallback content</p>{{/missingKey}}';
var output = Mustache.render(template, viewModel);
// Result:
// <p>Default fallback content</p>

Current Context: {{.}}

The dot notation references the current context object. In array iterasions, {{.}} outputs the current array element directly.

var template = '{{#courses}}<div>{{.}}</div>{{/courses}}';
var output = Mustache.render(template, viewModel);
// Result:
// <div>Chinese</div>
// <div>English</div>
// <div>Chemistry</div>
// <div>Biology</div>

Partial Templates: {{>partial}}

Partials enable template composition by including other template files. This supports modular template design for complex structures.

var mainTemplate = '<article><h2>{{title}}</h2><ul>{{>itemList}}</ul></article>';

var partials = {
    itemList: '{{#items}}<li>{{name}}</li>{{/items}}'
};

var viewData = {
    title: "My Collection",
    items: [
        { name: "Item One" },
        { name: "Item Two" },
        { name: "Item Three" }
    ]
};

var result = Mustache.render(mainTemplate, viewData, partials);
// Result:
// <article>
//   <h2>My Collection</h2>
//   <ul>
//     <li>Item One</li>
//     <li>Item Two</li>
//     <li>Item Three</li>
//   </ul>
// </article>

Unescaped Output: {{{variable}}}

Triple-brace syntax outputs values without HTML entity encoding. Use this when the content contains HTML markup that should be rendered as-is.

var markup = {
    htmlContent: "<strong>Bold</strong> and <em>Italic</em>"
};

var template = '<div>{{{htmlContent}}}</div>';
var output = Mustache.render(template, markup);
// Result:
// <div><strong>Bold</strong> and <em>Italic</em></div>

Standard interpolation escapes HTML characters:

var template = '<div>{{htmlContent}}</div>';
// Result:
// <div>&lt;strong&gt;Bold&lt;/strong&gt; and &lt;em&gt;Italic&lt;/em&gt;</div>

Comments: {{!comment}}

Comments are removed entirely during rendering and do not appear in the output.

var template = '{{! This comment will not appear }}{{title}}';
// Output contains only the title value

Key Considerations

• Template keys must match the data object structure exactly
• Whitespace handling differs between single and triple brace syntax
• Sections recursively change the context scope
• Partials require explicit registration in the render options