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

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?

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

Solution 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

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