Handlebars.js vs Mustache vs Pug

Overview

Mustache

Stacks2.4K

Followers415

Votes50

GitHub Stars16.7K

Forks2.4K

Handlebars.js

Stacks8.3K

Followers3.2K

Votes308

Pug

Stacks1.3K

Followers1.2K

Votes467

Handlebars.js vs Mustache vs Pug: What are the differences?

Introduction

In website development, there are several template engines available to streamline the process. Three popular template engines are Handlebars.js, Mustache, and Pug. In this analysis, we will highlight the key differences between these template engines and provide a concise summary.

Syntax and readability: Handlebars.js uses a simple and intuitive syntax, resembling HTML, making it easy to read and understand. Mustache also follows a similar syntax but lacks certain features like conditionals. On the other hand, Pug uses a combination of indentation and tags, which can be initially confusing but offers concise and readable code once familiarized.
Conditional logic: Handlebars.js provides built-in support for conditional statements, allowing developers to incorporate logic within the templates. Mustache, however, lacks this feature and only focuses on variable substitution. Pug, while having access to JavaScript logic, utilizes a different syntax for conditionals, requiring additional learning to work with.
Loop iteration: Both Handlebars.js and Mustache allow for loop iteration through arrays and objects. Handlebars.js provides more flexibility and features, such as nested loops, custom helpers, and partials. Mustache, however, has simpler syntax for loop iteration but lacks these additional functionalities. Pug, being focused on indentation-based structure, does not have specific syntax for loop iteration, which may require using JavaScript loops directly.
Partial templates: Handlebars.js and Mustache both support partial templates, which allow developers to reuse code across the application. This provides modularity and avoids code duplication. However, Pug, being indentation-based, does not have a dedicated partial template feature. Instead, it offers mixin functionality, which can achieve a similar result but requires a different approach.
Whitespace handling: Handlebars.js and Pug handle whitespaces differently. Handlebars.js preserves all whitespaces in the HTML output, which can sometimes result in unwanted spaces. Pug, on the other hand, removes unnecessary whitespaces by default, resulting in cleaner HTML output. Mustache, being a logic-less template engine, does not have any specific handling for whitespaces.
JavaScript usage: Handlebars.js and Pug allow developers to execute JavaScript code within the templates, providing greater flexibility for complex logic. Mustache, being a logic-less template engine, does not directly support JavaScript execution and focuses on variable substitution.

In Summary, Handlebars.js and Mustache offer more flexibility and features for conditional logic, loop iteration, and partial templates compared to Pug. However, Pug provides a simpler and more concise syntax once mastered and has better whitespace handling by default.

Share your Stack

Help developers discover the tools you use. Get visibility for your team's tech choices and contribute to the community's knowledge.

View Docs

CLI (Node.js)

Manual

Advice on Mustache, Handlebars.js, Pug

Asad

Software Engineer at Lisec Automation

Jun 15, 2020

Needs adviceon

.NET

Handlebars.js

@All: I am searching for the best template engine for .NET. I started looking into several template engines, including the Dotliquid, Handlebars.js, Scriban, and Razorlight. I found handlebar a bit difficult to use when using the loops and condition because you need to register for helper first. DotLiquid and Scriban were easy to use and in Razorlight I did not find the example for loops.

Can you please suggest which template engine is best suited for the use of conditional/list and looping and why? Or if anybody could provide me a resource or link where I can compare which is best?

Thanks In Advance

240k views240k

Comments

Detailed Comparison

Mustache	Handlebars.js	Pug
Mustache is a logic-less template syntax. It can be used for HTML, config files, source code - anything. It works by expanding tags in a template using values provided in a hash or object. We call it "logic-less" because there are no if statements, else clauses, or for loops. Instead there are only tags. Some tags are replaced with a value, some nothing, and others a series of values.	Handlebars.js is an extension to the Mustache templating language created by Chris Wanstrath. Handlebars.js and Mustache are both logicless templating languages that keep the view and the code separated like we all know they should be.	This project was formerly known as "Jade." Pug is a high performance template engine heavily influenced by Haml and implemented with JavaScript for Node.js and browsers.
Statistics
GitHub Stars 16.7K	GitHub Stars -	GitHub Stars -
GitHub Forks 2.4K	GitHub Forks -	GitHub Forks -
Stacks 2.4K	Stacks 8.3K	Stacks 1.3K
Followers 415	Followers 3.2K	Followers 1.2K
Votes 50	Votes 308	Votes 467
Pros & Cons
Pros 29 Dead simple templating 12 Open source 8 Small 1 Support in lots of languages	Pros 106 Simple 76 Great templating language 50 Open source 36 Logicless 20 Integrates well into any codebase	Pros 138 Elegant html 90 Great with nodejs 59 Very short syntax 59 Open source 54 Structured with indentation
Integrations
No integrations available	No integrations available	Node.js

