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 h

Answer 1

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

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

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 6

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