image

JavaScript template engines

Popular template engines to combine template and the context to produce a complete content at runtime

A template engine allows you to utilize static template files in your projects or applications, then replaces variables and instances declared in a template file with actual values at runtime.

Templates engines are often available in multiple languages with a different syntax, but with a similar philosophy, and having following common features:

  • May or may not allow you to write arbitrary Javascript inside templates
  • Asynchronous template loading, rendering, and streaming
  • Can generate any number of formats like HTML, Markdown, JSON, or YAML.
  • Composable templates

Pure template engine works well if you want to allow people to write templates for rendering HTML-pages, e-mails or markdown files. It has no built-in support for event-handling, accessing backend-services or incremental DOM updates.

If you want to build a single-page application and you want to handle user-input, you should probably look for a framework like React, Vue, or Angular.


Handlebars

image

handlebarsjs.com

Handlebars is a simple templating language that uses a template and an input object to generate HTML or other text formats. Handlebars compiles templates into JavaScript functions, this makes the template execution faster than most other template engines.

Mustache.js

image

github.com

Minimal templating with {{mustaches}} in JavaScript, a zero-dependency implementation of the mustache template system in JavaScript. 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.

Pug

image

pugjs.org

Pug (formerly known as "Jade") is a high-performance template engine heavily influenced by Haml and implemented with JavaScript for Node.js and browsers

EJS

image

ejs.co

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

Dust.js

image

www.dustjs.com

Dust is a Javascript templating engine. It inherits its look from the ctemplate family of languages, and is designed to run asynchronously on both the server and the browser.