Stand with Ukraine 🇺🇦
Eleventy
The possum is Eleventy’s mascot

Eleventy Documentation

Menu

Filters #

A filter is a function which can be used within templating syntax to transform data into a more presentable format. Filters are typically designed to be chained, so that the value returned from one filter is piped into the next filter.

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

View this example in: 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>`;
};

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
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, Nunjucks, Liquid, and Handlebars.

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

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