11tyThe possum is Eleventy’s mascot

Eleventy Documentation

This is an older version of Eleventy. Full release history. Go to the newest Eleventy docs. You could try /docs/filters/ although it may not exist.
Documentation Menu

Filters #

Various template engines can be extended with custom filters to modify content. Here’s an example:

Syntax Nunjucks or Liquid
<h1>{{ name | makeUppercase }}</h1>
Syntax Handlebars
<h1>{{ makeUppercase name }}</h1>
Syntax JavaScript
New in v0.7.0
module.exports = function({name}) {
  return `<h1>${this.makeUppercase(name)}</h1>`;
};

These can be added using the Configuration API. Here are a few examples:

Filename .eleventy.js
module.exports = function(eleventyConfig) {
  // Liquid Filter
  eleventyConfig.addLiquidFilter("makeUppercase", function(value) { … });
  
  // Nunjucks Filter
  eleventyConfig.addNunjucksFilter("makeUppercase", function(value) { … });
  
  // Handlebars Filter
  eleventyConfig.addHandlebarsHelper("makeUppercase", function(value) { … });

  // JavaScript Template Function (New in 0.7.0)
  eleventyConfig.addJavaScriptFunction("makeUppercase", function(value) { … });
  
  // or, use a Universal filter (an alias for all of the above)
  eleventyConfig.addFilter("makeUppercase", function(value) { … });
};

Read more about filters on the individual Template Language documentation pages:

Universal Filters #

Universal filters can be added in a single place and are available to multiple template engines, simultaneously. This is currently supported in JavaScript (New in 0.7.0), Nunjucks, Liquid, and Handlebars.

Filename .eleventy.js
module.exports = function(eleventyConfig) {
  // Universal filters adds to:
  // * Liquid
  // * Nunjucks
  // * Handlebars
  // * JavaScript (New in 0.7.0)

  eleventyConfig.addFilter("myFilter", function(value) {
    return value;
  });
};

Eleventy Provided Universal Filters #

We also provide a few universal filters, built-in:

Related Docs