The overview of popular templating libraries in javascript

Introduction to templating libraries in javscript

In this tutorial, we are going to look into popular top 10 templating libraries like handlebars, EJS, Pug, mozilla, lodash in javascript by usage. These templating libraries are used in UI (javascript - frontend) as well as NodeJS ( javascript - backend). We also have details on how to use this libraries in detail.

Templating engines are not specific to javascript and all the languages have their own templating engines.

Templating engines are part of web frameworks too. React, Angular, Vue and many other web frameworks have custom templating engines and syntax.

# 1 EJS templating library

URLhttps://ejs.co
Githubhttps://github.com/mde/ejs
Used By1.7M
Stars4.6K
Stats for ejs

This is a popular javascript template. EJS is popularly used in NodeJS to render html server side, and it stands for Embedded JavaScript.

EJS uses javascript syntax itself, so there is shorter learning curve to get started with it. No religiousness about how to organize things. No reinvention of iteration and control-flow. It's just plain JavaScript.
Debugging is also simple and straight forward in EJS.
It comes with full featured command line tools which allows many operations possible through code.

Hello world example for EJS is

<!Doctype html>
<html>
<body>
<div id="result"></div>
<script src="https://www.unpkg.com/ejs@3.1.3/ejs.min.js"></script>
<script>
  const text="Hello World";
  const html = ejs.render('<%= text %>', {text: text});
  document.querySelector("#result").innerHTML = html;
</script>
</body>
</html>

Overview of EJS templating engine

In order to read more about the EJS templating engine, including getting started with it, pros and cons of it, then read this excellent and detailed post about EJS.

# 2 Pug (previously called Jade) templating library

URLhttps://pugjs.org/
Githubhttps://github.com/pugjs/pug
Used By235K
Stars19.3K
Stats for pug

Pug is a high-performance template engine heavily influenced by Haml and implemented with JavaScript for Node.js and browsers. Pug is generally used in NodeJS environments. There is a port available for browsers in the standalone format. But it is slow, and large (211 KB) and works with only latest browsers. As it is slow, it is recommended to precompile the template functions, using build tools like the grunt or gulp tasks.

Precompiling templates

Learning about precompiling is a different tutorial in itself, so if you are interested, then send me a mail (from the about page), and I write tutorial about it.

Hello World code for pug is

pug.render("p #{name}", { name: 'PUG' })
<p>PUG</p>

Note that calling render function directly will lead to compiling the template everytime the data is passed. The above example is for showcase only. If you want to use in production, then compile the template before hand, and then pass the data dynamically everytime you want to render it.

const pug = require('pug');
const templateFn = pug.compile('p #{text}');

// Now we have templateFn which contains the compiled template. Whenever we want to render it, we just pass data to it.
templateFn({ text: 'hello world'})

If you using the above code in browser, then remove the require statement and add the script to the pug js mentioned above (standalone format).

It was previously called as Jade, but due to trademark restrictions, it was renamed to Pug later on.

# 3 Nunjucks (Mozilla) templating library

URLhttps://mozilla.github.io/nunjucks/
Githubhttps://github.com/mozilla/nunjucks
Used By97.6K
Stars6.7K
Stats for nunjuks

Nunjucks is a full featured templating engine for javascript. It is heavily inspired by jinja2.

Nunjucks runtime is 8KB gzipped while nunjucks full library is aroung 20KB min gzipped.

Hello world for nunjucks is

nunjucks.renderString('Hello {{ username }}', { username: 'James' });

This will render 'Hello James'

# 4 Hogan (Twitter) templating library

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.

Hogan.js was developed against the mustache test suite, so everything that holds true for templates as specified here, is also the case for hogan.js.

That means you get variables, sections, lambdas, partials, filters, and everything else you've come to expect from mustache templating - only much, much faster.

Hello World for Hogan is

<!-- include hogan -->
<script src="/js/hogan.js"></script>

<!-- include your server-side compiled templates -->
<script src="/js/my-templates.js"></script>

<!-- render your templates -->
<script>
  var context = { variable: 'myVariable' };
  var partial = { partial: myPartial };
  var template = myTemplate.render(context, partial);
  document.body.innerHTML = template;
</script>

# 5 Handlebar templating library

URLhttps://handlebarsjs.com/
Githubhttps://github.com/handlebars-lang/handlebars.js
Used By2.7M
Stars15.4K
Stats for handlebar

Handlebars is a simple templating language. It uses moustace

It uses a template and an input object to generate HTML or other text formats. Handlebars templates look like regular text with embedded Handlebars expressions.

Hello World for handlebar is

<!-- Include Handlebars from a CDN -->
<script src="https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.js"></script>
<script>
  // compile the template
  var template = Handlebars.compile("Handlebars <b>{{doesWhat}}</b>");
  // execute the compiled template and print the output to the console
  console.log(template({ doesWhat: "rocks!" }));
</script>

# 6 Moustache templating library

URLhttps://mustache.github.io/
Githubhttps://github.com/janl/mustache.js
Used By206 (only JS)
Stars13.9K
Stats for handlebar

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

Moustache is ported to many languages including  RubyJavaScriptPythonPHP, , Objective-CJavaC#/.NETAndroidC++, Go, C,  and for Kotlin

Moustache is called "logic-less" template, 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.

Hello world for moustache include

<script src="https://unpkg.com/mustache@latest"></script>
<script>
var view = {
  title: "Joe",
  calc: function () {
    return 2 + 4;
  }
};

var output = Mustache.render("{{title}} spends {{calc}}", view);
</script>

Few other templating libraries in javascript

# 6 doT templating library

URLhttp://olado.github.io/doT/
Githubhttps://github.com/olado/doT
Used By1.7M
Stars4.6K
Stats for doT

Created in search of the fastest and concise JavaScript templating function with emphasis on performance under V8 and nodejs. It shows great performance for both nodejs and browsers.

doT.js is fast, small and has no dependencies.

Live playground for the doT templating language - http://olado.github.io/doT/

# 7 twig templating library

URLhttps://github.com/twigjs/twig.js
Githubhttps://github.com/twigjs/twig.js
Used By8.1K
Stars1.6K
Stats for twig

Twig is actually a templating language in PHP. This repository contains the JS implementation of the Twig Templating Language. The advantage is that the features and syntax are same as the guidelines. So if you have used PHP version of twig templating language, the JS version will be similar.

lodash and undserscore templating library

Lodash and underscore are not templating engine only. They are utility libraries, which provide many useful functions in javascript like map, reduce, filter, forEach and many such. Templating is one of the feature of these utility library.

Example of lodash template

var compiled = _.template('hello <%= user %>!');
compiled({ 'user': 'fred' });
// => 'hello fred!'

https://lodash.com/docs/4.17.15#template

Web frameworks

Web frameworks like react, angular and vue also have their own custom templating engines.