What are some alternatives to Mustache, Handlebars.js, Pug?

TypeScript

TypeScript is a language for application-scale JavaScript development. It's a typed superset of JavaScript that compiles to plain JavaScript.

Slim Lang

Slim is a template language whose goal is to reduce the view syntax to the essential parts without becoming cryptic. It started as an exercise to see how much could be removed from a standard html template (<, >, closing tags, etc...). As more people took an interest in Slim, the functionality grew and so did the flexibility of the syntax.

RactiveJS

Ractive was originally created at theguardian.com to produce news applications. Ractive takes your Mustache templates and transforms them into a lightweight representation of the DOM – then when your data changes, it intelligently updates the real DOM.

EJS

It is a simple templating language that lets you generate HTML markup with plain JavaScript. No religiousness about how to organize things. No reinvention of iteration and control-flow. It's just plain JavaScript.

Jinja

It is a full featured template engine for Python. It has full unicode support, an optional integrated sandboxed execution environment, widely used and BSD licensed.

Twig

It is a modern template engine for PHP. It is flexible, fast, and secure. Its syntax originates from Jinja and Django templates.

Nunjucks

Rich Powerful language with block inheritance, autoescaping, macros, asynchronous control, and more. Heavily inspired by jinja2. It supports all modern browsers.

Hogan.js

Hogan.js is a 3.4k JS templating engine developed at Twitter. Use it as a part of your asset packager to compile templates ahead of time or include it in your browser to handle dynamic templates.

Jsonnet

It is a data templating language for app and tool developers. It is a powerful DSL for elegant description of JSON data.

Smarty

Facilitating the separation of presentation (HTML/CSS) from application logic. This implies that PHP code is application logic, and is separated from the presentation

Related Comparisons

Handlebars.js vs Mustache vs Pug: What are the differences?

Introduction

Syntax and readability: Handlebars.js uses a simple and intuitive syntax, resembling HTML, making it easy to read and understand. Mustache also follows a similar syntax but lacks certain features like conditionals. On the other hand, Pug uses a combination of indentation and tags, which can be initially confusing but offers concise and readable code once familiarized.
Conditional logic: Handlebars.js provides built-in support for conditional statements, allowing developers to incorporate logic within the templates. Mustache, however, lacks this feature and only focuses on variable substitution. Pug, while having access to JavaScript logic, utilizes a different syntax for conditionals, requiring additional learning to work with.
Loop iteration: Both Handlebars.js and Mustache allow for loop iteration through arrays and objects. Handlebars.js provides more flexibility and features, such as nested loops, custom helpers, and partials. Mustache, however, has simpler syntax for loop iteration but lacks these additional functionalities. Pug, being focused on indentation-based structure, does not have specific syntax for loop iteration, which may require using JavaScript loops directly.
Partial templates: Handlebars.js and Mustache both support partial templates, which allow developers to reuse code across the application. This provides modularity and avoids code duplication. However, Pug, being indentation-based, does not have a dedicated partial template feature. Instead, it offers mixin functionality, which can achieve a similar result but requires a different approach.
Whitespace handling: Handlebars.js and Pug handle whitespaces differently. Handlebars.js preserves all whitespaces in the HTML output, which can sometimes result in unwanted spaces. Pug, on the other hand, removes unnecessary whitespaces by default, resulting in cleaner HTML output. Mustache, being a logic-less template engine, does not have any specific handling for whitespaces.
JavaScript usage: Handlebars.js and Pug allow developers to execute JavaScript code within the templates, providing greater flexibility for complex logic. Mustache, being a logic-less template engine, does not directly support JavaScript execution and focuses on variable substitution.

Handlebars.js vs Mustache vs Pug

Overview

Handlebars.js vs Mustache vs Pug: What are the differences?