EJS, or Embedded JavaScript templating, is a templating language that lets you generate HTML markup with plain JavaScript. It is primarily used for server-side rendering of web pages, allowing developers to create HTML templates with dynamic content.
Interpolation
EJS allows interpolation of variables into HTML. The above code will output the value of `user.name` into the template.
<%= user.name %>Conditionals
You can use standard JavaScript conditionals to conditionally output HTML. This code checks if `user.isAdmin` is true and outputs a paragraph if it is.
<% if (user.isAdmin) { %> <p>Admin</p> <% } %>Loops
EJS supports JavaScript loops to iterate over arrays. This code will output each `user.name` in a list item.
<% users.forEach(function(user) { %> <li><%= user.name %></li> <% }); %>Includes
EJS allows inclusion of other templates, which is useful for reusing common parts of your website like headers and footers. This code includes the 'user/show' template and passes the `user` object to it.
<%- include('user/show', {user: user}); %>Custom Delimiters
EJS allows you to define custom delimiters for your templates, which can be useful if you need to use '<%' or '%>' in your HTML. This code uses '%#' as a custom delimiter.
<%# users.forEach(function(user) { %> <li><%= user.name %></li> <%# }); %>Pug (formerly known as Jade) is a high-performance template engine heavily influenced by Haml and implemented with JavaScript for Node.js and browsers. It offers a more terse syntax compared to EJS and is whitespace-sensitive, which can lead to cleaner templates.
Handlebars is a simple templating language that uses a Mustache-like syntax. It is known for its logic-less templates, which means it encourages a separation of logic from the view, unlike EJS which allows JavaScript code in templates.
Mustache is a logic-less template syntax that can be used for HTML, config files, source code - anything. It works by expanding tags in a template using values provided in a hash or object. It is simpler than EJS and does not allow for direct execution of JavaScript code within the templates.
Nunjucks is a templating engine for JavaScript inspired by Jinja2. It is more powerful than EJS in terms of features like template inheritance and asynchronous control, but it can be more complex to use.
Embedded JavaScript templates
$ npm install ejs
<% %><%= %><%- %>-%> ending tag<% if (user) { %>
<h2><%= user.name %></h2>
<% } %>
var template = ejs.compile(str, options);
template(data);
// => Rendered HTML string
ejs.render(str, data, options);
// => Rendered HTML string
You can also use the shortcut ejs.render(dataAndOptions); where you pass
everything in a single object. In that case, you'll end up with local variables
for all the passed options.
cache Compiled functions are cached, requires filenamefilename Used by cache to key caches, and for includescontext Function execution contextcompileDebug When false no debug instrumentation is compiledclient Returns standalone compiled functiondelimiter Character to use with angle brackets for open/closedebug Output generated function body_with Whether or not to use with() {} constructs. If false then the locals will be stored in the locals object.rmWhitespace Remove all safe-to-remove whitespace, including leading
and trailing whitespace. It also enables a safer version of -%> line
slurping for all scriptlet tags (it does not strip new lines of tags in
the middle of a line).<% 'Scriptlet' tag, for control-flow, no output<%= Outputs the value into the template (HTML escaped)<%- Outputs the unescaped value into the template<%# Comment tag, no execution, no output<%% Outputs a literal '<%'%> Plain ending tag-%> Trim-mode ('newline slurp') tag, trims following newlineIncludes either have to be an absolute path, or, if not, are assumed as
relative to the template with the include call. (This requires the
filename option.) For example if you are including ./views/user/show.ejs
from ./views/users.ejs you would use <%- include('user/show') %>.
You'll likely want to use the raw output tag (<%-) with your include to avoid
double-escaping the HTML output.
<ul>
<% users.forEach(function(user){ %>
<%- include('user/show', {user: user}) %>
<% }); %>
</ul>
Includes are inserted at runtime, so you can use variables for the path in the
include call (for example <%- include(somePath) %>). Variables in your
top-level data object are available to all your includes, but local variables
need to be passed down.
NOTE: Include preprocessor directives (<% include user/show %>) are
still supported.
Custom delimiters can be applied on a per-template basis, or globally:
var ejs = require('ejs'),
users = ['geddy', 'neil', 'alex'];
// Just one template
ejs.render('<?= users.join(" | "); ?>', {users: users}, {delimiter: '?'});
// => 'geddy | neil | alex'
// Or globally
ejs.delimiter = '$';
ejs.render('<$= users.join(" | "); $>', {users: users});
// => 'geddy | neil | alex'
EJS ships with a basic in-process cache for caching the intermediate JavaScript
functions used to render templates. It's easy to plug in LRU caching using
Node's lru-cache library:
var ejs = require('ejs')
, LRU = require('lru-cache');
ejs.cache = LRU(100); // LRU cache with 100-item limit
If you want to clear the EJS cache, call ejs.clearCache. If you're using the
LRU cache and need a different limit, simple reset ejs.cache to a new instance
of the LRU.
EJS does not specifically support blocks, but layouts can be implemented by including headers and footers, like so:
<%- include('header') -%>
<h1>
Title
</h1>
<p>
My page
</p>
<%- include('footer') -%>
Go to the Latest Release, download
./ejs.js or ./ejs.min.js.
Include one of these on your page, and ejs.render(str).
There are a number of implementations of EJS:
Licensed under the Apache License, Version 2.0 (http://www.apache.org/licenses/LICENSE-2.0)
EJS Embedded JavaScript templates copyright 2112 mde@fleegix.org.
FAQs
Embedded JavaScript templates
We found that ejs 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
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.
Security News
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.