ExpressJS Templating Engines (EJS Pug)

Imagine you're writing a letter to multiple friends. The content is mostly the same your news, your stories but the greeting changes for each friend. You wouldn't write the entire letter from scratch for each person. Instead, you'd write a template and just fill in the name. Templating engines in Express work exactly like this they let you create HTML templates and dynamically insert data.

What are Templating Engines?

Templating engines allow you to generate HTML dynamically by combining templates with data. Instead of writing HTML directly in your JavaScript code (which gets messy fast), you create template files with placeholders, and the engine replaces those placeholders with actual data.

Popular Templating Engines for Express

EJS (Embedded JavaScript) Uses simple JavaScript syntax, feels like writing HTML
Pug (formerly Jade) Uses indentation-based syntax, very concise
Handlebars Logic-less templates, good for designers
Mustache Minimal templating

Setting Up a Templating Engine in Express

First, install the engine you want to use. Let's start with EJS:

npm install ejs

Then configure Express to use EJS:

const express = require('express');
const app = express();

// Set EJS as the templating engine
app.set('view engine', 'ejs');

// Set the directory where your template files are located
app.set('views', './views');

app.listen(3000);

EJS Templating Engine

Create a file views/index.ejs:




  <%= title %>


  Welcome, <%= name %>!

  <% if (showAdmin) { %>
    You have admin privileges.

  <% } %>

  Users:

  
    <% users.forEach(user => { %>
      <%= user.name %> - <%= user.email %>

    <% }); %>

Now, in your route, render this template with data:

app.get('/', (req, res) => {
  res.render('index', {
    title: 'My Website',
    name: 'John',
    showAdmin: true,
    users: [
      { name: 'Alice', email: 'alice@example.com' },
      { name: 'Bob', email: 'bob@example.com' },
      { name: 'Charlie', email: 'charlie@example.com' }
    ]
  });
});

Pug Templating Engine

If you prefer Pug, install it first:

npm install pug

Then configure:

app.set('view engine', 'pug');
app.set('views', './views');

Create views/index.pug:

doctype html
html
  head
    title= title
  body
    h1 Welcome, #{name}!
    if showAdmin
      p You have admin privileges.
    
    h2 Users:
    ul
      each user in users
        li #{user.name} - #{user.email}

The route remains the same:

res.render('index', { title: 'My Site', name: 'John', showAdmin: true, users: [...] });

EJS Syntax Quick Reference

<%= variable %> Outputs the value (HTML escaped)
<%- variable %> Outputs raw HTML (use with caution)
<% code %> Execute JavaScript code (like loops, if statements)
<%# comment %> Comments

Pug Syntax Quick Reference

Indentation determines nesting (no closing tags!)
h1= title Outputs the variable
#{name} Interpolation
if condition Conditional rendering
each item in array Loops

Two Minute Drill

Templating engines separate HTML structure from data.
Set the engine with app.set('view engine', 'ejs').
Create template files in the 'views' folder.
Render templates with res.render('filename', data).
EJS uses <% %> for JavaScript, <%= %> for output.
Pug uses indentation and concise syntax.
Choose the engine that suits your team and project.

Need more clarification?

Drop us an email at career@quipoinfotech.com

Welcome to Quipoin

Quipoin Menu

ExpressJS Templating Engines (EJS Pug)

Welcome, <%= name %>!

Users:

Need more clarification?