Skip to navigation Skip to main content
Eleventy
Eleventy Documentation
Blog
11ty is joining Font AwesomeIndieWeb Avatar for https://fontawesome.com/
Versions
Stable
3.0.0
Toggle Menu
Compare ×4000 file build
Eleventy 1.93s
Next.js 70.65s

EJS

Template Languages:
Contents

Eleventy Short Name File Extension npm Package
ejs .ejs ejs

You can override a .ejs file’s template engine. Read more at Changing a Template’s Rendering Engine.

Installation

The ejs templating language was moved out of Eleventy core in v3 and now requires a plugin installation.

Add to your configuration file:

eleventy.config.js
import ejsPlugin from "@11ty/eleventy-plugin-ejs";

export default function (eleventyConfig) {
	eleventyConfig.addPlugin(ejsPlugin);
}
const ejsPlugin = require("@11ty/eleventy-plugin-ejs");

module.exports = function (eleventyConfig) {
	eleventyConfig.addPlugin(ejsPlugin);
}

Use more ejs options (full options list):

eleventy.config.js
import ejs from "ejs";
import ejsPlugin from "@11ty/eleventy-plugin-ejs";

export default function (eleventyConfig) {
	eleventyConfig.addPlugin(ejsPlugin, {
		async: false, // default

		// use <? ?> instead of <% %>
		delimiter: "?",

		// Override the `ejs` library instance
		eleventyLibraryOverride: ejs,
	});
}
const ejs = require("ejs");
const ejsPlugin = require("@11ty/eleventy-plugin-ejs");

module.exports = function (eleventyConfig) {
	eleventyConfig.addPlugin(ejsPlugin, {
		async: false, // default

		// use <? ?> instead of <% %>
		delimiter: "?",

		// Override the `ejs` library instance
		eleventyLibraryOverride: ejs,
	});
}

Supported Features

Feature Syntax
✅ Include (Preprocessor Directive) <% include /user/show %> looks for _includes/user/show.ejs (the leading slash is important). Does not process front matter in the include file.
✅ Includes (Relative Path, Preprocessor Directive) Relative paths in ejs can leave off the leading slash / or use ./ to use the template’s directory or ../ for the template’s parent directory:
<% include 'user/show' %> or <% include './user/show' %> looks for ./user/show.ejs from the template’s current directory. Does not process front matter in the include file.
✅ Include (pass in Data) <%- include('/user/show', {user: 'Ava'}) %> looks for _includes/user/show.ejs. Does not process front matter in the include file.
✅ Include (Relative Path, pass in Data) Relative paths in ejs can leave off the leading slash / or use ./ to use the template’s directory or ../ for the template’s parent directory:
<%- include('user/show', {user: 'Ava'}) %> or <%- include('./user/show', {user: 'Ava'}) %> looks for ./user/show.ejs from the template’s current directory. Does not process front matter in the include file.

Other pages in Template Languages: