Skip to navigation Skip to main content
11ty Logo Sustainability Fundraising
Eleventy
Eleventy Documentation
Stable
2.0.1
Canary
3.0.0-alpha.10
Toggle Menu
Eleventy 5.81s
Astro 12.52s

Transforms

Transforms can modify a template’s output. For example, use a transform to format/prettify an HTML file with proper whitespace.

INFO:
The provided transform function must return the original or transformed content.
Filename .eleventy.js
module.exports = function (eleventyConfig) {
// Can be sync or async
eleventyConfig.addTransform("transform-name", async function (content) {
console.log(this.page.inputPath);
console.log(this.page.outputPath);

return content; // no changes made.
});
};

Access to Eleventy’s page variable (via this.page) was added in Eleventy v2.0. For previous versions, consult the older versions of the docs.

Order of Execution Jump to heading

Transforms are executed in order of insertion in your configuration file.

eleventyConfig.addTransform("first", () => {});
eleventyConfig.addTransform("second", () => {});
eleventyConfig.addTransform("third", () => {});

Plugins Jump to heading

Transforms added via plugins are inserted via the second configuration stage for plugins.

eleventyConfig.addPlugin(eleventyConfig => {
eleventyConfig.addTransform("third", () => {});
});
eleventyConfig.addTransform("first", () => {});
eleventyConfig.addTransform("second", () => {});

Examples Jump to heading

Minify HTML Output Jump to heading

Filename .eleventy.js
const htmlmin = require("html-minifier");

module.exports = function (eleventyConfig) {
eleventyConfig.addTransform("htmlmin", function (content) {
if ((this.page.outputPath || "").endsWith(".html")) {
let minified = htmlmin.minify(content, {
useShortDoctype: true,
removeComments: true,
collapseWhitespace: true,
});

return minified;
}

// If not an HTML output, return content as-is
return content;
});
};

Other pages in Configuration: