Mustache (template system)

Mustacheis aweb template system.It is described as alogic-lesssystem because it lacks any explicitcontrol flowstatements, likeifandelseconditionalsorfor loops;however, both looping and conditional evaluation can be achieved using section tags processinglistsandanonymous functions(lambdas). It is named "Mustache" because of heavy use ofbraces,{ },that resemble a sidewaysmoustache.Mustache is used mainly for mobile and web applications.

Mustache

Original author(s)	Justin Hileman, Bruno Sutic,Chris Wanstrath,Ricardo Mendes, Bruno Michel
Initial release	2009(2009)
Stable release	4.2.0 / March 28, 2021(2021-03-28)
Repository	github.com/mustache/mustache
Type	Web template system
License	MIT
Website	mustache.github.io

Implementationsare available inActionScript,C++,Clojure,CoffeeScript,ColdFusion,Common Lisp,Crystal,D,Dart,Delphi,Elixir,Erlang,Fantom,Go,Haskell,Io,Java,JavaScript,Julia,Lua,.NET,Objective-C,OCaml,Perl,PHP,Pharo,Python,R,Racket,Raku,Ruby,Rust,Scala,Smalltalk,Swift,Tcl,CFEngine,andXQuery.

History and principles

Mustache-1was inspired by ctemplate and et,and began as aGitHubdistribution at the end of 2009. A first version of thetemplate enginewas implemented withRuby,runningYAMLtemplate texts. The (preserved) main principles were:

• Logic-less:no explicit control flow statements, all controldriven by data.
• Strongseparation of concerns:logic from presentation:it is impossible to embed application logic in the templates.

The input data can be aclassso that input data can be characterized as amodel–view–controller(MVC) view. The Mustachetemplatedoes nothing but reference methods in the (input data)view.All the logic, decisions, and code is contained in thisview,and all the markup (ex. outputXML) is contained in thetemplate.In amodel–view–presenter(MVP) context: input data is from MVP-presenter,and the Mustache template is the MVP-view.

Examples

Data

JSONdata is fed to Mustache templates, resulting in an output. Here is some example data:

{
"name":"World",
"greater than":">"
}

Variables

A simple Mustache template such as the one below, combined with the above data, would outputHello World.

Hello{{name}}

MustacheHTMLescapesdata by default. For example, the below would render as2 > 1.

2{{greaterthan}}1

To turn off escaping, use a&.The below would render as2 > 1.

2{{&greaterthan}}1

If statements and foreach loops

Below is a template with section tag. Whenxis aBooleanvalue, the section tag acts like anifconditional.Whenxis anarray,it acts like aforeach loop.

{{#x}}
Some text
{{/x}}

The special variable{{.}}refers to the current item when looping through an array, or the item checked in a conditional.

Including other templates

You can tell a Mustache template to load another Mustache template within it using the>symbol.

<form>
{{>textBox}}
{{>submitButton}}
</form>

Comments

Comments are indicated using an exclamation mark.

{{!comment goes here}}

Technical details

Syntax highlightingis available inAtom,Coda,Emacs,TextMate,VimandVisual Studio Code.

Mustache template support is built into manyweb application frameworks(ex.CakePHP).Support in JavaScript includes bothclient-sideprogramming with manyJavaScript librariesandAjax frameworkssuch asjQuery,DojoandYUI,as well asserver-side JavaScriptusingNode.jsandCommonJS.

Specification and implementations

There are manyMustache Engineimplementations available, and all of them meet a commonformal specification(see external links), that for final users results in the common syntax.

As of March 2011, the last SPEC_VERSION was 1.1.2.

AllMustache Engines,in the v1.X architecture, have arendermethod, aMustache_Compilerclass and aParserclass.

Variations and derivatives

Mustache inspired numerous JavaScript template libraries which forked from the original simplicity to add certain functionality or use.

Handlebars

Handlebars.jsis self-described as:

Handlebars.js is an extension to the Mustache templating language created by Chris Wanstrath. Handlebars.js and Mustache are both logicless templating languages that keep the view and the code separated like we all know they should be.

Handlebars differs from its predecessor in that, withinBlock Expressions(similar to sections in Mustache),Helpersallow custom function through explicit user-written code for that block.

See also

• JavaScript framework
• JavaScript library

External links

• Official website
• MustacheonGitHub
• Mustache syntax
• Mustache spec