Differences with Mustache.js

MicroMustache achieves its faster speed and smaller size by dropping the following features from MustacheJS:

• Array iterations: {{# ...}} (you can still pass the result in a variable)
• Partials: {{> ...}}
• Inverted selection: {{^ ...}}
• Comments: {{! ...}}
• HTML sanitization: {{{ propertyName }}}

MustacheJS allows variables with empty names. All of these are valid in Mustache:

• {{}}
• {{ }}
• {{ }}

In MicroMustache, all of them are SyntaxErrors, just like JavaScript template literals (${ } throws SyntaxError: Unexpected token '}')

Besides MustacheJS accepts some other invalid parameters. For example:

mustache.render('{{a{{b}}', {
  a: 'foo',
  b: 'bar'
  'a{{b': 'wat?',
}) // gives "wat?"

MustacheJS has poor validation errors for some of the common typos in the templates:

mustache.render('Hi {{name}}{{name{{name}}!', { name: 'Alex' })
// Hi Alex!
// MicroMustache throws a SyntaxError for the unclosed template.

MustacheJS does not support the bracket notation:

const scope = {
  fruits: ['Apple', 'Orange', 'Avocado']
}

mustache.render(`My favourite: {{fruits[1]}}`, scope)
// "My favourite: "
micromustache.render(`My favourite: {{fruits[1]}}`, scope)
// "My favourite: Orange"

MustacheJS HTML-escapes all variables by default. In MicroMustache, we don't do any of that. It's effectively as you were using {{{name}}} instead of {{name}}. However, you can use the renderFn() to achieve the same effect using your own preferred HTML escaping library.

---

You can try them online:

• MustacheJS
• MicroMustache