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

Intro

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

LiquidJS

  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/')]})

Injecting Variables

res.render("template.liquid", {name: "Alex Merced"})
<h1>I am {{name}}</h1>

Looping through an array

res.render("template.liquid", {names: ["Alex", "Beth", "Connor"]})
<ul>
{% for name in names %}
<li>{{name}}</li>
{% endfor %}
</ul>

Conditional render

res.render("template.liquid", {name: "Alex Merced", show: true})
{% if show == true %}
<h1>{{name}}</h1>
{% else %}
<h1>Not sure who you've talking about</h1>
{% endif %}

EJS (Embedded Javascript)

  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

res.render("template.ejs", {name: "Alex Merced"})
<h1>I am <%= name %></h1>

Looping through an array

res.render("template.ejs", {names: ["Alex", "Beth", "Connor"]})
<ul>
<% for (name of names){ %>
<li><%= name %></li>
<% } %>
</ul>

Conditional render

res.render("template.ejs", {name: "Alex Merced", show: true})
<% if (show){ %>
<h1><%= name %></h1>
<% } else { %>
<h1>Not sure who you've talking about</h1>
<% } %>

Mustache

  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

res.render("template.mustache", {name: "Alex Merced"})
<h1>I am {{name}}</h1>

Looping through an array

res.render("template.mustache", {names: ["Alex", "Beth", "Connor"]})
<ul>
{{#names}}
<li>{{.}}</li>
{{/names}}
</ul>

Conditional render

res.render("template.mustache", {name: "Alex Merced", show: true})
{{#show}}
<h1>{{name}}</h1>
{{/show}}

Pug

  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

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

Looping through an array

res.render("template.pug", {names: ["Alex", "Beth", "Connor"]})
ul
each name in names
li= name

Conditional render

res.render("template.pug", {name: "Alex Merced", show: true})
if show
h1 #{name}
else
h1 don't know who your talking about

Handlebars

  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

res.render("template.handlebars", {name: "Alex Merced"})
<h1>I am {{name}}</h1>

Looping through an array

res.render("template.handlebars", {names: ["Alex", "Beth", "Connor"]})
<ul>
{{#each names}}
<li>{{this}}</li>
{{/each}}
</ul>

Conditional render

res.render("template.handlebars", {name: "Alex Merced", show: true})
{{#if show}}
<h1>{{name}}</h1>
{{/if}}

--

--

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 is a Developer Advocate for Dremio and host of the Web Dev 101 and Datanation Podcasts.