Loading
MindXchange
MindXchange
MindXchange

Quipoin Menu

Learn • Practice • Grow

Tutorial Exercises MCQs Interview Q & A Tests
express-js / Express.js Templating Engines
tutorial
MCQVideosDiscussion

Express.js Templating Engines

While you can send HTML as strings using `res.send()`, this quickly becomes unmanageable for larger pages. **Templating engines** allow you to create dynamic HTML pages with reusable components, variables, and logic. Express integrates seamlessly with popular templating engines like EJS and Pug.

What are Templating Engines?

Templating engines are tools that allow you to embed JavaScript-like syntax inside HTML. They generate final HTML by combining templates with data. Benefits include:
  • Dynamic content generation
  • Code reuse through partials/includes
  • Clean separation of logic and presentation
  • Easier maintenance

Think of templates as mad libs – you have a story with blanks, and you fill those blanks with data to create the final story.

Setting Up Templating Engines in Express

First, install the templating engine:
npm install ejs pug

Then configure Express to use the engine:
const express = require('express');
const app = express();
const path = require('path');

<!-- Set the view engine -->
app.set('view engine', 'ejs'); <!-- or 'pug' -->

<!-- Set the views directory (where templates are stored) -->
app.set('views', path.join(__dirname, 'views'));

EJS (Embedded JavaScript)

EJS uses simple tags like `<%` and `%>` to embed JavaScript. It's very similar to HTML, making it easy to learn.

Template file: `views/index.ejs`
<!DOCTYPE html>
<html>
<head>
  <title><%= title %></title>
</head>
<body>
  <h1><%= message %></h1>
  
  <ul>
    <% users.forEach(function(user) { %>
      <li><%= user.name %> - <%= user.email %></li>
    <% }); %>
  </ul>
</body>
</html>

Route handler
app.get('/', (req, res) => {
  res.render('index', {
    title: 'My App',
    message: 'Welcome to EJS!',
    users: [
      { name: 'John', email: 'john@example.com' },
      { name: 'Jane', email: 'jane@example.com' }
    ]
  });
});

Pug (formerly Jade)

Pug uses a minimalist, whitespace-sensitive syntax. It's more concise but has a steeper learning curve.

Template file: `views/index.pug`
doctype html
html
  head
    title= title
  body
    h1= message
    ul
      each user in users
        li #{user.name} - #{user.email}

Same route handler works for Pug
app.get('/', (req, res) => {
  res.render('index', { title: 'My App', message: 'Welcome to Pug!', users: [...] });
});

EJS Syntax Cheat Sheet

TagPurpose
<%= variable %>Outputs the value (escaped for security).
<%- variable %>Outputs unescaped HTML (use carefully).
<% code %>Executes JavaScript code without outputting.
<%# comment %>EJS comment (not rendered).
<% include partial %>Includes another template file.

Choosing Between EJS and Pug

EJSPug
HTML-like syntax – easy to learnMinimal, indentation-based syntax
Full JavaScript inside templatesCleaner, more concise code
Better for designers familiar with HTMLSteeper learning curve
More popular in the Express ecosystemPopular in some large projects

Two Minute Drill

  • Templating engines generate dynamic HTML by combining templates with data.
  • Set the engine with `app.set('view engine', 'ejs')`.
  • Use `res.render()` to render a template and send the HTML.
  • EJS uses `<% %>` tags – easy for HTML developers.
  • Pug uses indentation-based syntax – more concise but different.
Take Quiz

Need more clarification?

Drop us an email at career@quipoinfotech.com