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?

Answer 1

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.

Answer 2

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

Answer 3

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.

Answer 4

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.

Answer 5

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

Answer 6

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.

Answer 7

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

Answer 8

—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}}