{{Short description|Template system for web pages}} {{Primary sources|date=July 2019}} {{Infobox software | name = Mustache | logo = Mustache-js-logo.png | logo size = | screenshot = | caption = | author = Justin Hileman, Bruno Sutic, Chris Wanstrath, Ricardo Mendes, Bruno Michel | developer = | released = {{Start date and age|2009}} | latest release version = 4.2.0 | latest release date = {{Start date and age|2021|03|28}} | latest preview version = | latest preview date = | operating system = | platform = | programming language = JavaScript | genre = Web template system | license = MIT | website = {{URL|mustache.github.io}} }}
'''Mustache''' is a web template system. It is described as a ''logic-less'' system because it lacks any explicit control flow statements, like <code>if</code> and <code>else</code> conditionals or for loops; however, both looping and conditional evaluation can be achieved using section tags processing lists and anonymous functions (lambdas). It is named "Mustache" because of heavy use of braces, <code>{ }</code>, that resemble a sideways moustache. Mustache is used mainly for mobile and web applications.<ref name="book1">{{Cite book |last1=Avola |first1=G. |last2=Raasch |first2=J. |date=2012 |title=Smashing Mobile Web Development |isbn=9781118348123}}</ref><ref>{{Cite report |last=Cady |first=J. |year=2011 |title=Functional Programming Applied to Web Development Templates: MS Project Report |url=http://www.cs.rit.edu/~rlaz/ms_seminarW2011_2012/20103_cady_msproject.pdf}}</ref>
Implementations are available in ActionScript, 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, and XQuery.
== History and principles == ''Mustache-1'' was inspired by ctemplate and et,<ref name="historic">{{Cite web|url=https://github.com/defunkt/mustache/blob/master/README.md|title=Mustache|website=GitHub|date=19 April 2022}}</ref> and began as a GitHub distribution at the end of 2009. A first version of the template engine was implemented with Ruby, running YAML template texts. The (preserved) main principles were: * ''Logic-less'': no explicit control flow statements, all control driven by data. * Strong ''separation of concerns: logic from presentation'': it is impossible to embed application logic in the templates.
The input data can be a class so that input data can be characterized as a model–view–controller (MVC) view. The Mustache ''template'' does nothing but reference methods in the (input data) ''view''.<ref name="historic" /> All the logic, decisions, and code is contained in this ''view'', and all the markup (ex. output XML) is contained in the ''template''. In a model–view–presenter (MVP) context: input data is from MVP-''presenter'', and the Mustache template is the MVP-''view''.
== Examples ==
=== Data === JSON data is fed to Mustache templates, resulting in an output. Here is some example data:<syntaxhighlight lang="json"> { "name": "World", "greater than": ">" } </syntaxhighlight>
=== Variables === A simple Mustache template such as the one below, combined with the above data, would output <code>Hello World</code>.
<syntaxhighlight lang=handlebars> Hello {{name}} </syntaxhighlight>Mustache HTML escapes data by default. For example, the below would render as <code>2 &gt; 1</code>.<syntaxhighlight lang="handlebars"> 2 {{greater than}} 1 </syntaxhighlight>To turn off escaping, use a <code>&</code>. The below would render as <code>2 > 1</code>.<syntaxhighlight lang="handlebars"> 2 {{&greater than}} 1 </syntaxhighlight>
=== If statements and foreach loops === Below is a template with section tag. When <code>x</code> is a Boolean value, the section tag acts like an ''if'' conditional. When <code>x</code> is an array, it acts like a foreach loop.
<syntaxhighlight lang=handlebars> {{#x}} Some text {{/x}} </syntaxhighlight>The special variable <code><nowiki>{{.}}</nowiki></code> 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 <code>></code> symbol.<syntaxhighlight lang="handlebars"> <form> {{>textBox}} {{>submitButton}} </form> </syntaxhighlight>
=== Comments === Comments are indicated using an exclamation mark.<syntaxhighlight lang="handlebars"> {{!comment goes here}} </syntaxhighlight>
== Technical details == Syntax highlighting is available in Atom, Coda, Emacs,<ref name="webmode">{{cite web |url=http://web-mode.org/ |title=Home |website=web-mode.org}}</ref> TextMate, Vim and Visual Studio Code.<ref>{{cite web |url=https://marketplace.visualstudio.com/items?itemName=dawhite.mustache |title=Mustache - Visual Studio Marketplace |publisher=Microsoft |website=Visualstudio.com |date=August 18, 2019}}</ref>
Mustache template support is built into many web application frameworks (ex. CakePHP){{Citation needed|date=July 2019}}. Support in JavaScript includes both client-side programming with many JavaScript libraries and Ajax frameworks such as jQuery, Dojo and YUI, as well as server-side JavaScript using Node.js and CommonJS.
=== Specification and implementations === There are many ''Mustache Engine'' implementations available, and all of them meet a common formal specification (see external links), that for final users results in the common syntax.
As of May 2026, the last SPEC_VERSION was 1.4.3.<ref>{{cite web |url= https://github.com/mustache/spec/releases |title= Releases |publisher=GitHub |website=Mustache |date=May 10, 2026}}</ref>
== Variations and derivatives == Mustache inspired numerous JavaScript template libraries which forked from the original simplicity to add certain functionality or use.{{Citation needed|date=July 2019}}
=== Handlebars === Handlebars.js<ref>{{cite web |last=Katz |first=Yehuda |year=2011–2019 |url=https://handlebarsjs.com/ |title=Handlebars: Minimal templating on steroids |website=Handlebarsjs.com}}</ref> is self-described as: {{Blockquote |text=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.<ref>{{cite web |last=wykatz |first=NPM |title=html+handlebars NPM |url=https://www.npmjs.com/package/handlebars |website=html+handlebars NPM package details |publisher=Node Package Manager |access-date=20 December 2016}}</ref>}}
Handlebars differs from its predecessor in that, within ''Block Expressions'' (similar to sections in Mustache), ''Helpers'' allow custom function through explicit user-written code for that block.
== See also == * JavaScript framework * JavaScript library
== References == {{Reflist}}
== External links == * {{Official website|mustache.github.io}} * {{GitHub|mustache|Mustache}}
{{JS templating}}
Category:Free computer libraries Category:Template engines Category:JavaScript libraries