JavaScript Template Literals

Eleventy Short Name	File Extension	NPM Package
`jstl`	`.jstl`	N/A

For most use cases, it’s recommended to use the standard JavaScript template type, which has more comprehensive support for template literals.

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

JavaScript Template Literal files behave like other Eleventy template languages: primarily because they support Front Matter and don’t necessarily look like JavaScript.

For .jstl files, tagged templates are not yet supported. Use the JavaScript template type if you want to use tagged templates.

Read more about JavaScript Template Literals on MDN.

Samples #

This works the same as any other template. You can include front matter and everything outside the front matter will be parsed as a standard JavaScript Template Literal.

Filename name-sample.jstl

---
name: zach
---
<p>${name.toUpperCase()}</p>

While backticks around your template content are considered optional, you can include them if you’d like.

Filename name-sample-with-backticks.jstl

---
name: zach
---
`<p>${name.toUpperCase()}</p>`

Eleventy Documentation

JavaScript Template Literals

Template Languages:

Samples #