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.

res.render("template.extension", {data: [1,2,3,4]})

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
// Import express
const express = require("express")
// import path from node standard library
const path = require("path")
// create our application object (and configure liquid templating)
// passing the app object to the l-e-v function first and then saving to the app variable
const app = require("liquid-express-views")(express(), {root: [path.resolve(__dirname, 'views/')]})

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

res.render("template.liquid", {name: "Alex Merced"})

Use the name property in the template like so:

<h1>I am {{name}}</h1>

Looping through an array

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

res.render("template.liquid", {names: ["Alex", "Beth", "Connor"]})

Use the names array in the template like so:

<ul>
{% for name in names %}
<li>{{name}}</li>
{% endfor %}
</ul>

Conditional render

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

res.render("template.liquid", {name: "Alex Merced", show: true})

conditional logic would be done like so:

{% if show == true %}
<h1>{{name}}</h1>
{% else %}
<h1>Not sure who you've talking about</h1>
{% endif %}

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.

res.render("template.ejs", {name: "Alex Merced"})

Use the name property in the template like so:

<h1>I am <%= name %></h1>

Looping through an array

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

res.render("template.ejs", {names: ["Alex", "Beth", "Connor"]})

Use the names array in the template like so:

<ul>
<% for (name of names){ %>
<li><%= name %></li>
<% } %>
</ul>

Conditional render

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

res.render("template.ejs", {name: "Alex Merced", show: true})

conditional logic would be done like so:

<% if (show){ %>
<h1><%= name %></h1>
<% } else { %>
<h1>Not sure who you've talking about</h1>
<% } %>

Mustache

Mustache Documentation

  1. Install npm install mustache-express
  2. configure in express
// We are importing the express library
const express = require("express")
//import mustache-express
const mustache = require('mustache-express')
// We use express to create an application object that represents our server
const server = express()
// We Tell Express to Look for mustache files when we use the render function
// templates are by default looked for in the views folder
server.engine('mustache', mustache()) //Change the view engine
server.set("view engine", "mustache")

Injecting Variables

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

res.render("template.mustache", {name: "Alex Merced"})

Use the name property in the template like so:

<h1>I am {{name}}</h1>

Looping through an array

Given this call to render.

res.render("template.mustache", {names: ["Alex", "Beth", "Connor"]})

Use the names array in the template like so:

<ul>
{{#names}}
<li>{{.}}</li>
{{/names}}
</ul>

Conditional render

Given this call to render.

res.render("template.mustache", {name: "Alex Merced", show: true})

conditional logic would be done like so:

{{#show}}
<h1>{{name}}</h1>
{{/show}}

Pug

Pug Documentation

  1. install npm install pug
  2. configure in express
// We are importing the express library
const express = require("express")
// We use express to create an application object that represents our server
const server = express()
// Set the view engine to pug
server.set('view engine', 'pug')

Injecting Variables

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

res.render("template.pug", {name: "Alex Merced"})

Use the name property in the template like so:

h1 #{name}

Looping through an array

Given this call to render.

res.render("template.pug", {names: ["Alex", "Beth", "Connor"]})

Use the names array in the template like so:

ul
each name in names
li= name

Conditional render

Given this call to render.

res.render("template.pug", {name: "Alex Merced", show: true})

conditional logic would be done like so:

if show
h1 #{name}
else
h1 don't know who your talking about

Handlebars

Handlebars Documentation

  1. Install npm install express-handlebars
  2. configure in express
// We are importing the express library
const express = require("express")
//import mustache-express
const handlebars = require('express-handlebars')
// We use express to create an application object that represents our server
const server = express()
// We Tell Express to Look for mustache files when we use the render function
// templates are by default looked for in the views folder
server.engine('handlebars', handlebars()) //Change the view engine
server.set("view engine", "handlebars")

Injecting Variables

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

res.render("template.handlebars", {name: "Alex Merced"})

Use the name property in the template like so:

<h1>I am {{name}}</h1>

Looping through an array

Given this call to render.

res.render("template.handlebars", {names: ["Alex", "Beth", "Connor"]})

Use the names array in the template like so:

<ul>
{{#each names}}
<li>{{this}}</li>
{{/each}}
</ul>

Conditional render

Given this call to render.

res.render("template.handlebars", {name: "Alex Merced", show: true})

conditional logic would be done like so:

{{#if show}}
<h1>{{name}}</h1>
{{/if}}

--

--

--

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

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

How to render table recursively in Angular 10

How Node.js Works: A Look Behind The Scenes

How to Use Framer Motion with React

Intro to Reactive Applications

How to think small in coding

Introduction to Memoization in JavaScript with Examples

I want to establish a Disaster Recovery for my JFrog Artifactory instance

LeetCode Submission Medium Links[weekly update]

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

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

More from Medium

Dynamic use QR codes

CS373 Spring 2022: Stacy Jong

How to run a Graphical UI application or a program on a Docker container?

Why sometimes it is better to go with local server hosting provider.

Yellow PCB lines connecting Yellow Cloud in the center. Representing the connection the cloud infrastructure has.