An express js templating engine with clean syntax and support for builtin layout and all loops
This is a lightweight CommonJS template engine for Node.js/Express that supports:
<% %> JavaScript code blocks{{ }} → Text and number output{{{ }}} → Raw HTML outputinclude() → Partial templateslayout() → Layouts with nested templatesIt is designed to be simple, flexible, and easy to integrate with Express.
Or include it locally in your project:
const { renderFile, registerHelper } = require("view-gate");
Use <% %> to run arbitrary JavaScript in your templates:
<% for (let i = 0; i < items.length; i++) { %>
<li>{{ i }} - {{ items[i] }}</li>
<% } %>
Supports:
for, while, do…whileif, else if, elseforEach, map{{ expression }}<p>User Name: {{ user.name }}</p>
{{{ expression }}}<p>HTML Content: {{{ user.htmlContent }}}</p>
You can wrap your template in a layout:
{{ layout("layouts/main", { title: "Homepage" }) }}
{{ body }} or {{{ body }}} for inner template content.Example layouts/main.html:
<!DOCTYPE html>
<html>
<head>
<title>{{ title }}</title>
</head>
<body>
{{{ body }}}
</body>
</html>
Include partial templates with optional data:
{{ include("partials/header", { user }) }}
You can register helpers once, and they are available in all templates:
registerHelper("upper", str => String(str).toUpperCase());
registerHelper("lower", str => String(str).toLowerCase());
registerHelper("repeat", (str, n) => String(str).repeat(n));
Usage in templates:
<p>{{ upper(user.name) }}</p>
<p>{{ lower(user.name) }}</p>
<p>{{ repeat("-", 10) }}</p>
You can also pass helpers per render:
res.render("home", {
data,
helpers: {
shout: s => s.toUpperCase() + "!!!"
}
});
renderFile(filePath, data, callback)Render a template file.
renderFile(filePath, data, (err, html) => {
if (err) throw err;
console.log(html);
});
filePath → path to the template filedata → object containing variables and optionally helperscallback(err, html) → receives the rendered HTMLregisterHelper(name, fn)Registers a global helper function.
registerHelper("upper", str => str.toUpperCase());
const express = require("express");
const path = require("path");
const { renderFile, registerHelper } = require("./templateEngine");
const app = express();
// Register the engine
app.engine("html", renderFile);
app.set("views", path.join(__dirname, "views"));
app.set("view engine", "html");
// Global helpers
registerHelper("upper", s => String(s).toUpperCase());
registerHelper("lower", s => String(s).toLowerCase());
app.get("/", (req, res) => {
res.render("home", {
user: { name: "Felix", age: 21 },
items: ["Apple", "Banana", "Orange"]
});
});
app.listen(3000, () => console.log("Server running on http://localhost:3000"));
views/home.html){{ layout("layouts/main", { title: "Homepage" }) }}
<h2>User Information</h2>
<p>Name (escaped): {{ user.name }}</p>
<p>Name (raw): {{{ user.name }}}</p>
<p>Uppercase (helper): {{ upper(user.name) }}</p>
<h3>Items List</h3>
<ul>
<% items.forEach((item, i) => { %>
<li>{{ i }} - {{ item }} </li>
<% }) %>
</ul>
{{ include("partials/footer") }}
{{ }} for user input to prevent XSS. Use raw versions only for trusted content.<% %> blocks. Use them for loops, conditionals, and variable manipulation.| Feature | Syntax Examples | Description |
|---|---|---|
| Escaped Output | {{ name }} | HTML-escaped text |
| Raw Output | {{{ htmlContent }}} | Raw HTML |
| JS Code | <% for(let i=0;i<items.length;i++){ %> <li>{{ i }}<li> <%}%> | JS block for loops/conditions. The same concept in all kind of loops |
| Include Partial. | {{ include("header") }} | Insert partial template |
| Layout | {{ layout("main") }} | Apply layout wrapping |
| Global Helpers | {{ upper(name) }} | Registered via registerHelper() |
| Per-render Helpers | {{ shout(name) }} | Passed via helpers in render |
FAQs
An express js templating engine with clean syntax and support for builtin layout and all loops
We found that view-gate demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.