Express Templating Cheatsheet (Pug, EJS, Handlebars, Mustache, Liquid)

Intro

Express can be used several different templating engines, most engines will assume by default that all your templates are in a “views” folder. To render a template you’ll use the render function in side the response object in your express routes.

Render will search for a template file called “template.extension” in the views folder and pass the object to the template engine to use when rendering the template.

LiquidJS

LiquidJS Documentation

LiquidJS is the javascript implementation of popular ruby based Liquid templating system used by Shopify. Here is how to use it in your express apps.

  1. install npm install liquid-express-views
  2. configure the template engine

*these settings will assume all your templates to be within a “views” folder

Injecting Variables

Use double curly brackets to inject data. Given this call to render.

Use the name property in the template like so:

Looping through an array

Use the for tag to loop over an array of data. Given this call to render.

Use the names array in the template like so:

Conditional render

Use the if tag to render html conditionally. Given this call to render.

conditional logic would be done like so:

EJS (Embedded Javascript)

EJS Documentation

EJS is a templating language that allows you to write javascript in your templates.

  1. install npm install ejs
  2. ejs works out of the box with express long as your ejs files are in the views folder and have an ejs extension

Injecting Variables

Use <%= %> to inject data. Given this call to render.

Use the name property in the template like so:

Looping through an array

Write a standard js loop with <% %> tags. Given this call to render.

Use the names array in the template like so:

Conditional render

Write a standard js if statement with <% %> tags. Given this call to render.

conditional logic would be done like so:

Mustache

Mustache Documentation

  1. Install npm install mustache-express
  2. configure in express

Injecting Variables

Use double curly brackets to inject data. Given this call to render.

Use the name property in the template like so:

Looping through an array

Given this call to render.

Use the names array in the template like so:

Conditional render

Given this call to render.

conditional logic would be done like so:

Pug

Pug Documentation

  1. install npm install pug
  2. configure in express

Injecting Variables

Use double curly brackets to inject data. Given this call to render.

Use the name property in the template like so:

Looping through an array

Given this call to render.

Use the names array in the template like so:

Conditional render

Given this call to render.

conditional logic would be done like so:

Handlebars

Handlebars Documentation

  1. Install npm install express-handlebars
  2. configure in express

Injecting Variables

Use double curly brackets to inject data. Given this call to render.

Use the name property in the template like so:

Looping through an array

Given this call to render.

Use the names array in the template like so:

Conditional render

Given this call to render.

conditional logic would be done like so:

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Alex Merced Coder

Alex Merced Coder

59 Followers

Alex Merced is a Developer Advocate for Dremio and host of the Web Dev 101 and Datanation Podcasts.