Black Lives Matter The Equal Justice Initiative We The Protesters Delete Facebook
Eleventy The possum is Eleventy’s mascot

Eleventy Documentation

Menu

Filters #

Various template engines can be extended with custom filters to modify content. Here are a few examples:

Language: Nunjucks Liquid Handlebars 11ty.js
Filename sample.njk
<h1>{{ name | makeUppercase }}</h1>
Filename sample.liquid
<h1>{{ name | makeUppercase }}</h1>
Filename sample.hbs
<h1>{{ makeUppercase name }}</h1>
Filename sample.11ty.js
module.exports = function({name}) {
return `<h1>${this.makeUppercase(name)}</h1>`;
};

This feature was New in v0.7.0.

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 add 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:

Access existing filters New in v0.11.0 #

If you’d like to reuse existing filters in a different way, consider using the new Configuration API getFilter method. You can use this to alias a filter to a different name. You can use this to use a filter inside of your own filter. You can use this to use a filter inside of a shortcode.

module.exports = function(eleventyConfig) {
eleventyConfig.addShortcode("myCustomImage", function(url, alt) {
return `<img src="${eleventyConfig.getFilter("url", url)}"> alt="${alt}">`;
});
};

Other pages in Configuration:


Related Docs