Nearby lessons
8 of 14📄 EJS Template Engine in Express JS & Node JS | Embedded JavaScript | View Engine
📌 What is EJS?
💡 What is EJS (Embedded JavaScript)?
EJS is a powerful and popular template engine for Node.js, used to create dynamic HTML pages using JavaScript.
It allows us to insert variables, run JavaScript logic, loop through data, render lists, handle forms, and more — all inside HTML files with .ejs extension.
A template engine helps generate dynamic pages with minimal code by injecting server-side data into HTML.
📘 EJS Syntax Tags
| Tag | Description | Notes |
|---|---|---|
| <% %> | Control flow (no output) | Used for loops & conditionals |
| <%= %> | Escaped Output | Safe output (prevents XSS) |
| <%- %> | Unescaped Output | Unsafe — renders raw HTML |
| <%# %> | Comment | Ignored in output |
| <%-\ %> | Remove following newline | Whitespace control |
| <%_ %> | Trim whitespace before | Cleaner HTML output |
| %_> | Trim whitespace after | Cleaner HTML output |
📁 Step 1: Project Structure
project-folder/
┣ 📁 views
┃ ┣ 📄 about.ejs
┃ ┣ 📄 about1.ejs
┃ ┗ 📄 form.ejs
┗ 📄 index.js
⚙️ Step 2: Setup Express with EJS
Install the required packages and configure Express to use EJS as the view engine.
🏠 Step 3: Home Route (Simple Response)
Basic route returning plain HTML.
📄 Step 4: Render Static EJS Page
Use res.render() to load EJS files from the views folder.
📌 Step 5: Pass Dynamic Data (Variables)
Send data from Express to EJS using objects.
🍎 Step 6: Pass Array to EJS
Loop through array using EJS tags.
🧍 Step 7: Pass Array of Objects
Create dynamic tables using EJS loops.
📝 Step 8: Form Handling (GET)
Render a form using an EJS template.
📨 Step 9: Form Handling (POST)
Access req.body and send data back to EJS.
📘 Step 10: Multiple EJS Pages
Rendering multiple EJS views from different routes.