Why Custom Delimiters?
Sometimes EJS's default <% and %> conflict with other template engines or libraries in your project. Custom delimiters let you change these markers to something else.
var ejs = require("ejs");
var template = ejs.compile("<?= name ?>", { delimiter: "?" });
var html = template({ name: "Bilal" });
Here we switched from <% to <?. Now EJS won't interfere with other template syntax.
Setting the Delimiter
Pass a delimiter option when compiling a template. The character you choose becomes the marker for all tag types.
var ejs = require("ejs");
var template = ejs.compile(
"<?= user.name ?> is <?= user.age ?> years old.",
{ delimiter: "?" }
);
var result = template({ user: { name: "Sara", age: 22 } });
The delimiter must be a single character. It replaces the <% opener for output, scriptlet, and comment tags.
Using Question Mark Delimiters
The question mark is a popular choice because it's rarely used in HTML or JavaScript template literals.
<?= title ?>
<? var items = ["a", "b", "c"]; ?>
<? items.forEach(function(item) { ?>
<p><?= item ?></p>
<? }); ?>
<?# This is a comment with custom delimiters ?>
All three tag types work the same way — just with ? instead of %.
When Custom Delimiters Help
Custom delimiters are especially useful when embedding EJS inside frameworks that already use angle brackets heavily, like Angular or Vue.
var ejs = require("ejs");
var angularFriendly = ejs.compile(
"<div ng-app="app"><?= message ?></div>",
{ delimiter: "?" }
);
var html = angularFriendly({ message: "Hello!" });
Pick a delimiter that doesn't clash with the other tools in your stack. Common choices are ?, =, or ~.