EJS ( Embedded JavaScript templates ) Cheatsheet

6125




EJS - EJS ( Embedded JavaScript templates ) is a simple templating language to generate HTML. Your code is plain Javascript in EJS, EJS itself does not introduce any new syntax. You can use EJS at client side or server side.

Sample Syntax

<% if (user.email) { %>
  <h1><%= user.email %></h1>
<% } %>
Usage - 1
var templateString = '<h1> Hello, <%= userName %> </h1>';
var options = {};

var template = ejs.compile(templateString, options);

var data = {
    userName : 'Foo Bar'
}

var outputString = template(data); // outputString -> <h1> Hello, Foo Bar </h1>
Usage - 2
var outputString = ejs.render(templateString, data, options);
Usage - 3 (Template as a separate file)
ejs.renderFile(templateFilePath, data, options, function(err, outputString){
    console.log(outputString);
});
Options
OptionDescription
cacheTo cache the compiled functions
filenameused by cache and includes
contextFunction execution context
compileDebugenable/ disable debug
rmWhitespaceremoves leading and trailing whitespaces

Tags

TagDesctiption
<% This is a Scriptlet tag, used for control flows. This does not output anything
<%_ _%>'Whitespace Slurping' tag, this removes all whitespaces before it.
<%= %>Produces HTML escaped value
<%- %>HTML unescaped value (useful if you have generated html in database )
<%# %>Comment tag
<%%to output literal <%
%>Ending tag
-%>Trims following new line
_%>Remove white spaces after it

Includes

include

To include a tempate, needs a file name option, paths are relative

<%- include('partials/navbar.ejs', data) %>
  <h1> Title <h1>
  <p> content </p>
<%- include('partials/footer.ejs', data) %>

References

Official Website: https://ejs.co/

GitHub Repository: https://github.com/mde/ejs

NPM Pacjage: https://www.npmjs.com/package/ejs