Skip to main content

EJS

What is EJS?​

EJS, stands for Embedded JavaScript, is a simple templating language used in web development. It allows you to generate dynamic HTML content by embedding JavaScript code within your HTML templates. EJS is designed to simplify the process of rendering dynamic content in web applications by allowing you to mix HTML and JavaScript seamlessly.

Why does use EJS?​

  • Simple and familiar syntax: EJS code is embedded directly into HTML files, making the syntax very closely and easy to read. This helps developers easily code HTML and JavaScript.

  • Sub-template includes: EJS allows you to create reusable sub-template that can be included in multiple pages. This makes it easier to maintain consistent headers, footers, or other components across your site and links template files dynamically..

  • Completed structure: EJS supports structures such as loops, conditional statements... so you can create complex and flexible websites.

  • Fast compilation and rendering: EJS caches the intermediate JS functions for fast execution.

  • Easy debugging: It's easy to debug EJS errors, your errors are plain JavaScript exceptions, with template line numbers included.

  • Compatible with multiple browsers: EJS code is generated as standard HTML code, so it is compatible with most popular web browsers.

EJS tags​

Starting tags​

<%: 'Scriptlet' tag, for control-flow, no output.
<%_: ‘Whitespace Slurping’ Scriptlet tag, strips all whitespace before it.
<%=: Outputs the value into the template (HTML escaped).
<%-: Outputs the unescaped value into the template.
<%#: Comment tag, no execution, no output

Closing tags​

%>: Plain ending tag.
-%>: Trim-mode ('newline slurp') tag, trims following newline.
_%>: ‘Whitespace Slurping’ ending tag, removes all whitespace after it

Literal tags​

<%%: Outputs a literal <%
%%>: Outputs a literal %>

Basic format​

An EJS tag is the primary functioning unit in an EJS template. With the exception of the literal tags, all tags are formed by the following format:

<starting_tag content closing_tag>

How does use EJS?​

Variable declaration​

Variable declaration is the same as in Javascript and is contained within the <% %> tag pair.
Ví dụ: Declare a variable called numberOfStudent with an initial value of 5.

<% var numberOfStudent = 5; %>

To print the value of a variable, use the <%= %> tag pair
For example: If you have a variable username, you can print its value like this:

<p>Username: <%= username %></p>

Conditional statement​

You can use conditional statements to check and display content based on a condition, using the <% %> tag pair.
For example: Check if the variable isAdmin is true then display the message "You Are Admin", otherwise display the message "You Are Not Admin".

<% if (isAdmin) { %>
  <p>You Are Admin</p>
<% } else { %>
  <p>You Are Not Admin</p>
<% } %>

Loop statement​

You can use a loop to loop through a list and display multiple elements, use the <% %> tag pair

For loop​

For example:

EJS
<ul>
  <% for (var i = 0; i < users.length; i++) { 
    var user = users[i];
  %>
    <li><%= user.name %></li>
  <% } %>
</ul>
JSON
{
  "users": [
    {
      "name": "Timothy",
      "age":  15
    }, 
    {
      "name": "Juan", 
      "age":  51
    }
  ]
}
HTML
<ul>
  <li>Timothy</li>
  <li>Juan</li>
</ul>

forEach loop​

EJS
<ul>
  <% users.forEach(user => { %>
    <li><%= user.name %></li>
  <% }); %>
</ul>

Include​

You can include a sub-template into the main template with the syntax:

<%- include('path_to_file/filename', [arguments]); -%>

If the file specified does not have an extension, .ejs is automatically appended. If there is no path to the included file, the file will be assumed to be in the same directory as the original template.

EJS can pass data to a template by providing an object as the second argument to the render function.

Ví dụ:

header.ejs
<p>This is the header of the page.</p>
footer.ejs
<p>This is the footer of the page.</p>
<p><%= (typeof copyright != "undefined" ? copyright : "Copyright &copy; 2023") %></p>
index.ejs
<html>
<head>
  <title><%= title %></title>
</head>
<body>
  <%- include('header'); -%>

  {{ content }}

  <%- include('footer', {copyright: "Copyright &copy; 2024"}); -%>
</body>
</html>

Comment​

If you want to add a comment to EJS, use the tag pair <%# %> or <%# -%>. Comments will not be executed or displayed in the HTML output.

The use of <%# might cause some useless whitespace, as illustrated by the example below. You can trim it using the -%> ending tag.

In addition, you can also use comments according to the Javascript syntax /* */ or //.

EJS
<div>
<%# comment %>
</div>

<div>
<%# comment -%>
</div>
<% /* endcomment */ %>
HTML
<div>

</div>

<div>
</div>

Literal Tags​

In regards to all the other tags, the literal tags are special as they do not need a closing tag to function. However, be careful when using these tags because the < and > characters might need to be escaped as &lt; and &gt; respectively.

For example:

EJS
<pre>This is literal: <%%</pre>
<pre>This is literal too: <%% %></pre>
<pre>This is literal as well: %%></pre>
HTML
<pre>This is literal: <%</pre>
<pre>This is literal too: <% %></pre>
<pre>This is literal as well: %></pre>

Version​

You can see all versions of EJS here

Reference​