JavaScript template engines

Oct 14, 2020 • ☕️ 2 min read

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

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

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

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

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

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.

Related Posts

My reflections as an indie maker

I wanted to be an indie hacker for multiple reasons but the biggest motivation has always been my passion for building products

What languages support WebAssembly?

What high-level programming languages currently can use WebAssembly as a compilation target

Top Google coding competitions you must know

Performing well in one of the following Google competitions is a every good start on the way to get a job at Google

Current state of CSS

These days, front-end mastery involves not only knowing how to write good CSS, but also which of these technologies to use, and when