What are the differences between Mustache.js and Handlebars.js?

Question

Major differences I've seen are:

Handlebars adds #if, #unless, #with, and #each
Handlebars adds helpers
Handlebars templates are compiled (Mustache can be too)
Handlebars supports paths
Allows use of {{this}} in blocks (which outputs the current item's string value)
Handlebars.SafeString() (and maybe some other methods)
Handlebars is 2 to 7 times faster
Mustache supports inverted sections (i.e. if !x ...)

(Please correct me if I'm wrong with the above.)

Are there any other major differences I am missing?

Here is also a performance test comparing these two http://jsperf.com/dom-vs-innerhtml-based-templating/366 - there are better alternatives ;) — Mikko Ohtamaa, May 25 '12 at 17:19
I have written about this in depth and also show how you can do something similar for super basic javascript templates for dynamic content here: [http://stephentvedt.com/2013/09/23/html-templating-comparison/](http://stephentvedt.com/2013/09/23/html-templating-comparison/) — Stephen Tvedt, Apr 11 '14 at 20:45
I wonder who accepted the last edit (2014-10-16). It should have been an answer. — Walter Tross, Dec 09 '14 at 20:05
@StephenTvedt Have you looked at the HTML in your article? Is it supposed to be that difficult to read? — Noctis Skytower, Apr 17 '19 at 16:19
@NoctisSkytower Thank you for calling that out. An upgrade of a plugin must have caused this. I'll take a look at resolving this weekend! — Stephen Tvedt, Apr 18 '19 at 17:03
For `{{#-first}}` and `{{#-last}}` element we should replace the `-` character with `@` — Millas, Oct 01 '19 at 15:24

score 130 · Answer 1 · edited Aug 14 '14 at 15:31

130

You've pretty much nailed it, however Mustache templates can also be compiled.

Mustache is missing helpers and the more advanced blocks because it strives to be logicless. Handlebars' custom helpers can be very useful, but often end up introducing logic into your templates.

Mustache has many different compilers (JavaScript, Ruby, Python, C, etc.). Handlebars began in JavaScript, now there are projects like django-handlebars, handlebars.java, handlebars-ruby, lightncandy (PHP), and handlebars-objc.

edited Aug 14 '14 at 15:31

Guillaume Algis

10,000
5
39
68

answered Aug 01 '12 at 19:56

frontendbeauty

1,929
2
16
18

7

Don't forget Scandlebars, the Scala-Handlebars implementation! – Code Whisperer Feb 27 '14 at 15:14
1

The Ruby implementation requires a JavaScript interpreter, so it's really not a Ruby compiler. – eltiare Jul 15 '16 at 20:24

Faraz Kelhini · Answer 2 · 2015-11-30T15:17:14.973

75

Mustache pros:

Very popular choice with a large, active community.
Server side support in many languages, including Java.
Logic-less templates do a great job of forcing you to separate presentation from logic.
Clean syntax leads to templates that are easy to build, read, and maintain.

Mustache cons:

A little too logic-less: basic tasks (e.g. label alternate rows with different CSS classes) are difficult.
View logic is often pushed back to the server or implemented as a "lambda" (callable function).
For lambdas to work on client and server, you must write them in JavaScript.

Handlebars pros:

Logic-less templates do a great job of forcing you to separate presentation from logic.
Clean syntax leads to templates that are easy to build, read, and maintain.
Compiled rather than interpreted templates.
Better support for paths than mustache (ie, reaching deep into a context object).
Better support for global helpers than mustache.

Handlebars cons:

Requires server-side JavaScript to render on the server.

Source: The client-side templating throwdown: mustache, handlebars, dust.js, and more

edited Nov 30 '15 at 15:17

answered Dec 28 '13 at 10:21

Faraz Kelhini

3,717
30
38

39

Re Mustache con "A little too logic-less". I'd argue that alternating rows CSS should be done with a CSS pseudo class such as `tr:nth-child(even)` and `tr:nth-child(odd)` or `tr:nth-child(2n)`. Although that's just an example, I feel that (most of the time) if something is hard or awkward with Mustache, then you're doing it wrong; there's a better place for it. – IAmNaN Feb 27 '15 at 16:14
3

Handlebars has the server site implementation on java too https://github.com/jknack/handlebars.java – UR6LAD Nov 25 '15 at 10:59
2

@IAmNaN that's fair about nth-child.. unless you are writing html for an email, where you can only use inline css - making it very difficult to use nth selectors! – Dylan Watson Sep 15 '19 at 14:25

guypursey · Answer 3 · 2016-06-06T17:43:27.340

One subtle but significant difference is in the way the two libraries approach scope. Mustache will fall back to parent scope if it can't find a variable within the current context; Handlebars will return a blank string.

This is barely mentioned in the GitHub README, where there's one line for it:

Handlebars deviates from Mustache slightly in that it does not perform recursive lookup by default.

However, as noted there, there is a flag to make Handlebars behave in the same way as Mustache -- but it affects performance.

This has an effect on the way you can use # variables as conditionals.

For example in Mustache you can do this:

{{#variable}}<span class="text">{{variable}}</span>{{/variable}}

It basically means "if variable exists and is truthy, print a span with the variable in it". But in Handlebars, you would either have to:

use {{this}} instead
use a parent path, i.e., {{../variable}} to get back out to relevant scope
define a child variable value within the parent variable object

More details on this, if you want them, here.

score 25 · Answer 4 · edited Aug 17 '17 at 18:22

25

NOTE: This answer is outdated. It was true at the time it was posted, but no longer is.

Mustache has interpreters in many languages, while Handlebars is Javascript only.

edited Aug 17 '17 at 18:22

abalter

7,589
12
75
118

answered Jan 18 '14 at 17:09

KevBurnsJr

4,786
2
23
16

score 11 · Answer 5 · answered Aug 03 '16 at 11:50

Another difference between them is the size of the file:

Mustache.js has 9kb,
Handlebars.js has 86kb, or 18kb if using precompiled templates.

To see the performance benefits of Handlebars.js we must use precompiled templates.

Source: An Overview of JavaScript Templating Engines

score 9 · Answer 6 · answered Nov 19 '15 at 10:35

One more subtle difference is the treatment of falsy values in {{#property}}...{{/property}} blocks. Most mustache implementations will just obey JS falsiness here, not rendering the block if property is '' or '0'.

Handlebars will render the block for '' and 0, but not other falsy values. This can cause some trouble when migrating templates.

score 5 · Answer 7 · answered Nov 17 '16 at 21:59

I feel that one of the mentioned cons for "Handlebars" isnt' really valid anymore.

Handlebars.java now allows us to share the same template languages for both client and server which is a big win for large projects with 1000+ components that require serverside rendering for SEO

Take a look at https://github.com/jknack/handlebars.java

score 3 · Answer 8 · answered Jun 01 '15 at 18:31

3

—In addition to using "this" for handlebars, and the nested variable within variable block for mustache, you can also use the nested dot in a block for mustache:

    {{#variable}}<span class="text">{{.}}</span>{{/variable}}

answered Jun 01 '15 at 18:31

Regina Serrambana

41
2

What are the differences between Mustache.js and Handlebars.js?

8 Answers8

Linked