Mustache.js — Logic-Less Templates for JavaScript

Introduction

Mustache.js is the JavaScript implementation of the Mustache templating specification. It follows a logic-less philosophy, meaning templates contain only tags for variable interpolation, sections, and partials, with no embedded logic like conditionals or loops beyond what the data structure provides.

What Mustache.js Does

• Renders templates by replacing Mustache tags with values from a data object
• Supports sections for conditional rendering and iteration over arrays
• Allows template composition through partials and template inheritance
• Works in Node.js, browsers, and any JavaScript runtime
• Caches parsed templates for faster repeated rendering

Architecture Overview

Mustache.js parses template strings into an array of tokens using a scanner that identifies tags delimited by double curly braces. The parsed token tree is cached by template string, so subsequent renders of the same template skip parsing. A writer object walks the token tree and resolves values from a context stack that supports nested lookups.

Self-Hosting & Configuration

• Install via npm or include directly from a CDN in the browser
• Call Mustache.render(template, view, partials) for one-step rendering
• Use Mustache.parse(template) to pre-cache templates for repeated use
• Pass partials as a plain object mapping partial names to template strings
• Customize tag delimiters with the Set Delimiter tag if curly braces conflict

Key Features

• Spec-compliant implementation compatible with Mustache templates from any language
• Zero dependencies and small footprint suitable for embedding anywhere
• Template caching for efficient repeated rendering of the same template
• Partial support for composable, reusable template fragments
• Works isomorphically across server-side and client-side JavaScript

Comparison with Similar Tools

• Handlebars — extends Mustache syntax with helpers and block expressions; larger bundle size
• EJS — embedded JavaScript templates allowing arbitrary JS logic; not logic-less
• Nunjucks — Mozilla jinja2-inspired engine with filters, macros, and async support; more feature-rich
• Pug — indentation-based HTML templating with mixins; different syntax philosophy

FAQ

Q: Can Mustache.js handle asynchronous data? A: No, Mustache.render is synchronous. Resolve async data before passing it to the render call.

Q: Are lambdas supported in sections? A: Yes, if a section value is a function, Mustache.js calls it with the raw template text and a render function.

Q: Can I use Mustache.js with TypeScript? A: Yes, type definitions are available via @types/mustache on npm.

Q: How do I escape HTML in output? A: Double curly braces {{var}} auto-escape HTML. Use triple braces {{{var}}} for unescaped output.

Sources

• https://github.com/janl/mustache.js
• https://mustache.github.io/