What template languages and content features does Eleventy support?

Updated

Eleventy supports a wide range of template languages — from HTML and Markdown to JavaScript, TypeScript, WebC, Nunjucks, Liquid, Handlebars, Mustache, EJS, HAML, Pug, and Sass — and pairs them with a data cascade, layouts, collections, pagination, and a plugin/config system. You can mix languages within one project, so the practical answer is: pick whatever fits each file, and Eleventy will render it to static output.

Template languages

Eleventy's documented template languages fall into a few groups:

Group Languages
Core web formats HTML, Markdown, MDX
JavaScript-family JavaScript, JSX, TypeScript
Component-oriented WebC
Traditional templating Nunjucks, Liquid, Handlebars, Mustache, EJS, HAML, Pug
Stylesheet Sass

Because these are listed as supported template languages, a single project can use Markdown for blog posts, Nunjucks or Liquid for shared layouts, and JavaScript or TypeScript for data-driven pages. Eleventy also documents overriding languages and virtual templates, which matter when you want custom handling rather than the default file-extension mapping.

Content and data features

Beyond rendering syntax, Eleventy's content model is what lets you organize a site:

  • Front matter data — per-file metadata, including custom front matter.
  • Data cascade — the documented order in which data from template, directory, and global sources is merged.
  • Template & directory data files and global data files — shared data scoped to a folder or the whole project.
  • JavaScript data files and custom data file formats — generate data programmatically.
  • Computed data — derive values from other data.
  • Validate data — check data before it reaches templates.
  • Layouts — wrap content in shared structure.
  • Collections and the Collections API — group content and query it.
  • Pagination and pagination navigation — generate multiple pages from one template.
  • Permalinks — control output URLs.
  • Content dates — drive ordering and date-based logic.
  • Create pages from data — build pages directly from data sources.

Extending the build

Configuration and plugins cover the parts templates don't:

  • Configuration file and global data for project-wide settings.
  • Filters (url, slugify, log, get*CollectionItem, inputPathToUrl) and shortcodes (getBundle, getBundleFileUrl) for reusable template logic.
  • Plugins, including official ones for Image, Fetch, Render, i18n, Upgrade Helper, RSS, Syntax Highlighting, InputPath to URL, Navigation, and HTML Bundle Id Attribute, plus community plugins.
  • Preprocess and postprocess content hooks, ignore files, and environment variables.
  • Internationalization (i18n) support.
  • Watch files and dev servers, including the Eleventy Dev Server and Vite.
  • A Programmatic API and configuration events for advanced builds.

Getting started with a template language

  1. Confirm you can run JavaScript: Eleventy recommends Node.js version 18 or newer. Check with node --version in a Terminal; if it's missing or below 18, install Node.js first.
  2. Create a content file, for example an index.md Markdown file, using your editor or a terminal command such as echo '# Heading' > index.md.
  3. Add a layout or data file when you need shared structure or site-wide values.
  4. Run the build and verify the generated output — the expected result is static HTML produced from your chosen template language.

Common pitfalls are documented under Common Pitfalls, and the Glossary and Quick Tips pages are useful when a term or behavior is unclear.

Choosing a language

There's no single required language. Use Markdown or HTML for straightforward content, a traditional templating language (Nunjucks, Liquid, Handlebars, Mustache, EJS, HAML, Pug) when you want logic in markup, and JavaScript, JSX, TypeScript, or WebC when you want components or programmatic rendering. If you're unsure, start with Markdown plus one templating language for layouts, then add others as the project grows — Eleventy's data cascade and collections work the same way regardless of which language a given file uses.