Eleventy Documentation

Custom Data File Formats

2026-07-21T18:59:53Z

Custom Data File Formats

On this page

Out of the box, Eleventy supports arbitrary JavaScript and JSON for both template and directory data files as well as global data.

Maybe you want to add support for TOML or YAML too! Any text format will do.

Note that you can also add Custom Front Matter Formats as well.

Usage

eleventy.config.js

ESM CommonJS

export default function (eleventyConfig) {
	// Receives file contents, return parsed data
	eleventyConfig.addDataExtension("fileExtension", (contents, filePath) => {
		return {};
	});
};

module.exports = function (eleventyConfig) {
	// Receives file contents, return parsed data
	eleventyConfig.addDataExtension("fileExtension", (contents, filePath) => {
		return {};
	});
};

Added in v2.0.0 Pass a comma-separated list of extensions.
Added in v2.0.0 filePath was added as a second argument.

Usage with Options Added in v2.0.0

eleventy.config.js

ESM CommonJS

export default function (eleventyConfig) {
	// or with options (new in 2.0)
	eleventyConfig.addDataExtension("fileExtension", {
		parser: (contents, filePath) => ({}),

		// defaults are shown:
		read: true,
		encoding: "utf8",
	});
};

module.exports = function (eleventyConfig) {
	// or with options (new in 2.0)
	eleventyConfig.addDataExtension("fileExtension", {
		parser: (contents, filePath) => ({}),

		// defaults are shown:
		read: true,
		encoding: "utf8",
	});
};

parser: the callback function used to parse the data. The first argument is the data file’s contents (unless read: false). The second argument is the file path Added in v2.0.0.
read (default: true): use read: false to change the parser function’s first argument to be a file path string instead of file contents.
encoding (default: "utf8"): use this to change the encoding of Node’s readFile. Use null if you want a Buffer.

Examples

YAML

Here we’re using the yaml package. Don’t forget to npm install yaml.

eleventy.config.js

ESM CommonJS

import YAML from "yaml";

export default function (eleventyConfig) {
	eleventyConfig.addDataExtension("yaml", (contents) => YAML.parse(contents));
};

const YAML = require("yaml");

module.exports = function (eleventyConfig) {
	eleventyConfig.addDataExtension("yaml", (contents) => YAML.parse(contents));
};

TOML

Here we’re using the @iarna/toml package. Don’t forget to npm install @iarna/toml.

eleventy.config.js

ESM CommonJS

import toml from "@iarna/toml";

export default function (eleventyConfig) {
	eleventyConfig.addDataExtension("toml", (contents) => toml.parse(contents));
};

const toml = require("@iarna/toml");

module.exports = function (eleventyConfig) {
	eleventyConfig.addDataExtension("toml", (contents) => toml.parse(contents));
};

JSON5 - JSON for Humans

JSON5 is an extension to JSON that aims to be easier to write and maintain by hand. It omits quotes for the keys, allows for comments, trailing spaces, line breaks, and more. JSON5 is backwards-compatible with JSON. Don’t forget to npm install json5.

eleventy.config.js

ESM CommonJS

import JSON5 from "json5";

export default function (eleventyConfig) {
	eleventyConfig.addDataExtension("json5", (contents) => JSON5.parse(contents));
};

const JSON5 = require("json5");

module.exports = function (eleventyConfig) {
	eleventyConfig.addDataExtension("json5", (contents) => JSON5.parse(contents));
};

Adding a custom JSON file extension

eleventy.config.js

ESM CommonJS

export default function (eleventyConfig) {
	eleventyConfig.addDataExtension("geojson", (contents) => JSON.parse(contents));
};

module.exports = function (eleventyConfig) {
	eleventyConfig.addDataExtension("geojson", (contents) => JSON.parse(contents));
};

Feed EXIF image data into the Data Cascade

Added in v2.0.0 This uses the exifr package to read image EXIF data. Don’t forget to npm install exifr.

Note that the second argument is an object with a parser function.

eleventy.config.js

ESM CommonJS

import exifr from "exifr";

export default function (eleventyConfig) {
	eleventyConfig.addDataExtension("png,jpeg", {
		parser: async (file) => {
			let exif = await exifr.parse(file);

			return {
				exif,
			};
		},

		// Using `read: false` changes the parser argument to
		// a file path instead of file contents.
		read: false,
	});
};

const exifr = require("exifr");

module.exports = function (eleventyConfig) {
	eleventyConfig.addDataExtension("png,jpeg", {
		parser: async (file) => {
			let exif = await exifr.parse(file);

			return {
				exif,
			};
		},

		// Using `read: false` changes the parser argument to
		// a file path instead of file contents.
		read: false,
	});
};

Example using a template data file:
- Given my-blog-post.md and my-blog-post.jpeg then exif will be available for use in my-blog-post.md (e.g. {{ exif | log }})
Example using a global data file:
- Given _data/images/custom.jpeg then images.custom.exif will be available for use on any template (e.g. {{ images.custom.exif | log }})

Ordering in the Data Cascade

Note that in the data cascade there is a specific conflict resolution order when the same keys are used in data files. For example, JavaScript files take priority over JSON. These new custom data file formats are treated as lower priority than both JavaScript and JSON.

If you add multiple file extensions, the latter ones take priority over the earlier ones. In the following example, if there is ever conflicting data between *.toml and *.yaml files, the yaml file will take precedence.

eleventy.config.js

ESM CommonJS

import toml from "@iarna/toml";
import yaml from "js-yaml";

export default function (eleventyConfig) {
	// Lower priority
	eleventyConfig.addDataExtension("toml", (contents) => toml.parse(contents));

	// Higher priority
	eleventyConfig.addDataExtension("yaml", (contents) => yaml.load(contents));
};

const toml = require("@iarna/toml");
const yaml = require("js-yaml");

module.exports = function (eleventyConfig) {
	// Lower priority
	eleventyConfig.addDataExtension("toml", (contents) => toml.parse(contents));

	// Higher priority
	eleventyConfig.addDataExtension("yaml", (contents) => yaml.load(contents));
};

Example

Consider the template data file search for a my-first-blog-post.md file. The order with custom toml and yaml formats (as seen above) will go as follows:

my-first-blog-post.11tydata.js
my-first-blog-post.11tydata.json
my-first-blog-post.11tydata.yaml (custom)
my-first-blog-post.11tydata.toml (custom)
my-first-blog-post.json
my-first-blog-post.yaml (custom)
my-first-blog-post.toml (custom)

This same ordering would be used for template directory data files as well.

You can also use the setDataFileSuffixes Configuration API method to customize the .11tydata file suffix.

Release History

2026-07-02T15:57:58Z

Release History

You can also browse the latest releases on:

Major Branches

build.awesome.me for v4 (Currently in alpha)
www.11ty.dev for v3 (Latest Stable)
v2.11ty.dev
v1.11ty.dev
v0.11ty.dev

Full Release History

×226 releases total since November 26, 2017

Version	Docs	Date	More…
`v4.0.0-alpha.10` Prerelease		2026 Jul 01	GitHub Release
`v4.0.0-alpha.9` Prerelease		2026 Jul 01	GitHub Release
`v4.0.0-alpha.8` Prerelease		2026 Jun 18	GitHub Release
`v4.0.0-alpha.7` Prerelease		2026 Mar 20	GitHub Release
`v4.0.0-alpha.6` Prerelease		2025 Dec 11	GitHub Release
`v4.0.0-alpha.5` Prerelease		2025 Dec 05	GitHub Release
`v4.0.0-alpha.4` Prerelease		2025 Aug 01	GitHub Release
`v4.0.0-alpha.3` Prerelease		2025 Jul 30	GitHub Release
`v4.0.0-alpha.2` Prerelease		2025 Jul 30	GitHub Release
`v4.0.0-alpha.1` Prerelease		2025 Jul 30	GitHub Release
`v3.1.6`	Docs	2026 Jun 02	GitHub Release
`v3.1.5`	Docs	2026 Mar 18	GitHub Release
`v3.1.4`	Docs	2026 Mar 18	GitHub Release
`v3.1.3`	Docs	2026 Mar 18	GitHub Release
`v3.1.2`	Docs	2025 Jun 24	GitHub Release
`v3.1.2-beta.4` Prerelease		2025 Jun 23	GitHub Release
`v3.1.2-beta.3` Prerelease		2025 Jun 20	GitHub Release
`v3.1.2-beta.2` Prerelease		2025 Jun 18	GitHub Release
`v3.1.2-beta.1` Prerelease		2025 Jun 16	GitHub Release
`v3.1.1`	Docs	2025 Jun 03	GitHub Release
`v3.1.1-beta.3` Prerelease		2025 May 31	GitHub Release
`v3.1.1-beta.2` Prerelease		2025 May 31	GitHub Release
`v3.1.1-beta.1` Prerelease		2025 May 30	GitHub Release
`v3.1.0`	Docs	2025 May 13	GitHub Release
`v3.1.0-beta.1` Prerelease		2025 Apr 18	GitHub Release
`v3.1.0-alpha.1` Prerelease		2025 Apr 14	GitHub Release
`v3.0.1-alpha.5` Prerelease		2025 Mar 14	GitHub Release
`v3.0.1-alpha.4` Prerelease		2025 Jan 29	GitHub Release
`v3.0.1-alpha.3` Prerelease		2025 Jan 14	GitHub Release
`v3.0.1-alpha.2` Prerelease		2025 Jan 14	GitHub Release
`v3.0.1-alpha.1` Prerelease		2024 Dec 20	GitHub Release
`v3.0.0`	Docs	2024 Oct 01	GitHub Release
`v3.0.0-beta.2` Prerelease		2024 Sep 30	GitHub Release
`v3.0.0-beta.1` Prerelease		2024 Jul 31	GitHub Release
`v3.0.0-alpha.20` Prerelease		2024 Sep 11	GitHub Release
`v3.0.0-alpha.19` Prerelease		2024 Sep 04	GitHub Release
`v3.0.0-alpha.18` Prerelease		2024 Jul 30	GitHub Release
`v3.0.0-alpha.17` Prerelease		2024 Jul 16	GitHub Release
`v3.0.0-alpha.16` Prerelease		2024 Jul 09	GitHub Release
`v3.0.0-alpha.15` Prerelease		2024 Jul 09	GitHub Release
`v3.0.0-alpha.14` Prerelease		2024 Jun 27	GitHub Release
`v3.0.0-alpha.13` Prerelease		2024 Jun 12	GitHub Release
`v3.0.0-alpha.12` Prerelease		2024 Jun 11	GitHub Release
`v3.0.0-alpha.11` Prerelease		2024 Jun 10	GitHub Release
`v3.0.0-alpha.10` Prerelease			GitHub Tag
`v3.0.0-alpha.9` Prerelease			GitHub Tag
`v3.0.0-alpha.7` Prerelease			GitHub Tag
`v3.0.0-alpha.5` Prerelease			GitHub Tag
`v3.0.0-alpha.4` Prerelease			GitHub Tag
`v3.0.0-alpha.3` Prerelease			GitHub Tag
`v3.0.0-alpha.2` Prerelease			GitHub Tag
`v3.0.0-alpha.1` Prerelease			GitHub Tag
`v2.0.2-alpha.2` Prerelease			GitHub Tag
`v2.0.2-alpha.1` Prerelease			GitHub Tag
`v2.0.1`	Docs	2023 Mar 28	GitHub Release
`v2.0.1-beta.2` Prerelease			GitHub Tag
`v2.0.1-beta.1` Prerelease			GitHub Tag
`v2.0.1-alpha.3` Prerelease			GitHub Tag
`v2.0.1-alpha.2` Prerelease			GitHub Tag
`v2.0.1-alpha.1` Prerelease			GitHub Tag
`v2.0.0`	Docs	2023 Feb 08	GitHub Release
`v2.0.0-canary.35` Prerelease			GitHub Tag
`v2.0.0-canary.34` Prerelease			GitHub Tag
`v2.0.0-canary.33` Prerelease			GitHub Tag
`v2.0.0-canary.32` Prerelease			GitHub Tag
`v2.0.0-canary.31` Prerelease			GitHub Tag
`v2.0.0-canary.30` Prerelease			GitHub Tag
`v2.0.0-canary.29` Prerelease			GitHub Tag
`v2.0.0-canary.28` Prerelease			GitHub Tag
`v2.0.0-canary.27` Prerelease			GitHub Tag
`v2.0.0-canary.26` Prerelease			GitHub Tag
`v2.0.0-canary.25` Prerelease			GitHub Tag
`v2.0.0-canary.24` Prerelease			GitHub Tag
`v2.0.0-canary.23` Prerelease			GitHub Tag
`v2.0.0-canary.22` Prerelease			GitHub Tag
`v2.0.0-canary.21` Prerelease			GitHub Tag
`v2.0.0-canary.20` Prerelease			GitHub Tag
`v2.0.0-canary.19` Prerelease			GitHub Tag
`v2.0.0-canary.18` Prerelease			GitHub Tag
`v2.0.0-canary.17` Prerelease			GitHub Tag
`v2.0.0-canary.15` Prerelease			GitHub Tag
`v2.0.0-canary.14` Prerelease			GitHub Tag
`v2.0.0-canary.13` Prerelease			GitHub Tag
`v2.0.0-canary.12` Prerelease			GitHub Tag
`v2.0.0-canary.11` Prerelease			GitHub Tag
`v2.0.0-canary.10` Prerelease			GitHub Tag
`v2.0.0-canary.9` Prerelease			GitHub Tag
`v2.0.0-canary.8` Prerelease			GitHub Tag
`v2.0.0-canary.7` Prerelease			GitHub Tag
`v2.0.0-canary.6` Prerelease			GitHub Tag
`v2.0.0-canary.5` Prerelease			GitHub Tag
`v2.0.0-canary.4` Prerelease			GitHub Tag
`v2.0.0-canary.3` Prerelease			GitHub Tag
`v2.0.0-canary.2` Prerelease			GitHub Tag
`v2.0.0-canary.1` Prerelease			GitHub Tag
`v2.0.0-beta.3` Prerelease		2023 Jan 30	GitHub Release
`v2.0.0-beta.2` Prerelease		2023 Jan 26	GitHub Release
`v2.0.0-beta.1` Prerelease		2023 Jan 18	GitHub Release
`v1.0.2`	Docs	2022 Aug 16	GitHub Release
`v1.0.1`	Docs	2022 Apr 18	GitHub Release
`v1.0.1-canary.4` Prerelease			GitHub Tag
`v1.0.1-canary.3` Prerelease			GitHub Tag
`v1.0.1-canary.2` Prerelease			GitHub Tag
`v1.0.1-canary.1` Prerelease			GitHub Tag
`v1.0.0`	Docs	2022 Jan 08	GitHub Release
`v1.0.0-canary.50` Prerelease			GitHub Tag
`v1.0.0-canary.49` Prerelease			GitHub Tag
`v1.0.0-canary.48` Prerelease			GitHub Tag
`v1.0.0-canary.47` Prerelease			GitHub Tag
`v1.0.0-canary.46` Prerelease			GitHub Tag
`v1.0.0-canary.45` Prerelease			GitHub Tag
`v1.0.0-canary.44` Prerelease			GitHub Tag
`v1.0.0-canary.43` Prerelease			GitHub Tag
`v1.0.0-canary.42` Prerelease			GitHub Tag
`v1.0.0-canary.41` Prerelease			GitHub Tag
`v1.0.0-canary.40` Prerelease			GitHub Tag
`v1.0.0-canary.39` Prerelease			GitHub Tag
`v1.0.0-canary.38` Prerelease			GitHub Tag
`v1.0.0-canary.37` Prerelease			GitHub Tag
`v1.0.0-canary.36` Prerelease			GitHub Tag
`v1.0.0-canary.35` Prerelease			GitHub Tag
`v1.0.0-canary.34` Prerelease			GitHub Tag
`v1.0.0-canary.33` Prerelease			GitHub Tag
`v1.0.0-canary.32` Prerelease			GitHub Tag
`v1.0.0-canary.31` Prerelease			GitHub Tag
`v1.0.0-canary.30` Prerelease			GitHub Tag
`v1.0.0-canary.29` Prerelease			GitHub Tag
`v1.0.0-canary.28` Prerelease			GitHub Tag
`v1.0.0-canary.27` Prerelease			GitHub Tag
`v1.0.0-canary.26` Prerelease			GitHub Tag
`v1.0.0-canary.25` Prerelease			GitHub Tag
`v1.0.0-canary.24` Prerelease			GitHub Tag
`v1.0.0-canary.23` Prerelease			GitHub Tag
`v1.0.0-canary.22` Prerelease			GitHub Tag
`v1.0.0-canary.21` Prerelease			GitHub Tag
`v1.0.0-canary.20` Prerelease			GitHub Tag
`v1.0.0-canary.19` Prerelease			GitHub Tag
`v1.0.0-canary.18` Prerelease			GitHub Tag
`v1.0.0-canary.17` Prerelease			GitHub Tag
`v1.0.0-canary.16` Prerelease			GitHub Tag
`v1.0.0-canary.15` Prerelease			GitHub Tag
`v1.0.0-canary.14` Prerelease			GitHub Tag
`v1.0.0-canary.13` Prerelease			GitHub Tag
`v1.0.0-canary.12` Prerelease			GitHub Tag
`v1.0.0-canary.11` Prerelease			GitHub Tag
`v1.0.0-canary.10` Prerelease			GitHub Tag
`v1.0.0-canary.9` Prerelease			GitHub Tag
`v1.0.0-canary.8` Prerelease			GitHub Tag
`v1.0.0-canary.7` Prerelease			GitHub Tag
`v1.0.0-canary.6` Prerelease			GitHub Tag
`v1.0.0-canary.5` Prerelease			GitHub Tag
`v1.0.0-canary.4` Prerelease			GitHub Tag
`v1.0.0-canary.3` Prerelease			GitHub Tag
`v1.0.0-canary.1` Prerelease			GitHub Tag
`v1.0.0-beta.10` Prerelease			GitHub Tag
`v1.0.0-beta.9` Prerelease			GitHub Tag
`v1.0.0-beta.8` Prerelease			GitHub Tag
`v1.0.0-beta.7` Prerelease			GitHub Tag
`v1.0.0-beta.6` Prerelease			GitHub Tag
`v1.0.0-beta.5` Prerelease			GitHub Tag
`v1.0.0-beta.4` Prerelease			GitHub Tag
`v1.0.0-beta.3` Prerelease			GitHub Tag
`v1.0.0-beta.2` Prerelease			GitHub Tag
`v1.0.0-beta.1` Prerelease			GitHub Tag
`v0.12.1`	Docs	2021 Mar 19	GitHub Release
`v0.12.0`	Docs	2021 Mar 19	GitHub Release
`v0.11.1`	Docs	2020 Oct 22	GitHub Release
`v0.11.0`	Docs	2020 May 10	GitHub Release
`v0.11.0-beta.4` Prerelease			GitHub Tag
`v0.11.0-beta.3` Prerelease			GitHub Tag
`v0.11.0-beta.2` Prerelease			GitHub Tag
`v0.11.0-beta.1` Prerelease			GitHub Tag
`v0.10.0`	Docs	2020 Jan 07	GitHub Release
`v0.10.0-beta.2` Prerelease		2020 Jan 04	GitHub Release
`v0.10.0-beta.1` Prerelease		2019 Dec 09	GitHub Release
`v0.9.0`	Docs	2019 Aug 27	GitHub Release
`v0.9.0-beta.3` Prerelease			GitHub Tag
`v0.9.0-beta.2` Prerelease		2019 Aug 17	GitHub Release
`v0.9.0-beta.1` Prerelease		2019 Jul 26	GitHub Release
`v0.8.3`	Docs	2019 May 04	GitHub Release
`v0.8.2`	Docs	2019 Apr 09	GitHub Release
`v0.8.1`	Docs	2019 Apr 06	GitHub Release
`v0.8.0`	Docs	2019 Apr 04	GitHub Release
`v0.8.0-beta.1` Prerelease			GitHub Tag
`v0.7.1`	Docs	2019 Jan 12	GitHub Release
`v0.7.0`	Docs	2019 Jan 11	GitHub Release
`v0.6.0`	Docs	2018 Nov 25	GitHub Release
`v0.5.4`	Docs	2018 Sep 28	GitHub Release
`v0.5.3`	Docs	2018 Aug 29	GitHub Release
`v0.5.2`	Docs	2018 Aug 15	GitHub Release
`v0.5.1`	Docs	2018 Aug 15	GitHub Release
`v0.5.0`	Docs	2018 Jul 05	GitHub Release
`v0.4.0`	Docs	2018 Jun 20	GitHub Release
`v0.3.6`	Docs	2018 Jun 07	GitHub Release
`v0.3.5`	Docs	2018 May 22	GitHub Release
`v0.3.4`	Docs	2018 May 11	GitHub Release
`v0.3.3`	Docs	2018 Apr 17	GitHub Release
`v0.3.2`			GitHub Tag
`v0.3.1`	Docs	2018 Apr 05	GitHub Release
`v0.3.0`	Docs	2018 Mar 26	GitHub Release
`v0.2.15`	Docs	2018 Mar 06	GitHub Release
`v0.2.14`	Docs	2018 Feb 16	GitHub Release
`v0.2.13`	Docs
`v0.2.12`	Docs
`v0.2.11`	Docs
`v0.2.10`	Docs	2018 Jan 25	GitHub Release
`v0.2.9`	Docs
`v0.2.8`	Docs
`v0.2.7`	Docs	2018 Jan 17	GitHub Release
`v0.2.6`	Docs	2018 Jan 12	GitHub Release
`v0.2.5`	Docs
`v0.2.4`	Docs
`v0.2.3`	Docs
`v0.2.2`	Docs	2018 Jan 09	GitHub Release
`v0.2.1`	Docs
`v0.2.0`	Docs
`v0.1.9`	Docs
`v0.1.8`	Docs
`v0.1.7`	Docs
`v0.1.6`	Docs
`v0.1.5`	Docs
`v0.1.4`	Docs
`v0.1.3`	Docs
`v0.1.2`	Docs
`v0.1.1`	Docs
`v0.1.0`	Docs

Starter Projects

2026-07-01T21:19:13Z

Starter Projects

eleventy-base-blog

Source code

🎈 Official Starter · How to build a blog web site with Eleventy.

Add your own starter project. Community contributions are shown in random order.

eleventy-excellent

Source code

Featured · Opinionated Eleventy starter based on the workflow suggested by Andy Bell's buildexcellentwebsit.es.

eleventy-libdoc

Source code

Featured · An Eleventy starter project to craft slick and responsive documentation

Grease

Source code

Featured · Grease is a website starter that makes building performant, accessible, aesthetic websites fast & frictionless. It uses 11ty, Lightning CSS, and Esbuild, and includes a lightweight, declarative CSS architecture that sets you up for success.

Ted2xmen

Source code

A starting point with Bootstrap, 11ty, and Sanity.

Minimalism Starter

Source code

A blog template and theme using 11ty, TailwindCSS, PWA etc...

Eleventy Web Starter

Source code

A lightweight Eleventy boilerplate utilising, esbuild Tailwind CSS and Post CSS.

windty 🌬️

Source code

Windty is a basic template using 11ty and Tailwind, and deploys to github pages.

Eleventy Portway Starter

Source code

A starter template for building a blog with Eleventy and Portway

11ty-SASS

Source code

11ty blog starter template with SASS and Dark Mode

Eleventy Classic Blog Starter (ECBS)

Source code

A starter template to build a classic `Hyde` blog with Eleventy.

11ty Beer

Source code

An 11ty blog template with Material Design, PWA and minified files that simply works.

11ty-Contentful-Starter

Source code

An Eleventy powered multipage starter project that uses Contentful to create, and manage pages. The front end utilizes the HTML5UP Solid State theme for layout and styling.

Subtle

Source code

The most subtle Eleventy v4 micro-starter for content-first sites. Powered by Eleventy Blades.

Potfolio Dev BKR

Source code

Porfolio Web Developer Themes + Decap CMS

TEA Stack

Source code

A starting point with TailwindCSS, 11ty, and AlpineJS ready to roll.

eleventy-i18n

Source code

Minimal starter for localized content, using Eleventy's own Internationalization (I18n) plugin

Minimal Developer

Source code

A very minimal developer blog theme built with Eleventy

11ty-portfolio-template

Source code

11ty portfolio powered by bootstrap and nunjucks

Chobble Template

A large, opinionated template with minimalist CSS, for business sites, built with Nix

eleventy-site

Source code

A simple Eleventy site

The Universal Theme

Source code

Simple, fast and eye-catching theme for 11ty

Purple: Eleventy + Stylus Starter Blog

Source code

A nice looking, simple blog theme built with Eleventy SSG and Stylus Preprocessor

Text11ty

Source code

Just a simple text to focus on creating blog article content or you can create a documentation page.

frontenso-11ty-starter

Source code

A production-ready starter that features Nunjucks, SASS, TailwindCSS, Webpack and ESNext. 11ty is responsible for building HTML only, the rest is built with Gulp.

Nulite

Source code

Nulite is a simple, elegant, minimalistic stater project for Eleventy to help you create a simple blog

Eleventy Kickstart Blog

Source code

Kickstart your website with this production-ready template using 11ty, the new vite, tailwindcss and daisyui.

11ty Strawberry

Source code

A boostrap blog template

Jam11ty

Source code

11ty Started Theme for Headless Ecommerce

11ty-hbs-webpack

Source code

Eleventy with Handlebars(support asynchronous helper) and Webpack boilerplate.

11ty-innovative-intro

Source code

11ty Resume/CV powered by TailwindCSS with Light/Dark theme

11ty-no-style-please

Source code

A minimalist blog template for eleventy with Netlify CMS built in

elva

Source code

A multilingual, clean, green, 11ty starter theme. elva provides solid foundations for your next web project and a built in CMS (Front Matter CMS) for managing content.

YATAS

Source code

Yet Another Tailwind Apline Starter. Tailwind v2 compiled in JIT mode and Alpine v3.

Spacebook

Source code

Create fast and simple documentation to explain almost anything. Using Eleventy, Tailwind 2.0, Alpine.js, and Netlify CMS (optional).

Twelvety

Source code

Twelvety is an Eleventy starter project built to be fast, with component architecture, CSS & JS pipelines, a responsive picture shortcode with WebP support and more

11ty-encore

Source code

11ty using webpack encore

deventy

Source code

A minimal 11ty starting point for building static websites with modern tools.

Elf

Source code

Elf is a simple, magical starter kit using webpack, Babel and Sass.

11tyby

Source code

11tyby tries to emulate the great DX of Gatsby, but with 11ty! It's setup with TypeScript, SASS, CSS Modules, Webpack, Preact and more. All optimised for performance.

Wisp

Source code

A minimalist blog template using Pico CSS.

Skeleventy

Source code

A skeleton boilerplate built with Eleventy and Tailwind CSS.

kailoon.com

Source code

My simple portfolio blog built using 11th and tailwindcss.

Tufte

Source code

A minimalist blog template using Tufte CSS.

eleventy-sanity-blog-boilerplate

Source code

An eleventy + headless CMS blog boilerplate. Includes Sanity Studio, quick start, config and instructions for deploying on Netlify and `now`.

beginnersBase11ty

Source code

belt and braces starter for a blog. Includes 11ty's image, rss & navigation plugins + tailwind & fan art!

11ty-notes

Source code

11ty-notes is an Eleventy starter to manage your notes so you don't forget stuff

Link-in-Bio 11ty

Source code

A single page containing a list of links generated from data defined in JS

Fruits Express

Source code

Simple sample with Eleventy & TailwindCSS

Hella Simple 11ty + Tailwind CSS Starter

Source code

Just 2 dependencies, 2 npm scripts, and 1 Tailwind UI freebie to get you started.

Eleventy Markdown Prime

Source code

A minimalistic text-focused Eleventy theme

Clean Blog

Source code

Clean Blog by Start Boostrap

Brook

Handcrafted, clean and minimalisitc 11ty Blog Theme

eleventy-netlify-boilerplate

Source code

A template for building a simple blog web site with Eleventy and deploying it to Netlify. Includes Netlify CMS and Netlify Forms.

11ty-Serene

Source code

A minimal theme for a landing page and integrated blog. Built with 11ty and Sass.

landingpage11ty

Source code

Starter landing page 11ty with auto SEO injection

11ty-vanilla-blog

Source code

A very vanilla 11ty starter for a static blog site with paginated posts and integration with Netlify CMS

Cool11ty

Source code

New eleventy cool 11ty modern blog themes.

11ty-TailScript

Source code

Minimalist, ready to use Eleventy starter project that embarks Tailwind, PostCSS (nesting, imports, media queries, minify), Fontawesome, Webpack, TypeScript and Vite

11tyAI

Source code

A simple 11ty starter site. Includes navigation, SASS, Webpack, and more.

Eleventy Filter Coffee Starter

Source code

A simple Eleventy starter kit with css compiled with Gulp, image optimization with imagemin and asset hashing.

Eleventy Tailwind Template

Source code

Starter template for building Eleventy static sites with Tailwind CSS automatically generating the corresponding styles and writing them to a static CSS file.

11ty-starter

Source code

Demonstration static site and blog using Eleventy as a build tool for all content, CSS, JavaScript, and images.

Eleventy High Performance Blog

Source code

A high performance blog template for the 11ty static site generator.

umbrella

Source code

11ty starter project with indieauth, micropub, and webmentions built in

journa11ty

Source code

Simple blog or journal site built with Eleventy and Pico CSS

Berry Blast

Source code

Modern 11ty v3 starter with TailwindCSS v4, Alpine.js, Pagefind search, Phosphor Icons, Shiki syntax highlighting, and WCAG 2.1 AA accessibility

pack11ty

Source code

An opinionated template for Eleventy projects, with automated collections from folders hierarchy, assets bundling (with Rollup and Sass), responsive images, Service Worker, etc.

11ty-Collected-Notes

Source code

11ty + Collected Notes API

Electric Lime

Source code

Vibrant 11ty v3 starter with TailwindCSS v4, Alpine.js, Pagefind search, Shiki syntax highlighting, image optimization, and WCAG 2.1 AA accessibility

11ty-academic-blog

Source code

Academic blog template, supporting citations, math, optimized printing and more.

agency11ty

Source code

Startup and SEO agency website template eleventy 11ty

11ty-Contentful-Photo-Gallery

Source code

A Photo Gallery made using Contentful and 11ty, deployed via GitHub Actions and hosted on GitHub Pages.

Smix

Source code

A standards-respecting starter kit for Eleventy. Go Indie. Uses PostCSS and esbuild.

imbricate μ

Source code

This website uses the μ css framework.

Elevento

Source code

Elevento is a static links page deployed to github pages.

TEAtime Starter

Source code

A simple stylish Eleventy starter project using Tailwind CSS and Alpine.js that deploys to Netlify

Dockar

Source code

The solution for your documentation website projects built with the 11ty eleventy For speed performance and SEO

Polyglot Tech Blog

Source code

An 11ty starter project for multilingual personal pages and blogs.

microsite

Source code

Opinionated micro front-end that sets common 11ty defaults. Great for creating landing pages.

Complite

Source code

A complete, SEO/GEO/AI-ready Eleventy 3 blog starter. CSS-first dark mode, JSON-LD structured data, Open Graph, RSS, XML sitemap, llms.txt for AI agents, SQLite full-text search, PHP contact form with bot protection, Prism syntax highlighting, and content negotiation for markdown — zero client JS required.

Long Reads

Source code

A customizeable long reads instapaper style theme

Simple Journal

Source code

A simple journal/photo log website built on top of 11ty.

Eleventy-Zones

A newcomer-oriented starter project for making Zonelets-style blogs with Eleventy.

My Online Cookbook

Source code

An easily customisable starter kit to create your own cookbook of online recipes, using Netlify CMS.

Bootstrap Starter Kit

Source code

Minimal starter template for websites using Bootstrap 5 and Webpixels CSS next to the Eleventy static site generator.

11ty Eddy

Source code

An 11ty port of #minicomp Jekyll Ed

eleventy-wcag-reporter

Source code

A starter pack for creating WCAG conformance reports with Eleventy

eleventy-webpack

Source code

A barebone Eleventy and Webpack boilerplate 🎈

Build Awesome Starter(s)

Source code

Modern, lightweight Eleventy v4 multi-site starter showcasing Eleventy Blades and Tailwind CLI for: 1) Tailwind 2) Pico 3) Simple CSS.

Eleventy Starter Boilerplate

Source code

🚀 Eleventy Starter Boilerplate is production-ready with SEO-friendly for quickly starting a blog. ⚡️ Built with Eleventy, ESLint, Prettier, Webpack, PostCSS, Tailwind CSS.

Tisot

Source code

A blog template and starter project, based on Eleventy and TailwindCSS/daisyUI. RTL friendly.

Eleventy Liquid Live Preview

Source code

A starter project for the simple Eleventy site that pulls the data from Contentful, but also allows the live preview on Contentful.

Eleventy Skeleton

Source code

Barebones Eleventy. No dependencies or preprocessors.

eleventyone

Source code

is an Eleventy scaffold project created by the legendary Phil Hawksworth. Makes use of Eleventy and PostCSS.

11ty Netlify Jumpstart

Includes a minimal Sass framework, and generated sitemap, RSS feed, and social share preview images.

nonplain-11ty-starter

Source code

Create an 11ty website out of nonplain files

Captain's Log

Source code

An old timey blog theme with blog posts that looks like old letters.

11ty-get-going

Source code

Get Going is an 11ty starter project for simple blogs, small sites and prototypes. Includes 11ty pagination, navigation, image and RSS examples

eleventonia

Source code

A mildly opinionated Eleventy starter.

11ty-plain-bootstrap5

Source code

Simple plain starter with 11ty and Bootstrap5 (via npm)

Seven

An eleventy template based on bootstrap4layouts. Includes webpack, sass version of bootstrap, vue.js powered search and a whole lot more.

Elevenpack

Source code

An Eleventy starter pack with webpack, PostCSS and cache busting for production deployments.

vredeburg

Source code

A simple starter project to create a blog using Eleventy and Tailwind CSS.

Fundamenty

Source code

Multi-language support, SEO-friendly, GitHub/GitLab Pages-ready. TailwindCSS+Webpack.

11ty-blog-starter

Source code

Minimal blog template. Supports browsing in the internet without Javascript.

WP 11ty

Source code

A minimal example showing how to use the WordPress API to drive a static Eleventy frontend.

cloudcannon11ty

Source code

Simple Starter Blog 11ty integration with cloudcannon headless cms

11ty-sensible

Source code

11ty with sensible defaults. SCSS, excerpts, minification and more!

eleventastic

Source code

A simple Eleventy Starter Kit, the Max Böck base for all new 11ty projects.

eleventy-blog-mnml

Source code

A minimal blog template using eleventy

Eleventy Starter Ghost

Source code

A starter template to build websites with Ghost & Eleventy.

Blue Rose

A lightweight, responsive, and highly performant gallery for photos and videos.

eleventy-shortcomps

Source code

Starter project for static site by Adam Duncan, using Eleventy and shortcode components pattern.

11ty landing page starter

Source code

A simple landing page built with 11ty and Tailwind CSS.

11ty-twind

Source code

11ty, powered by Twind (JSS for Tailwind with tons of amazing features)

jet 🛩

Source code

It’s (j)ust (e)leventy and (t)ailwind … OK, and a few other things; it’s still really small though.

11ty-bulma-starter

Source code

11ty-bulma starter with sass enabled.

Tai11s

Source code

An Eleventy starter with Tailwind CSS and PurgeCSS

Mobile11ty

Source code

Build modern mobile website and android app with mobile11ty eleventy feat ionic

Cuteblog11ty

Source code

Cute blog for blogger with auto SEO.

Eleventy-AgilityCMS-Starter-Blog

Source code

A starter blog using Eleventy and powered by Agility CMS with full page and module management. Uses TailwindCSS and Alpine.js.

Eleventy Webring

Source code

Eleventy-based webring creator for the 90s kids.

Twenty Ninety

Source code

A production-ready starter kit, optimized for performance.

11tyshop

Source code

Built modern 11ty Online Shop e-commerce integration with ecwid headless online shop

11ty Feedback

Source code

An 11ty starter project for carrying out better feedback exchanges with coworkers, clients, and so on.

11ty-gallery

Source code

A simple little photogallery project. Crops, resizes and generates json from your images. Requires Graphicsmagic, ffmpeg and jq.

11ty Research Guide

Source code

A library guide (libguide) style template

1st Blog Template on 11ty with All-In Blogging Features

Source code

Full featured BLOGGING template - supporting: hierarchical categories, images in post folder, searching inside blogs, deployment, etc...all built up incrementally from the ground!

11TA

Source code

11TA is a deeply customizable, full-featured, ready-to-publish blog/marketing template system built with 11ty, TailwindCSS, & Alpine.js

Car11ty

Source code

Clean Design + Auto SEO , starter project for car services website template themes

YAES

Source code

Starter kit for your next eleventy(11ty) project using postcss, es6, snowpack, webpack.

Eleventy Card

Source code

Eleventy starter project with card layout from DaisyUI

Brutalism

Source code

blog with Tiny Brutalism CSS

Eleventy React

Source code

Use React, styled components and storybook in Eleventy

Berry Blast

Source code

A cyberpunk-themed developer portfolio starter with 11ty, Tailwind CSS, and vanilla JavaScript.

🍦.11ty.js

Source code

How to build an extensible blog with JavaScript templates (*.11ty.js files).

Supermaya

Source code

Supermaya is an Eleventy starter kit designed to help you add rich features to a blog or website without the need for a complicated build process.

Source code

A template project to build a short URL manager with Eleventy

Snappy Lemon

Source code

Modern 11ty v3 starter with TailwindCSS v4, Alpine.js, CloudCannon CMS integration, Bookshop visual editing, Pagefind search, and accessibility-first design

Eleventy Duo

Source code

Eleventy Duo is a production-ready and SEO-friendly starter for building a blog or personal website. Comes with a customizable duotone theme, minimal and clean design.

11ty-nostrils

Source code

A starter config for Eleventy with pipelines for TypeScript and PostCSS.

Epic CSS

Source code

Built in utility-first, Sass UI library 11ty theme and Epic CSS. Starter blog loop, categories and subcategories, breadcrumbs and all-in-one SEO file.

Monochrome11ty

Source code

Starter template for photo art and photographer portfolio built with eleventy 11ty

11ty-blog-njk-starter

Source code

Forked from Rong Ying's starter, now with njk and a few tiny fixes

zuix-web-starter

Source code

Mobile first and component based web starter template (PWA).

Eleventree

Source code

Link gallery for developers

11r

Source code

A blog template and theme using 11ty, TailwindCSS, Rollup, Prism syntax highlighting, etc.

Docs11ty

Source code

Simple Clean Minimalist for Documentation site - complete with blog, and static pages.

11straps

A Eleventy + Bootstrap 5 starterkit

jace-ty

Source code

Search, Folders for Posts, Utteranc.es for comments

11ty Journal

Source code

A blog template and theme using 11ty and bootstrap.

Eleventy NEAT Starter

Source code

Eleventy Starter Template with NEAT Stack - Netlify CMS, Eleventy, Alphine JS & Tailwind CSS

Basic Project

Source code

A single page template using 11ty and vanilla CSS.

11ty-midnight

Source code

Minimalist dark mode starter template for 11ty with support for jsfiddle embeds and prismjs syntax highlighting.

Thisis

Source code

Thisis just classic blog seo template.

Eleventy Garden

Source code

A starter site for building a digital garden, or personal wiki, in Eleventy.

Agencykit-11ty-starter

Source code

Automatically generate large sites from Notion data with a single command. Powered by NotionCMS.

11st-Starter-Kit

11ty, powered by Vite with Tailwind CSS and Alpine.js.

11ty-sass-images-seo

Source code

An 11ty starter with project scaffolding, Sass, image optimization, and SEO enhancements.

Eleventy Fylgja Starter

Source code

11ty starter template build using Fylgja CSS.

Once

Source code

Personal theme made with Eleventy and Bulma

Eleventy Chirpy Blog Template

Source code

11ty version of the popular Chirpy Jekyll blog template.

airleventy

Source code

Build static websites with 11ty, Sass for CSS, and modern JavaScript.

roxo-eleventy

Source code

Roxo is an 11ty starter project for creative agencies, freelancers, graphic designers, photographers

Neo-Brutalist

Source code

blog with neobrutalism CSS

eleventy-bookmarklet

Source code

11ty starter for a bookmarklet

Miayam 11ty Starter Project

Source code

A brutalist 11ty starter project built with as little tooling as possible. Atomic Design, Webpack, Pug, SCSS, Vanilla JS

Halide

Source code

A fast, responsive image portfolio website starter, built with Eleventy and Tina CMS.

Blogs11ty Tina CMS

Source code

Simple Blog Starter eleventy 11ty with Tina CMS for your blog project.

Eleventy Plus Vite

Source code

A clean and fast Eleventy Starter Project with Vite.

Bootstrap11ty

Source code

Eleventy for blogger with bootstrap and auto SEO full.

11ty-resume-template

Source code

11ty Resume/CV powered by TailwindCSS without JavaScript.

eleventy-agile-blog

Source code

A minimal blog template using Eleventy, this one implements a simple agile development workflow so you can get stuff done

Pugsum

Source code

11ty starter kit using TailwindCSS, Pug, and Webpack

ZeroPoint

A modern, opinionated, bare-bones Jamstack starter using Eleventy to get 'up to zero' on a project quickly and easily.

eleventy-google-docs-starter

Source code

A starter template for Eleventy that uses Google Docs as a CMS.

Eleventy Solo Starter (.njk version)

Source code

Eleventy starter with PostCSS, Tailwind CSS, Lazyload (“vanilla lazyload”), and build-time creation and processing of responsive images; Nunjucks templating, with alternate JavaScript-based (.11ty.js) version.

Eleventy Not So Minimal Blog Starter

Source code

A blog starter including some key features such as RSS, a sitemap, meta tags for Twitter & OG, image-optimization(eleventy-image), SVG-icon-sprites, Sass and more...

huwindty 🌬️

Source code

Windty template with a few upgrades. CMS, Markdown, responsive images among them. All documented.

11ty Covers

Source code

A visual vCard template

eleventy-starter-typescript

Source code

Unopinionated, minimal starter with TypeScript templates.

Lists

Jamstack Themes A list of starter themes filterable by supported static site generator and CMS.

Source Code Samples

Be sure to check out a full list of every Built With Eleventy site that has provided a link to their source code.

Image

2026-07-01T21:19:13Z

On this page

Build Cost 3

Utility to perform build-time image transformations for both vector and raster images: output multiple image sizes, multiple formats, and cache remote images locally. Uses the sharp image processor.

Easily add width and height attributes for proper aspect ratio to reduce layout shift.
Accepts a wide variety of input image types: jpeg, png, webp, gif, tiff, avif, and svg. Does not rely on file extensions (e.g. .png or .jpg), which may be missing or inaccurate.
Output multiple sizes, maintaining the original aspect ratio. Does not upscale raster images larger than original size. Intelligently generates srcset attributes.
Output multiple formats: jpeg, png, webp, avif +1 Build Cost, and svg. Intelligently generates the most efficient markup with zero server-dependencies, using <img> or <picture>.
Fast: de-duplicates with both an in-memory and disk cache. During local development, images are processed on request for even faster build performance.
Robust and works offline: save remote images to prevent broken image URLs later (via eleventy-fetch).

Installation

Published as @11ty/eleventy-img on npm. Source code on GitHub.

Image v6.0.0 requires Node 18+.

npm install @11ty/eleventy-img

Usage

There are a few different ways to use Eleventy image:

Eleventy Image Usage Types

Image HTML Transform: Recommended—start with this one! It’s the easiest to configure and is compatible with all template syntax.

Image Data Files: Use images to populate data in the Data Cascade.
Image JavaScript API: Low-level JavaScript API works independent of Eleventy.
Image Shortcodes: Use universal shortcodes in Nunjucks, Liquid, or 11ty.js templates.
Image WebC: ~~Use a WebC component for WebC templates.~~

HTML Transform

Serve Cost 1

Build Cost 3

Added in v3.0.0 Added in Image v4.0.1This is the easiest method to configure. Eleventy will transform any <img> or <picture> tags in HTML files as a post-processing step in your build.

eleventy.config.js

ESM CommonJS

import { eleventyImageTransformPlugin } from "@11ty/eleventy-img";

export default function (eleventyConfig) {
	eleventyConfig.addPlugin(eleventyImageTransformPlugin);
};

const { eleventyImageTransformPlugin } = require("@11ty/eleventy-img");

module.exports = function (eleventyConfig) {
	eleventyConfig.addPlugin(eleventyImageTransformPlugin);
};

That’s it! All <img> and <picture> elements will be processed for you by Eleventy Image.

Resolving image sources

Relative image sources (<img src="./possum.png">) will be co-located to your output directory with the template they are used in. If the same source image is used in multiple templates, it will be written to two different output locations!
Absolute image sources (<img src="/possum.png">) will be normalized relative to your input/content directory and written to your output directory with the default directory (e.g. _site/img/).

If you explicitly define the urlPath option, the urlPath is used to determine the output location instead.

Attribute Overrides

You can configure individual <img> elements with per-instance overrides:

<img width> is aliased to eleventy:widths when it is valid HTML (a single integer value) Added in Image v6.0.0 Related #234.
<img eleventy:widths="200,600"> comma separated string to override the default widths.
<img eleventy:formats="webp"> comma separated string to override the default formats.
<img eleventy:ignore> skips this image.
<img eleventy:optional> Added in Image v6.0.0controls what happens when processing this image throws an Error (good for remote images), see failOnError option. Default behavior removes the src attribute from the <img> node.
- <img eleventy:optional="keep">: leave as-is, which would likely result in an error when a user visits your page.
- <img eleventy:optional="placeholder">: replace the src attribute with a transparent PNG Data URI.
<img eleventy:output> overrides the output directory. Similar to urlPath, absolute paths (e.g. <img eleventy:output="/mydirectory/">) are relative to the Eleventy output directory and relative paths are relative to the template’s URL (e.g. <img eleventy:output="./mydirectory/">).
<img eleventy:pictureattr:NAME="VALUE"> Added in Image v6.0.0 attributes are hoisted as <picture NAME="VALUE"> (if <picture> is in use)

More configuration options

Any of the configuration options can be defined when you add the plugin:

eleventy.config.js

ESM CommonJS

import { eleventyImageTransformPlugin } from "@11ty/eleventy-img";

export default function (eleventyConfig) {
	eleventyConfig.addPlugin(eleventyImageTransformPlugin, {
		// output image formats
		formats: ["avif", "webp", "jpeg"],

		// output image widths
		widths: ["auto"],

		// optional, attributes assigned on <img> nodes override these values
		htmlOptions: {
			imgAttributes: {
				loading: "lazy",
				decoding: "async",
			},
			pictureAttributes: {}
		},
	});
};

const { eleventyImageTransformPlugin } = require("@11ty/eleventy-img");

module.exports = function (eleventyConfig) {
	eleventyConfig.addPlugin(eleventyImageTransformPlugin, {
		// output image formats
		formats: ["avif", "webp", "jpeg"],

		// output image widths
		widths: ["auto"],

		// optional, attributes assigned on <img> nodes override these values
		htmlOptions: {
			imgAttributes: {
				loading: "lazy",
				decoding: "async",
			},
			pictureAttributes: {}
		},
	});
};

Added in v3.0.0Added in Image v5.0.0During local development (when using --serve), images are optimized when requested in the browser. Read more about transformOnRequest.
The sizes attribute must be present if widths has more than one entry (MDN). The eleventyImageTransformPlugin does not provide a default value for sizes, so it must be explicitly included in the HTML attribute or with htmlOptions.imgAttributes.
- Added in Image v6.0.0When using loading="lazy" and sizes is not supplied in markup — we’ll use sizes="auto" automatically. Related #207.

Build Performance

Image optimization is likely one of the costlier pieces of your Eleventy build. The total build cost of this utility is dependent on a few things (in order of priority):

Number of unique images optimized (not page count)
Optimizing a lot of remote images (image content must be fetched from a remote server and is subsequently cached via eleventy-fetch).
Number of formats you generate for each source image: avif is more costly than other image formats. +1 Build Cost
Number of widths you generate for each source image.
File size of images being optimized (larger source images are more expensive).

Optimize Images on Request

Added in v3.0.0Added in Image v5.0.0When using the Image HTML transform during local development, image processing is removed from the build for extra performance. Instead, they are processed when requested by the browser using a special middleware built-in to the Eleventy Dev Server. This is enabled or disabled using the transformOnRequest option.

In-Memory Cache

To prevent duplicate work and improve build performance, repeated calls to the same source image (remote or local) with the same options will return a cached results object. If a request in-progress, the pending promise will be returned. This in-memory cache is maintained across builds in watch/serve mode. If you quit Eleventy, the in-memory cache will be discarded.

Images will be regenerated (and the cache bypassed) if:

The source image file size changes (on local image files)
The cache asset duration expires (for remote images).

You can disable this behavior by using the useCache option.

Example of in-memory cache reuse (returns the same promise)

Filename .eleventy.js

import Image from "@11ty/eleventy-img";

let stats1 = Image("./test/bio-2017.jpg");
let stats2 = Image("./test/bio-2017.jpg");

console.assert(stats1 === stats2, "The same promise");

Example of in-memory cache (returns a new promise with different options)

Filename eleventy.config.js

import Image from "@11ty/eleventy-img";

let stats1 = Image("./test/bio-2017.jpg");
let stats2 = Image("./test/bio-2017.jpg", { widths: [300] });

console.assert(stats1 !== stats2, "A different promise");

Disk Cache

Added in Image v1.0.0 Eleventy will skip processing files that are unchanged and already exist in the output directory. This requires the built-in hashing algorithm and is not supported with custom filenames. More background at Issue #51.

You can use this to speed up builds on your build server.

Options

Output File Extensions

Comma separated list of file extensions used in the Image HTML Transform to determine which template output files to process.

extensions: "html" (default)

Output Widths

Controls how many output images will be created for each image format. Aspect ratio is preserved.

widths: ["auto"] (default, keep original width)
widths: [200] (output one 200px width)
widths: [200, "auto"] (output 200px and original width)

Output Formats

Use almost any combination of webp, jpeg, png, svg, avif, gif, and auto:

formats: ["webp", "jpeg"] (default)
formats: ["png"]
formats: ["auto"] (keep original format)
formats: ["svg"] (requires SVG input)
formats: ["avif"] +1 Build Cost

Skip raster formats for SVG

If using SVG output (the input format is SVG and svg is in your formats array option), we will skip all of the raster formats even if they’re in formats. This may be useful in a CMS-driven workflow when the input could be vector or raster.

svgShortCircuit: false (default)
svgShortCircuit: true
svgShortCircuit: "size" Added in Image v3.1.8

Using svgShortCircuit: "size" means that raster image format entries will only be thrown out if the optimized raster size is larger than the SVG. This helps with large SVG images that compress to smaller raster sizes at smaller widths and will prefer the SVG over raster formats when the SVG file size is smaller.

To use Brotli compressed SVG sizes when making file size comparisons, use the svgCompressionSize: "br" option Added in Image v3.1.8.

Allow SVG to upscale

While we do prevent raster images from upscaling (and filter upscaling widths from the output), you can optionally enable SVG input to upscale to larger sizes when converting to raster format.

svgAllowUpscale: true (default)
svgAllowUpscale: false

Transparent Images

Transparency friendly formats: avif, png, webp, gif, and svg.

Added in Image v6.0.0We will filter out any non-transparency-friendly output formats from your formats list automatically (as long as at least one of them is png, gif, or svg).

Animated Images

Added in Image v1.1.0 To process and output animated gif or webp images, use sharpOptions to pass in an animated option.

import Image from "@11ty/eleventy-img";

await Image("./test/bio-2017.jpg", {
	formats: ["webp", "gif"],

	sharpOptions: {
		animated: true,
	},
});

Added in Image v6.0.0We will filter out any non-animation-friendly output formats from your formats list automatically (as long as at least one of them supports animation).

Transform on Request

Development build performance improvement to optimize images when they are requested in the browser.

transformOnRequest: false (default)
transformOnRequest: process.env.ELEVENTY_RUN_MODE === "serve" (default for HTML Transform)

You can use transformOnRequest with Shortcodes too.

`returnType` and `htmlOptions`

By default, Eleventy Image will return a metadata JavaScript object. To return HTML instead, use returnType: "html". This is useful for the Image JavaScript API and Image Shortcode types.

returnType: "object" (default) or "html" Added in Image v6.0.0

Further customize the markup with htmlOptions Added in Image v6.0.0:

{
	// …
	returnType: "html",

	htmlOptions: {
		imgAttributes: {
			alt : "", // required
			loading: "lazy",
			decoding: "async",
		},

		// HTML attributes added to `<picture>` (omitted when <img> used)
		pictureAttributes: {},

		// Which source to use for `<img width height src>` attributes
		fallback: "largest", // or "smallest"
	}
}

Fix Orientation

Added in Image v4.0.0Rotates the image to enforce the correct orientation set in EXIF metadata.

fixOrientation: false (default)
fixOrientation: true

Custom Filenames

Don’t like the hashes used in output file names? Make your own!

{
	// …
	filenameFormat: function (id, src, width, format, options) {
		// Define custom filenames for generated images
		// id: hash of the original image
		// src: original image path
		// width: current width in px
		// format: current file format
		// options: set of options passed to the Image call

		return `${id}-${width}.${format}`;
	}
}

Custom Filename Example: Use the original file slug

import path from "node:path";
import Image from "@11ty/eleventy-img";

await Image("./test/bio-2017.jpg", {
	widths: [300],
	formats: ["auto"],
	filenameFormat: function (id, src, width, format, options) {
		const extension = path.extname(src);
		const name = path.basename(src, extension);

		return `${name}-${width}w.${format}`;
	},
});

// Writes: "test/img/bio-2017-300w.jpeg"

Dry-Run

If you want to try the utility out and not write any files (useful for testing), use the dryRun option. Will include a buffer property in your return object.

dryRun: false (default)
dryRun: true

Advanced Options

Fail on Error

Added in Image v6.0.0What happens when processing an image encounters an error? Useful for remote images.

failOnError: true (default)
failOnError: false no error is thrown (warning output is logged)

See also the eleventy:optional attribute. Related #225

Format Filtering

Added in Image v6.0.0When using animated images or images with transparency, we will automatically filter your output formats list to formats that support those features. If there are no valid formats left after filtering, the original formats list is used as-is. You can enable or disable this feature using the formatFiltering option.

formatFiltering: ["transparent", "animated"]

Related #105 and #260

Output Directory

Where to write the new images to disk. Project-relative path to the output image directory. Maybe you want to write these to your output directory directly (e.g. ./_site/img/)?

outputDir: "./img/" (default)

If you’re using the Image HTML Transform, we recommended not to define outputDir.

URL Path

A path-prefix-esque directory for the <img src> attribute. e.g. /img/ for <img src="/img/MY_IMAGE.jpeg">:

urlPath: "/img/" (default)

Added in Image v6.0.0Full URLs are now supported, e.g. urlPath: "https://example.com/img/". Related #239.

If you’re using the Image HTML Transform, we recommended not to define urlPath.

Use Cache

(Boolean) Controls whether to use the disk cache and memory cache.

useCache: true (default)
useCache: false to bypass the cache and generate a new image every time.

Advanced control of Sharp image processor

Extra options to pass to the Sharp constructor or the Sharp image format converter for webp, png, jpeg, or avif.

sharpOptions: {}
sharpWebpOptions: {}
sharpPngOptions: {}
sharpJpegOptions: {}
sharpAvifOptions: {}

Added in Image v6.0.0ICC Profiles are preserved by default (when available) for better colors when images have srgb, p3, or cmyk color profiles. Related #244.

Full Sharp API Access

Use the transform callback to access anything in the Sharp API. Related #52. This runs before Eleventy Image processing (keep EXIF metadata, rotation, cropping, et al).

{
	// …
	transform: (sharp) => {
		sharp.keepExif();
	}
}

Change Global Plugin Concurrency

import Image from "@11ty/eleventy-img";
Image.concurrency = 4; // default is between 8 and 16 based on os.availableParallelism()

Change the default Hash length

Added in v1.0.0 You can customize the length of the default filename format hash by using the hashLength property.

{
	// …
	hashLength: 8, // careful, don’t make it _too_ short!
}

Advanced Caching Options for Remote Images

For any full URL first argument to this plugin, the full-size remote image will be downloaded and cached locally. See all relevant eleventy-fetch options.

{
	// …
	cacheOptions: {
		// if a remote image URL, this is the amount of time before it fetches a fresh copy
		duration: "1d",

		// project-relative path to the cache directory
		directory: ".cache",

		removeUrlQueryParams: false,
	},
}

When caching remote images, you may want to check the processed image output into your git (et al) repository to avoid refetches in the future. If remote images are not checked in, they may be refetched every time on your CI server unless you preserve the .cache folder between builds.

Using a Hosted Image Service

Custom URLs

Want to use a hosted image service instead? You can override the entire URL. Takes precedence over filenameFormat option. Useful with statsSync or statsByDimensionsSync.

The metadata object returned will not include filename or outputPath properties.

{
	// …
	urlFormat: function ({
		hash, // not included for `statsOnly` images
		src,
		width,
		format,
	}) {
		return `https://example.com/${encodeURIComponent(src)}/${width}/${format}/`;
	}
}

Example on 11ty/docs

Stats Only

Added in Image v1.1.0 Skips all image processing to return metadata. Doesn’t write files. Use this as an alternative to the separate statsSync* functions—this will use in-memory cache and de-duplicate requests.

statsOnly: false (default)
statsOnly: true

From the Community

Using Eleventy’s official image plugin

Optimizing Images with the 11ty Image Plugin

Don’t Shut Down Your Business! Instead Use Eleventy Image

+ Add yours!

×150 resources via 11tybundle.dev curated by Bob Monsour.

300 Minutes a Month: Cutting My Eleventy Netlify Build Time in Half — Brennan Kenneth Brown (2026)
Easier Font Awesome SVGs in 11ty — Adam DJ Brett (2026)
How I build a website for Frank — Štěpán Žák (2026)
My Images Are Now Pretty Lit — Shiv J.M. (2026)
Improving My RSS Feed and Making It More Human Readable — Kyle Reddoch (2026)

Expand to see 145 more resources.

Optimizing My Eleventy Build: An AI Use Note — Mark Llobrera (2026)
Deconstructing these auto-generated OG images — Bob Monsour (2026)
Optimizing Images with Eleventy on Netlify — Kitty Giraudel (2026)
Building brennan.day Part Two: IndieWeb, New Features, and Three Months of Iterations — Brennan Kenneth Brown (2026)
eleventy lessons — Lee Cattarin (2026)
Dynamic Open Graph Images for My 11ty Blog — DeepakNess (2026)
Better Handling Images on My 11ty Blog — DeepakNess (2026)
Sunsets eleventy-plugin-img2picture — Saneef H. Ansari (2025)
My New On-Demand Image Resizing Pipeline for Eleventy — Martin Hähnel (2025)
Eleventy Templates for Atom Feeds — DSri Seah (2025)
Simple Lossless Image Compression — Brian Cantoni (2025)
Eleventy Launch — Ash Furrow (2025)
hire.shivjm.in: The Missing Cover Letter — Shiv J.M. (2025)
11ty Hacks for Fun and Performance — Alex Russell (2025)
Leveling Up Responsive Images with Eleventy Img — Nicholas Clooney (2025)
From Dotclear to Eleventy 3 — Alix Guillard (2025)
Quick Start: Eleventy Shortcodes for Responsive Images & Inline SVG — Emiliano Soravia (2025)
Conditional favicon in Eleventy using passthrough copy — Christopher Kirk-Nielsen (2025)
OG Images using 11ty Screenshot Service — Jason Moser (2025)
Solving my Image Dimension Problem with an Eleventy Transform — Brian Cantoni (2025)
One weird trick to reduce Eleventy Image Build Times by 60% — Zach Leatherman (2025)
Migrating An Eleventy Site to Bunny.Net — Chris McLeod (2025)
How To Use eleventy-img (To Optmize Images In Eleventy) With Caching (To Keep Build Times Low) On Cloudflare Pages (Which Can't Cache Optimize Images Out Of The Box) — Martin Hähnel (2025)
Migrating WordPress To Eleventy — Brian Cantoni (2025)
11tyCMS: Image uploads and design enhancements — Jessie Heald (2025)
Uploading Images For Your Eleventy Blog to Cloudflare R2 from Obsidian — Martin Hähnel (2025)
Creating proportional, equal-height image rows with CSS, 11ty, and Nunjucks — Jeremy Robert Jones (2025)
'Built with Eleventy' Animated 88x31 — Chris Burnell (2025)
11tyCMS: Trapped in image and markdown hell — Jessie Heald (2025)
My 11ty Blogging Workflow — Floh Gro (2025)
custom emoji in 11ty with a plugin — actuallysomecat (2025)
A Slightly Improved Image Gallery for Eleventy — Valentin Pratz (2025)
How I built dynamic social media images in Eleventy using Cloudinary — Chip Cullen (2025)
Hello 11ty 3 — Judah Perez (2025)
How I write and publish blog posts in April 2025 — Juha-Matti Santala (2025)
Magick images — Ethan Marcotte (2025)
Adding base64 placeholder background images to eleventy-img — Stefan Burke (2025)
Eleventy's Image Plugin Disk Caching Approach For HTML Transform Method — Murtuzaali Surti (2025)
Extract Colors from an Image for CSS Themes — Zach Leatherman (2025)
Building a personal digital music library with Eleventy and APIs — Damian Walsh (2025)
11ty and OG images — Jay Hannah (2025)
Loading Pixelfed Photos with Eleventy — Robb Knight (2025)
Eleventy, Open Graph images and fun? — Matt B (2025)
Adding social preview images to my Eleventy blog — Stefan Burke (2025)
Rewriting My Astro Blog with Eleventy — Melanie Kat (2025)
Build-time og:image generation with eleventy-img — Dan Cătălin Burzo (2025)
O(M)G Images — Jason Moser (2025)
Optimize Your Web Site's Images — Zach Leatherman (2025)
How I built the Books page — Bob Monsour (2025)
An idiot's guide to adding open graph images to an 11ty blog — Chazz Basuta (2024)
Going all in with 'native' markdown — Bob Monsour (2024)
Eleventy Transform speeds local development...a lot! — Bob Monsour (2024)
Integrating Jupyter Notebook Cells in Eleventy Posts — Valentin Pratz (2024)
Here's how this is all put together — Cory Dransfeldt (2024)
Open Graph Metadata and Images in Eleventy Made Easy — Sebin Nyshkim (2024)
Dynamic social share images using Cloudinary — Sia Karamalegos (2024)
Automatically generating social share images using Cloudinary with Sia Karamalegos — Sia Karamalegos (2024)
Responsive, Self-hosted Images for Your Eleventy Blog — Sebin Nyshkim (2024)
Prairie Rose Arena - Project Notes — Sam Feldstein (2024)
My Decap CMS setup with 11ty hosted on Cloudflare Pages — Patrick Grey (2024)
Eleventy Images Just Got Better — Aleksandr Hovhannisyan (2024)
Building a Web Version of Your Mastodon Archive with Eleventy — Raymond Camden (2024)
Adding a Photo Stream to an Eleventy Site — nonnullish (2024)
Twenty year celebration: Site update number three — Peter Sefton (2024)
Upgrading to Eleventy v3 — Alex Zappa (2024)
Responsive Images in HTML: w and x — Shiv J.M. (2024)
Upgrading to Eleventy 3.0 — Mark Llobrera (2024)
Get image pixel colours in Eleventy/Node — Sam Smith (2024)
Updating to Eleventy v3 — Max Böck (2024)
Convert Obsidian Image Links to Nunjucks Shortcodes in Eleventy — Amy Khar (2024)
Eleventy Image problem with Netlify's build — Sami Määttä (2024)
Handling images with B2, Netlify's image CDN, Hazel and Mountain Duck — Cory Dransfeldt (2024)
Upgrading to Eleventy 1.0.1 — Mark Llobrera (2024)
Fixing a typo shaved 4 minutes off my Netlify build time — Thomas Rigby (2024)
Generating Open Graph preview images for 11ty — John Hobbs (2024)
Automatic image pre-processing in Eleventy, Part 2 — Martin Gunnarsson (2024)
I have a Problem with Build Times — Chris McLeod (2024)
Adding inline SVGs to Eleventy.js — Jordan Kohl (2024)
Eleventy - Differentiate between dev and production builds with unique favicons — Rob O'Leary (2024)
Setting up image transforms in Eleventy — Cory Dransfeldt (2024)
Eleventy 🤝 Immich — Chris Burgess (2024)
Check if images are available before optimizing in Eleventy — Cory Dransfeldt (2024)
Using 11ty to generate Open Graph images — John Brooks (2024)
Super fast responsive image loading in Eleventy — Eystein Mack Alnaes (2024)
Eleventy Photo Gallery — Evan Sheehan (2024)
Automatic pre-processing of post images in Eleventy — Martin Gunnarsson (2023)
Generating and Caching Open Graph Images with Eleventy — Robb Knight (2023)
Generating Open Graph Images in Eleventy — nonnullish (2023)
Migrating from WordPress to Eleventy (part 4) — Carlos Araya (2023)
VSCode Pasting 11ty Images — Jeff Sheets (2023)
A new technique for image optimization: SVG short circuiting — Zach Leatherman (2023)
Automatically optimize your images with Eleventy Image and CloudCannon — Zach Leatherman (2023)
Building a photography website — Darek Kay (2023)
Adding Social Preview Images To Our 11ty Blog — Matthew Lettini (2023)
Making a lighthouse-fast website with a static site generator like 11ty — Piotr Maliński (2023)
Headless kiosk application (with Kirby CMS) — James Steel (2023)
Eleventy Category Images — John M. Wargo (2023)
Favicon Generation In Eleventy — equilibriumuk (2023)
Markdown Image Optimization In Eleventy — equilibriumuk (2023)
Image Optimization In Eleventy — equilibriumuk (2023)
Adding game cover art to my /now page — fLaMEd (2023)
11ty image shortcode best practice — Simon Cox (2023)
Generating Custom OpenGraph Cards with Gatsby and the 11ty Screenshot Service — Matt Steele (2023)
Farewell Netlify Large Media, Welcome eleventy-img — Shiv J.M. (2023)
Take your 11ty build from 1 second to 2 minutes by generating OG images — Mike Street (2023)
Eleventy: Building an Image Gallery with CSS Grid and PhotoSwipe — Mark Llobrera (2023)
Hello 2023 — Chris Coleman (2023)
Creating image galleries in eleventy(11ty) with elventy-img — Prabashwara Seneviratne (2022)
Integrating Cloudinary into Eleventy — Raymond Camden (2022)
Manage your SVG files with Eleventy's render plugin — Christopher Kirk-Nielsen (2022)
Processing images linked from frontmatter with eleventy-img to use in meta tags — TJ Addison (2022)
Reading Comic Books in the Jamstack — Raymond Camden (2022)
Optimizing Images with the 11ty Image Plugin — Aleksandr Hovhannisyan (2022)
Using the Eleventy Image plugin without a central image folder — Graham F. Scott (2022)
Responsive Images in Markdown with Eleventy Image — Tomi Chen (2022)
Generating Apple Touch Icons with Eleventy — Florian Eckerstorfer (2022)
Easily Create Gravatar Images With Eleventy — Marc Littlemore (2022)
My complete blogging workflow — Michael Harley (2022)
Using a Google Photos Album in your Eleventy Site with Pipedream — Raymond Camden (2022)
Fetching remote images with Eleventy — Bryce Wray (2022)
Automatically Generated Social Media Images with HTML, CSS, Eleventy & Puppeteer — Shiv J.M. (2021)
Adding figures with captions to images in markdown with eleventy — Al Power (2021)
Setting a conditional variable in Javascript — Michael Harley (2021)
Improving my automated open graph image process w/ Eleventy — Michael Harley (2021)
Improving upon my image processing with Eleventy — Michael Harley (2021)
Automatically generate open graph images in Eleventy — Bernard Nijenhuis (2021)
Eleventy 1.0 — Martin Schneider (2021)
Using Eleventy’s official image plugin — Bryce Wray (2021)
Building a Simple Image Gallery with Eleventy — Raymond Camden (2021)
Using the Eleventy image plugin to generate images — Martin Schneider (2021)
Don't shut down your business! Instead use Eleventy Image — Zach Leatherman (2021)
Let's Learn Eleventy (11ty) - Images — Rares Portan (2021)
An async function walks into a loop. — Oscar (2021)
Automatic social sharing images for Eleventy — Mark Thomas Miller (2021)
Automated social sharing images with Eleventy and Puppeteer — Michael Harley (2021)
Setup social sharing previews, SEO, and favicons on Eleventy — Michael Harley (2021)
Maximally optimizing image loading for the web — Malte Ubl (2020)
Configuring responsive and optimized images with Eleventy — Michael Harley (2020)
Optimize Images in Eleventy Using Cloudinary — Sia Karamalegos (2020)
Generating Social Sharing Images In Eleventy — Steven Hicks (2020)
Responsive Images with Eleventy & Sharp — Ryan Cao (2020)
Eleventy and Responsive Images — Florian Eckerstorfer (2020)
Automated Open Graph images with 11ty and Cloudinary — Juan Fernandes (2020)
Tips for rolling your own lazy loading — Phil Hawksworth (2019)
Multilingual sites with Eleventy — Jérôme Coupé (2019)

Community Plugins

2026-07-01T21:19:13Z

Community Contributed Plugins

See all eleventy-plugin packages on npm. The rest have been added to this site by our community (and are listed in random order). Add your own!

eleventy-plugin-mathjax A plugin for rendering math equations using MathJax.
eleventy-plugin-sharp will add the full power of Sharp's image processing to your templates. luwes
markdown-it-eleventy-img A markdown-it plugin that process images through the eleventy-img plugin. Can be used in any projects that use markdown-it. Fully compatible with Eleventy! @huot_mathieu
eleventy-plugin-webmentions A plugin for eleventy to fetch and filter webmentions from Webmention.io. CodeFoodPixels
@inframanufaktur/eleventy-plugin-clean-urls Removes those pesky utm_bla or fbclid tracking params from all external links in your HTML. _ovlb
eleventy-plugin-vento adds support for the Vento templating language. noelforte
eleventy-plugin-html-validate Validate your site's HTML on build. mattatt4ck
eleventy-plugin-netlify-redirects Generate a Netlify _redirects file for your Eleventy site using front matter. hovhaDovah
eleventy-plugin-images-responsiver allows authors to use the simple and standard Markdown syntax for images and yet get responsive images in the generated HTML, with srcset and sizes attributes. nhoizey
eleventy-plugin-feathericons Shortcode, allows feather-icons to be embedded as inline svg into templates. reatlat
eleventy-plugin-json-feed adds a Nunjucks shortcode for outputting a JSON feed. genehack
@silexlabs/eleventy-plugin-directus Expose Directus collections as global data in 11ty lexoyo
eleventy-plugin-vidyard generate embeds responsive Vidyard videos from share URLs. reatlat
eleventy-plugin-umami Get the stats of your selfhosted umami-instance and use them in your 11ty-project using this plugin Akashic101
@kitschpatrol/eleventy-plugin-parcel Integrates the Parcel build tool and dev server with Eleventy. kitschpatrol
eleventy-plugin-robotstxt Generate a robots.txt file for your Eleventy site. hovhaDovah
eleventy-plugin-org Eleventy plugin to generate posts from org-mode files kijowski_dev
eleventy-plugin-metagen will generate metadata for Open Graph, Twitter card, generic meta tags and a canonical link. tannerdolby
eleventy-plugin-postcss Easy to use modern Eleventy plugin for PostCSS prepreprocessor
eleventy-plugin-plantuml allows processing of Plantuml markdown code blocks into beautiful diagrams awaragi
eleventy-plugin-future-post Allows you to set a future publishing date for one or more posts and not generate (publish) them until you build the site after the selected date. Based on the Eleventy Base Blog Drafts plugin. johnwargo
eleventy-plugin-time-to-read A reading time calculator supporting output in hundreds of languages. jkc_codes
eleventy-plugin-i18n-gettext adds i18n support with Gettext string translation and moment.js date and times localization. sgissinger
eleventy-plugin-llms Create llms.txt and llms-full.txt for your Eleventy site based on your source Markdown files Chris Maas
eleventy-img-helper Adds responsive images to any template's output using eleventy-img, configurable with CSS selectors. AlexDueppen
@aaashur/eleventy-plugin-add-remote-data Fetch remote data from one or more URLs and expose each response as an Eleventy global data variable ashur
eleventy-plugin-file-list An Eleventy Plugin that creates a collection containing metadata from a list of all files in a specified folder. johnwargo
@shawnsandy/npm_info will provide you with package detail for an npm package or GitHub info.
eleventy-plugin-tailwindcss will add Tailwind CSS support for your website. dafiulh
eleventy-plugin-post-stats Adds a post statistics collection to a site you can use to generate a table or graph of posts over time as well as average days between posts. johnwargo
eleventy-multisite Add multi-site building support for Eleventy bnoctis
@quasibit/eleventy-plugin-sitemap adds a shortcode for generating a sitemap. nunof07
eleventy-plugin-inline-link-favicon Add an inline favicon image to a link. bmuenzenmeyer
wikity Wikitext as a templating language, with built-in Eleventy support. Nixinova
@resoc/eleventy-plugin-social-image adds automated social images based on HTML & CSS templates and generated at access time by a Netlify on-demand builder ph_bernard
eleventy-sass Yet another Sass/SCSS plugin for Eleventy kentaroi
eleventy-plugin-edit-on-github An Eleventy shortcode to add an "Edit on Github" link to your pages. christopherpickering
eleventy-plugin-shopify Import your Shopify products, pages, and collections into Eleventy as global data. danleatherman
eleventy-plugin-i18n will add a clever i18n universal filter to assist with internationalization and dictionary translations. duncanadam
eleventy-plugin-mastoarchive Create a global data object "mastodon" that contains all your public posts on Mastodon. declan_byrd
eleventy-plugin-green-links Checks all links on a website and returns those which are hosted on verified green hosting providers from The Green Web Foundation's Green Web dataset. fershad
eleventy-plugin-speculation-rules This plugin adds support for the Speculation Rules API, which allows defining rules by which certain URLs are dynamically prefetched or prerendered based on user interaction. reatlat
@pcdevil/eleventy-plugin-intl-utils a set of internationalization utils pcdevil
eleventy-plugin-purgecss will remove unused CSS using PurgeCSS. proog
@quasibit/eleventy-plugin-schema adds a shortcode for generating JSON-LD structured data. nunof07
eleventy-plugin-babel Compiles JS with gulp-babel.
@sardine/eleventy-plugin-tinysvg An 11ty plugin to minify and optimise SVG marabyte_
eleventy-plugin-podcaster Helps you create a feed and a website for your podcast. nathan-bottomley
eleventy-plugin-responsive-images adds a shortcode to take care of the srcset attribute for responsive images via Cloudinary and all other img attributes. adamculpepper
@vidhill/fortawesome-free-regular-11ty-shortcode Shortcode, allows @fortawesome/free-regular-svg-icons to be embedded as inline svg into templates.
eleventy-plugin-github-repos An Eleventy plugin that creates a collection of metadata from an account's GitHub repositories. johnwargo
@tigersway/eleventy-plugin-ancestry Real hierarchical navigation, following folders and documents. tigerswaynet
@factorial/eleventy-plugin-twig Add Twig templating engine to Eleventy with the help of twig.js dnnsjrng
eleventy-plugin-atlasicons The shortcode enables the embedding of atlas-icons as inline SVG icons into templates. reatlat
eleventy-plugin-find A utility filter to find array members that match a set of rules, helpful for hoisting data from one template to another. ashur
eleventy-plugin-footnotes will help rendering accessible footnotes with Liquid. KittyGiraudel
eleventy-plugin-markdown-shortcode adds a universal shortcode to render markdown. tylerwilliamsct
eleventy-plugin-sass will add the ability to use Sass for your stylesheets.
@code-blocks/eleventy-plugin Use markdown code blocks to render: charts, graphviz diagrams, MathML, music sheets, HTML tables and highlight code. idrismaps
~~eleventy-plugin-img2picture~~ ~~replaces <img> using <picture> with resized and optimized images.~~ The function is available in the official Eleventy Image plugin. saneef
eleventy-plugin-mtos A plugin for Eleventy that turns your site into a single page application. satireven
eleventy-plugin-redirects Automatically generate a Netlify _redirects file, a Vercel vercel.json config file, or pages with client-side redirects from frontmatter aliases. @type__error
@11tyrocks/eleventy-plugin-emoji-readtime provides a configurable filter to display an estimated read time for Eleventy content, optionally with an emoji visual indicator. 5t3ph
eleventy-plugin-react-ssr Write your static content using React SSR (JSX) and transform it using Babel @scinos
eleventy-njk-unpkg-inliner Inline npm modules from unpkg in Eleventy Nunjucks templates. jaredgorski
eleventy-plugin-add-web-component-definitions will add Web Component definitions automatically, by reading custom tags from HTML pages. jdvivar
@aaashur/eleventy-plugin-classnames Conditionally join class names using a filter or shortcode, inspired by the 'classnames' package by JedWatson ashur
eleventy-plugin-automatic-noopener Automatically add rel='noopener' attributes to unsafe <a>, <area> and <form> elements. jkc_codes
eleventy-plugin-code-style-hooks Syntax highlighter supporting CSS colour previews in all template languages with no client side JS. jkc_codes
@anyblades/eleventy-blades Essential 11ty filters, pre/post-processors, and other toggleable features as a simple, configurable plugin. anydigital
@orchidjs/eleventy-plugin-ids Add ids to html headings and other elements oyejorge
@factorial/eleventy-plugin-fstack Linting, building and watching your assets with as little overhead and configuration as possible by integrating @factorial/stack-core dnnsjrng
eleventy-plugin-slide-decks 🎵 It makes an itsy-bitsy, teeny-weeny, web-component slide deck prezzy 🎶. 🎚️ Write slide decks with 11ty and share them over the web 🎴. @bp@bennypowers.dev
eleventy-plugin-embed-itch-io Creates embedded Itch.io widget for games from the game page url.
eleventy-plugin-drawio embed diagrams.net (.drawio) diagrams in your pages kev4ev
eleventy-plugin-gen-favicons From a single svg or image, generate "the ultimate favicon setup" with all six commonly used icons plus a webmanifest using 2022 best practices. njaldwin
eleventy-plugin-link_to a nunjucks tag to link to another internal content in Eleventy nhoizey
@vidhill/fortawesome-brands-11ty-shortcode Shortcode, allows @fortawesome/free-brands-svg-icons to be embedded as inline svg into templates.
eleventy-plugin-sharp-respimg will perform build-time image transformations with Sharp and generate responsive image markup using <picture>. tannerdolby
eleventy-plugin-lazyimages will add progressive lazy loading to your images.
eleventy-load brings webpack-like loaders to Eleventy gregiv_es
eleventy-plugin-cloudflare-kv builds collections from content stored in Cloudflare KV as a simple CMS. alexmensch
eleventy-google-fonts A Nunjucks shortcode to optimize Google Fonts. This shortcode download and inline Google Font's CSS. takanorip
eleventy-plugin-phosphoricons Shortcode, allows phosphor-icons to be embedded as inline svg into templates. reatlat
eleventy-plugin-reader-bar adds a reader bar as you scroll through the page. thigoap
eleventy-plugin-backlinks Collect and display backlinks from your notes. binyamin
eleventy-hast-jsx use JSX as a template language jed_fox1
eleventy-plugin-icons A highly configurable plugin to use icons from any icon set you want. uncenter
@chrisburnell/eleventy-cache-webmentions Cache webmentions using eleventy-cache-assets and make them available to use in collections, templates, pages, etc. iamchrisburnell
eleventy-plugin-asciidoc to add support for AsciiDoc files. saneef
@sardine/eleventy-plugin-tinycss An 11ty plugin to inline and optimise CSS marabyte_
eleventy-plugin-pdfembed A shortcode to simplify usage of Adobe's PDF Embed API raymondcamden
eleventy-plugin-pwa will generate a Service Worker for you. okitavera
eleventy-favicon Generates your favicon files and declarations from a single image source atomrc
eleventy-filter-npm-package-downloads will show you the number of downloads for the given npm package. AndreJaenisch
eleventy-plugin-heroicons Shortcodes to add Heroicons to your Eleventy projects snmcp
eleventy-plugin-svg-sprite will compile a directory of SVG files into a single SVG sprite and install shortcodes to embed SVG sprite and SVG content Patrick153
@myxotod/eleventy-plugin-furigana adds a filter to parse content for kanji followed by []-brackets containing hiragana and converts it to furigana myxotod
eleventy-video-bro An eleventy plugin to optimize videos, bro. Bro helps you stick with best practices. robole
eleventy-plugin-broken-links A plugin to check your build for broken external links and redirects bradleyburgess
eleventy-plugin-embed-everything Automatically embed YouTube, Vimeo, Spotify, Twitter, and more, based on just their URLs. gfscott
eleventy-plugin-social-img will generate social share images at build-time and return an image URL. tannerdolby
eleventy-postcss-extension Add CSS processing with PostCSS to your Eleventy build.
eleventy-plugin-embedded-demos A plugin for eleventy that allows you to have embedded demos using HTML, CSS and JavaScript, as well as having the code from those demos displayed in the page. CodeFoodPixels
eleventy-plugin-poison Poison your content against AI scrapers. gingerchew
eleventy-plugin-page-assets Automatically copy images and assets relative to a template to /dist folder and rewrite paths to hashes (Similar to webpack html-loader, or Hexo Post Asset)
eleventy-plugin-torchlight Plugin to syntax highlight your code blocks with torchlight.dev. timkley
@infinity-interactive/eleventy-plugin-injector allows you to run an arbitrary callback at build time or when using --serve or --watch genehack
@grimlink/eleventy-plugin-lucide-icons This Eleventy plugin enables the inclusion of lucide-icons as inline SVG elements grimlink
eleventy-plugin-unfurl Unfurl links into rich 'cards', as seen in places like Slack and Twitter DavidDarnes
@grimlink/eleventy-plugin-sass Simple 11ty config wrapper, for running Sass directly as custom template grimlink
eleventy-nbsp-filter Filter for Eleventy to replace spaces between words with   characters. jeremenichelli
eleventy-plugin-dart-sass Build, watch and template tags for Sass stylesheets via Dart Sass. Includes CSS code splitting and source maps. chronotope
@fec/eleventy-plugin-remark Process Markdown files with Remark and use Remark plugins to add new features to your Markdown.
eleventy-plugin-sharp-respfigure will perform build-time image transformations with Sharp and generate responsive image markup inside <figure> tags. tannerdolby
eleventy-plugin-plausible Add the Plausible analytics script tag with a shortcode and remove some of the worry gingerchew
eleventy-plugin-cloudinary adds a universal shortcode allowing you to add images from your cloudinary account. juanfernandes
eleventy-plugin-recent-changes will generate a collection containing your recent commit history. defaced
eleventy-plugin-hubspot will generate HubSpot forms or meeting calendars. reatlat
eleventy-plugin-validate A plugin that enables you to validate the front matter data of collection items with Zod schemas. uncenter
eleventy-plugin-unified Use the unified ecosystem in Eleventy with remark and rehype. NickColley
eleventy-i18n i18n for Eleventy: Enabling Website Translation mathieuprog
eleventy-plugin-tag-cloud Easily generate tag clouds to add a touch of Web 2.0 gingerchew
eleventy-plugin-code-demo Add interactive HTML/CSS/JS code demos to an Eleventy site using Markdown code blocks. hovhaDovah
eleventy-plugin-nesting-toc will generate a nested table of contents from your site's headings.
eleventy-plugin-ghost Access the Ghost Content API in Eleventy 👻 DavidDarnes
eleventy-plugin-target-safe Link tags with the target attribute may need a rel attribute. This plugin does that for you automatically. gingerchew
eleventy-critical-css extracts and inlines critical CSS from your HTML templates gregiv_es
@codegouvfr/eleventy-plugin-calendar A plugin for generating an ICS calendar and events directly from your post files. hjonin
@mightyplow/eleventy-plugin-cache-buster will add content hashes to JavaScript and CSS resources. mightyplow
eleventy-plugin-emoji An accessible emoji shortcode and filter for your Eleventy projects snmcp
@sardine/eleventy-plugin-external-links An 11ty plugin to protect you external links. marabyte_
@sardine/eleventy-plugin-code-highlighter An 11ty plugin to style your <code> with Prism.js marabyte_
eleventy-plugin-pwa-v2 generates PWA service worker using Google Workbox v6, compatible with Eleventy 2.0 and up lwojcik
eleventy-plugin-respimg will take care of the srcset attribute for responsive images for you. etportis
eleventy-xml-plugin adds Liquid filters used for sitemap and RSS/feed file generation. jeremenichelli
eleventy-plugin-ignore Ignore templates based on their front matter. TheDocTrier
eleventy-plugin-toc will generate a table of contents from your headings. jdsteinbach
eleventy-plugin-typeset will make your typography nicer. johanbrook
eleventy-plugin-reading-time will generate a tag for the estimated reading time. johanbrook
~~eleventy-plugin-yamldata~~ ~~will allow you to use a yaml file as local data file.~~ This plugin has been superseded by Eleventy Custom Data Formats.
eleventy-plugin-rollup Allows you to build js bundles directly from your templates using rollup. Snapstromegon
eleventy-plugin-og-image Generate OG images from your templates, data and CSS. Fast and reproducible – no need for a headless browser. KiwiKilian
eleventy-plugin-git-commit-date to get recent Git commit time of a file, or an Eleventy collection. saneef
eleventy-auto-cache-buster A content-hash based cache buster, not requiring any filters or code changes aside from enabling the plugin! Denperidge
eleventy-plugin-social-share-card-generator Automagically creates a share card for social media platforms tpiros
eleventy-plugin-helmet will manage your document head. vseventer
@sardine/eleventy-plugin-tinyhtml An 11ty plugin to optimise HTML marabyte_
@anyblades/eleventy-blades-base A ready-to-go eleventy.config.js for popular 11ty plugins, bundled with npm scripts in one reusable, zero-maintenance package. anydigital
Add your own!

Content Dates

2026-07-01T21:19:13Z

Content Dates

On this page

Setting a Content Date in Front Matter

Add a date key to your front matter to override the default date (file creation) and customize how the file is sorted in a collection.

Syntax YAML Front Matter

---
date: 2016-01-01
---

Syntax YAML Front Matter

---
date: Last Modified
---

Valid date values:

"Last Modified": automatically resolves to the file’s last modified date
"Created": automatically resolves to the file’s created date (default, this is what is used when date is omitted).
"git Last Modified": Added in v1.0.1 automatically resolves to the file’s latest git commit. If a file is not yet checked in to git, it assigns Date.now() to page.date instead.
- This one is a bit resource intensive, so you may want to limit this to your CI server environment only using JavaScript data files and Environment Variables. Check out this real-world directory data file.
"git Created": Added in v2.0.0 automatically resolves to the file’s first git commit. It uses git's --follow flag to make a "best effort" renaming tracking. If a file is not yet checked in to git, it assigns Date.now() to page.date instead.
- This one is a bit resource intensive, so you may want to limit this to your CI server environment only using JavaScript data files and Environment Variables. Check out this real-world directory data file.
2016-01-01 or any other valid YAML date value (leaving off the time assumes midnight in UTC, or 00:00:00Z)
"2016-01-01" or any other valid ISO 8601 string that Luxon’s DateTime.fromISO can parse (see also the Luxon API docs).

If a date key is omitted from the file, we then look for a YYYY-MM-DD format anywhere in the file path (even folders). If there are multiple dates found, the first is used. ℹ️ Note that starting in 1.0 for consistency with front matter formats file name date formats are now assumed to be UTC.

As a last resort, the file creation date is used. Careful when relying on file creation dates on a deployment server.

Trying to use date in your templates? The date value contains the raw Data Cascade value (not a resolved Date object). You probably want page.date instead. Check out the values available in the page variable.

Configuration API for Custom Date Parsing

Eleventy v3.0 includes an eleventyConfig.addDateParsing method for adding your own custom date parsing logic. This is a preprocessing step for existing Date logic. Any number of callbacks can be assigned using eleventyConfig.addDateParsing and we’ll run them serially. Related GitHub #867.

In the callback, you can return:

a Luxon DateTime instance to short-circuit page.date with this new value (we do the .toJSDate() conversion for you).
a JavaScript Date to short-circuit page.date with this new value.
any new valid value will be processed using existing Date parsing rules. As an example, you can return a new string that will be processed by Luxon (as already happens).
anything falsy (or no return) will ignore the callback.

Custom Date Parsing Example

Here’s an example using IANA time zone codes:

---
date: 2019-08-31 23:59:56 America/New_York
---

eleventy.config.js

ESM CommonJS

import { DateTime } from "luxon";

export default function(eleventyConfig) {
	eleventyConfig.addDateParsing(function(dateValue) {
		if (typeof dateValue === "string") {
			return DateTime.fromFormat(dateValue, "yyyy-MM-dd hh:mm:ss z");
		}
	});
};

const { DateTime } = require("luxon");

module.exports = function(eleventyConfig) {
	eleventyConfig.addDateParsing(function(dateValue) {
		if (typeof dateValue === "string") {
			return DateTime.fromFormat(dateValue, "yyyy-MM-dd hh:mm:ss z");
		}
	});
};

Change a Project’s Default Time Zone

Relevant GitHub Issue #3668. Examples of valid time zones are available on the Luxon documentation.

eleventy.config.js

ESM CommonJS

import { DateTime } from "luxon";

// See https://moment.github.io/luxon/#/zones?id=specifying-a-zone
const TIME_ZONE = "America/Chicago";

export default function(eleventyConfig) {
	eleventyConfig.addDateParsing(function(dateValue) {
		let localDate;
		if(dateValue instanceof Date) { // and YAML
			localDate = DateTime.fromJSDate(dateValue, { zone: "utc" }).setZone(TIME_ZONE, { keepLocalTime: true });
		} else if(typeof dateValue === "string") {
			localDate = DateTime.fromISO(dateValue, { zone: TIME_ZONE });
		}
		if (localDate?.isValid === false) {
			throw new Error(`Invalid \`date\` value (${dateValue}) is invalid for ${this.page.inputPath}: ${localDate.invalidReason}`);
		}
		return localDate;
	});
};

const { DateTime } = require("luxon");

// See https://moment.github.io/luxon/#/zones?id=specifying-a-zone
const TIME_ZONE = "America/Chicago";

module.exports = function(eleventyConfig) {
	eleventyConfig.addDateParsing(function(dateValue) {
		let localDate;
		if(dateValue instanceof Date) { // and YAML
			localDate = DateTime.fromJSDate(dateValue, { zone: "utc" }).setZone(TIME_ZONE, { keepLocalTime: true });
		} else if(typeof dateValue === "string") {
			localDate = DateTime.fromISO(dateValue, { zone: TIME_ZONE });
		}
		if (localDate?.isValid === false) {
			throw new Error(`Invalid \`date\` value (${dateValue}) is invalid for ${this.page.inputPath}: ${localDate.invalidReason}`);
		}
		return localDate;
	});
};

Dates off by one day?

This is a Common Pitfall.

You’re probably displaying UTC dates in a local time zone.

Many date formats in Eleventy (when set in your content‘s filename as YYYY-MM-DD-myfile.md or in your front matter as date: YYYY-MM-DD) assume midnight in UTC. When displaying your dates, make sure you’re using the UTC time and not your own local time zone, which may be the default.

Example

Syntax YAML Front Matter

---
date: 2018-01-01
---

If you output the Date object in a template, it will convert it to a string for display:

Syntax Liquid, Nunjucks

Using {{ page.date }} will display a date using a local time zone like:

Sun Dec 31 2017 18:00:00 GMT-0600 (Central Standard Time)

Note that this appears to be the wrong day!

Nunjucks allows you to call JavaScript methods in output {{ page.date.toString() }}.

Syntax Nunjucks

But {{ page.date.toUTCString() }} will correctly
display a date with a UTC time zone like:

Mon, 01 Jan 2018 00:00:00 GMT

On Liquid, you can't do this, though you can create your own toUTCString filter in Liquid to perform the same task, or pass a timezone parameter to your filter to point to the one you desire in your template.

The valid strings accepted are the TZ identifiers.

Given the date above this {{ page.date | date: '%b %d, %Y', 'UCT' }} would render in UTC as:

Jan 01, 2018

Also on YouTube

Collections out of order when you run Eleventy on your Server?

This is a Common Pitfall.

Be careful relying on the default date associated with a piece of content. By default Eleventy uses file creation dates, which works fine if you run Eleventy locally but may reset in some conditions if you run Eleventy on a Continuous Integration server. Work around this by using explicit date assignments, either in your front matter or your content’s file name. Read more at Setting a Content Date in Front Matter.

Added in v1.0.1 The new date: "git Last Modified" feature will resolve this issue! Source control dates are available and will be consistent on most Continuous Integration servers. Read more at Setting a Content Date in Front Matter.

From the Community

×81 resources via 11tybundle.dev curated by Bob Monsour.

How to Implement status.lol on BuildAwesome — Adam DJ Brett (2026)
How to use /goal to add last updated at feature to an Eleventy blog in Antigravity IDE with a single prompt — Geshan Manandhar (2026)
Dependency Spring Cleaning — Tyler Sticka (2026)
I Made My Eleventy Build 5× Faster with Five Changes — Brennan Kenneth Brown (2026)
Using Spec Driven Development with AWS Kiro to add the last updated date on Eleventy blog — Geshan Manandhar (2026)

Expand to see 76 more resources.

The Limits of AI and Where Humans Shine — Nicholas Clooney (2026)
Simple Pure CSS/HTML Timeline (with Extra Eleventy Integration) — Micah Torcellini (2026)
Eleventy: How to Work Around the “git Last Modified” Performance Bottleneck — Jens Oliver Meiert (2026)
Cache-busting that CSS & JS — Bob Monsour (2026)
Eleventy in 2026 — Jay Cuthrell (2026)
Extending the Post Graph Plugin: Adding Clickable Links and Tooltips — Brennan Kenneth Brown (2026)
Building an IndieAuth Comment System for Your Static Site — Brennan Kenneth Brown (2026)
Eleventy - today’s date as a global variable — Rob O'Leary (2025)
Never write your own Date Parsing Library — Zach Leatherman (2025)
Last modified date of Eleventy posts — Josh Sherman (2025)
Migrating WordPress To Eleventy — Brian Cantoni (2025)
11tyCMS: Image uploads and design enhancements — Jessie Heald (2025)
An Obsidian Template To Create A File At The Right Location — Martin Hähnel (2025)
Calculating yearsSince using a Nunjucks filter in Eleventy — Thomas Rigby (2025)
yearsSince — Marc Amos (2025)
blog setup — actuallysomecat (2025)
Creating a Journal With Eleventy — Austin Carr (2025)
On this day — Sacha Chua (2025)
Added a 'uses' Page Archive — Ryan Himmelwright (2025)
List blog posts grouped by year with Eleventy — Juha-Matti Santala (2025)
Building a seasonal veg app with Eleventy. Part 1 — Yasmin (2025)
11ty Blog Rewrite Hotfix — Melanie Kat (2025)
Notes on Upgrading to Eleventy 3.0 — Harris Lapiroff (2024)
Eleventy (11ty) year, year-month, and year-monty-day indexes — Thomas Steiner (2024)
Building an album releases calendar subscription — Cory Dransfeldt (2024)
This Is An Eleventy Blog Now! — Arnaught (2024)
Eleventy Date Filter with Ordinals — Trevor Morris (2024)
Making a Comment System with Eleventy and Netlify — Cascade (2024)
July Project Updates — Chris Burnell (2024)
A custom collection to sort events with Eleventy — Sami Määttä (2024)
Added Timestamp to Posts — John M. Wargo (2024)
Added Timestamp to My Eleventy New Post Utility — John M. Wargo (2024)
We Need to Talk About Your Eleventy Post Dates — Robb Knight (2024)
Group posts by year in Eleventy.js — Jordan Kohl (2024)
Eleventy - Group posts by year — Rob O'Leary (2024)
Intro: Bukmark.club — Tom Doe (2024)
Automated weekly links posts with raindrop.io and Eleventy — Sophie Koonin (2024)
Creating an OPML File for my Blogroll — Robb Knight (2024)
Right here, right now — Martin Gunnarsson (2024)
Deploying my website — Tobias Fedder (2023)
Adding a git based changelog in 11ty — James Doc (2023)
Eleventy Post Graph Plugin — Robb Knight (2023)
Grouping posts by year with nunjucks in Eleventy — Christopher Kirk-Nielsen (2023)
Eleventy Date-only Filter — John M. Wargo (2023)
Sorting and Dating 11ty Posts by Name — Benny Powers (2023)
11ty: Index ALL the things! — Lea Verou (2023)
Solving a date display issue in 11ty templates — Simon Cox (2023)
Removing Luxon From Eleventy — equilibriumuk (2023)
Generating Slug Using Date & Title In 11ty — equilibriumuk (2023)
File Last Modified Is Available — Robin Hoover (2023)
Host an ics calendar feed with Eleventy — Rob Anderson (2023)
Eleventy Last Post Date Using Liquid — John M. Wargo (2023)
Easy Date and Time Formatting with Luxon — Evan Sheehan (2023)
From Jekyll & Hugo to Eleventy — Chris Burgess (2023)
Custom date formatting in Eleventy.js — Jordan Kohl (2023)
Automating Advent Calendar with Github Actions and Eleventy — Eevis (2023)
Better Looking Dates in Eleventy: Jan 01 2023 --> Jan 1st 2023 — Daniel Morgan (2023)
Drafts and timestamp-based publishing in Eleventy — Bryce Wray (2022)
Quick LiquidJS + Eleventy Example - All Posts — Raymond Camden (2022)
Related Content by Day of Year in Eleventy — Raymond Camden (2022)
Building blocks for my first Eleventy site — Sami Määttä (2022)
Setting a timestamp for posts and RSS feeds in eleventy — Al Power (2021)
Time is on your side — Dana Byerly (2021)
Fix dates on Eleventy RSS feeds — Saneef H. Ansari (2021)
Formatting dates nicely in 11ty with Luxon — Al Power (2021)
Localize datetimes in Eleventy with JS — Michael Chan (2021)
Hiding posts with future dates in Eleventy — Saneef H. Ansari (2021)
11ty Date Shortcodes and Filters — Stephanie Eckles (2021)
Fix DST Dates in Eleventy — Michael Chan (2021)
Dates in Eleventy — Bernard Nijenhuis (2021)
Group posts by year in Eleventy — Darek Kay (2021)
Grouping blog posts by year in Eleventy — James Doc (2021)
Tracking Posts by Week in Eleventy — Raymond Camden (2020)
How to fix Eleventy's dates being off by one day — Mark Thomas Miller (2020)
Eleventy static-site generator: Making Liquid play nice with dates — Justus Grunow (2020)
Adding a Last Edited Field to Eleventy — Raymond Camden (2020)

Create or use Plugins

2026-07-01T21:19:13Z

Create or use Plugins

On this page

Plugins are Configuration

At their simplest, Eleventy plugins are a function passed to the addPlugin method. If you’re familiar with Eleventy configuration files, this will look and feel very similar!

eleventy.config.js

ESM CommonJS

export default function (eleventyConfig) {
	eleventyConfig.addPlugin(function(eleventyConfig) {
		// I am a plugin!
	});
};

module.exports = function (eleventyConfig) {
	eleventyConfig.addPlugin(function(eleventyConfig) {
		// I am a plugin!
	});
};

The plugin can be defined elsewhere in the same file:

eleventy.config.js

ESM CommonJS

function myPlugin(eleventyConfig) {
	// I am a plugin!
}

export default function (eleventyConfig) {
	eleventyConfig.addPlugin(myPlugin);
};

function myPlugin(eleventyConfig) {
	// I am a plugin!
}

module.exports = function (eleventyConfig) {
	eleventyConfig.addPlugin(myPlugin);
};

Or in a different file:

eleventy.config.js

ESM CommonJS

import myPlugin from "./_config/plugin.js";

export default function (eleventyConfig) {
	eleventyConfig.addPlugin(myPlugin);
};

const myPlugin = require("./_config/plugin.js");

module.exports = function (eleventyConfig) {
	eleventyConfig.addPlugin(myPlugin);
};

Or in an npm package:

eleventy.config.js

ESM CommonJS

import pluginRss from "@11ty/eleventy-plugin-rss";

export default function (eleventyConfig) {
	eleventyConfig.addPlugin(pluginRss);
};

const pluginRss = require("@11ty/eleventy-plugin-rss");

module.exports = function (eleventyConfig) {
	eleventyConfig.addPlugin(pluginRss);
};

Plugins are async-friendly Added in v3.0.0 but you must await the addPlugin method.

eleventy.config.js

ESM CommonJS

export default async function (eleventyConfig) {
	await eleventyConfig.addPlugin(async function(eleventyConfig) {
		// I am an asynchronous plugin!
	});
};

module.exports = async function (eleventyConfig) {
	await eleventyConfig.addPlugin(async function(eleventyConfig) {
		// I am an asynchronous plugin!
	});
};

Adding a Plugin

Installation

We use the npm command line tool (included with Node.js) to install plugins.

Looking for a plugin? Check out the official plugins or community-contributed plugins.

npm install @11ty/eleventy-plugin-rss --save

Add the plugin to Eleventy in your config file

Your config file is probably named eleventy.config.js or .eleventy.js.

eleventy.config.js

ESM CommonJS

import pluginRss from "@11ty/eleventy-plugin-rss";

export default function (eleventyConfig) {
	eleventyConfig.addPlugin(pluginRss);
};

const pluginRss = require("@11ty/eleventy-plugin-rss");

module.exports = function (eleventyConfig) {
	eleventyConfig.addPlugin(pluginRss);
};

Plugin Configuration Options

Use an optional second argument to addPlugin to customize your plugin’s behavior. These options are specific to the plugin. Please consult the plugin’s documentation (e.g. the eleventy-plugin-syntaxhighlight README) to learn what options are available to you.

eleventy.config.js

ESM CommonJS

import pluginSyntaxHighlight from "@11ty/eleventy-plugin-syntaxhighlight";

export default function (eleventyConfig) {
	eleventyConfig.addPlugin(pluginSyntaxHighlight, {
		// only install the markdown highlighter
		templateFormats: ["md"],

		init: function ({ Prism }) {
			// Add your own custom language to Prism!
		},
	});
};

const pluginSyntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");

module.exports = function (eleventyConfig) {
	eleventyConfig.addPlugin(pluginSyntaxHighlight, {
		// only install the markdown highlighter
		templateFormats: ["md"],

		init: function ({ Prism }) {
			// Add your own custom language to Prism!
		},
	});
};

Advanced Usage: Namespacing a plugin

It’s unlikely you’ll need this feature but you can namespace parts of your configuration using eleventyConfig.namespace. This will add a string prefix to all filters, tags, helpers, shortcodes, collections, and transforms.

eleventy.config.js

ESM CommonJS

import pluginRss from "@11ty/eleventy-plugin-rss";

export default function (eleventyConfig) {
	eleventyConfig.namespace("myPrefix_", () => {
		// the rssLastUpdatedDate filter is now myPrefix_rssLastUpdatedDate
		eleventyConfig.addPlugin(pluginRss);
	});
};

const pluginRss = require("@11ty/eleventy-plugin-rss");

module.exports = function (eleventyConfig) {
	eleventyConfig.namespace("myPrefix_", () => {
		// the rssLastUpdatedDate filter is now myPrefix_rssLastUpdatedDate
		eleventyConfig.addPlugin(pluginRss);
	});
};

WARNING

Plugin namespacing is an application feature and should not be used if you are creating your own plugin (in your plugin configuration code). Follow along at Issue #256.

Advanced: Execute a plugin immediately Added in v3.0.0

Plugins (by default) execute in a second stage of configuration after the user’s configuration file has finished, in order to have access to the return object in the configuration callback.

You are unlikely to need this, but you can execute a plugin’s code immediately using the immediate option.

eleventy.config.js

ESM CommonJS

export default function (eleventyConfig, pluginOptions) {
	console.log( "first" );

	eleventyConfig.addPlugin(eleventyConfig => {
		console.log("fourth");
	});

	eleventyConfig.addPlugin(eleventyConfig => {
		console.log("second");
	}, {
		immediate: true
	});

	console.log("third");
};

module.exports = function (eleventyConfig, pluginOptions) {
	console.log( "first" );

	eleventyConfig.addPlugin(eleventyConfig => {
		console.log("fourth");
	});

	eleventyConfig.addPlugin(eleventyConfig => {
		console.log("second");
	}, {
		immediate: true
	});

	console.log("third");
};

Creating a Plugin

A plugin primarily provides a “configuration function.” This function is called when Eleventy is first initialized, and operates similarly to a user’s configuration function (the same eleventyConfig argument passed to the user’s eleventy.config.js file is passed here), in addition to any config passed by the user:

plugin.js

ESM CommonJS

export default function (eleventyConfig, pluginOptions) {
	// Your plugin code goes here
};

module.exports = function (eleventyConfig, pluginOptions) {
	// Your plugin code goes here
};

Note that plugins run as a second stage after the user’s primary configuration file has executed (to have access to the return object values).

Advanced Usage: Custom Plugin Arguments

If you want to allow developers to use custom arguments provided by your plugin, you can export an object. Prefer using the above syntax unless you need this behavior. For an example of how this is used, see the syntax highlighting plugin

plugin-with-args.js

ESM CommonJS

export default {
	initArguments: {},
	configFunction: function (eleventyConfig, pluginOptions) {
		// Your plugin code goes here
	},
};

module.exports = {
	initArguments: {},
	configFunction: function (eleventyConfig, pluginOptions) {
		// Your plugin code goes here
	},
};

eleventy.config.js

ESM CommonJS

export default function (eleventyConfig) {
	eleventyConfig.addPlugin(require("./fancy-plugin.js"), {
		init: function (initArguments) {
			// `this` is the eleventyConfig object
			// initArguments will be the `myInitArguments` object from above
		},
	});
};

module.exports = function (eleventyConfig) {
	eleventyConfig.addPlugin(require("./fancy-plugin.js"), {
		init: function (initArguments) {
			// `this` is the eleventyConfig object
			// initArguments will be the `myInitArguments` object from above
		},
	});
};

Feature Testing

If your plugin requires a specific feature in Eleventy, you should feature test it!

plugin.js

ESM CommonJS

export default function (eleventyConfig, pluginOptions) {
	if(!("addTemplate" in eleventyConfig)) {
		console.log( `[my-test-plugin] WARN Eleventy plugin compatibility: Virtual Templates are required for this plugin, please use Eleventy v3.0 or newer.` );
	}
};

module.exports = function (eleventyConfig, pluginOptions) {
	if(!("addTemplate" in eleventyConfig)) {
		console.log( `[my-test-plugin] WARN Eleventy plugin compatibility: Virtual Templates are required for this plugin, please use Eleventy v3.0 or newer.` );
	}
};

Version Checking

If feature testing is not available for your specific use case, you can add this code to your plugin configuration to show a warning if the plugin consumer does not have a compatible version of Eleventy:

plugin.js

ESM CommonJS

export default function (eleventyConfig, pluginOptions) {
	try {
		// Emit a warning message if the application is not using Eleventy 3.0 or newer (including prereleases).
		eleventyConfig.versionCheck(">=3.0");
	} catch(e) {
		console.log( `[my-test-plugin] WARN Eleventy plugin compatibility: ${e.message}` );
	}
};

module.exports = function (eleventyConfig, pluginOptions) {
	try {
		// Emit a warning message if the application is not using Eleventy 3.0 or newer (including prereleases).
		eleventyConfig.versionCheck(">=3.0");
	} catch(e) {
		console.log( `[my-test-plugin] WARN Eleventy plugin compatibility: ${e.message}` );
	}
};

This uses the semver package and is compatible with advanced range syntax.
Upper bounding your version number is not recommended. Eleventy works very hard to maintain backwards compatibility between major versions. Please ensure your plugin code does the same!
The versionCheck method has been available in Eleventy core since v0.3.2 (~2018).

Distributing a Plugin

If you’re distributing your plugin as a package, consider following these conventions. These are not hard requirements.

Add "eleventy-plugin" to your package.json’s keywords field.
Prefix your package name with eleventy-plugin-
Open a PR to add your plugin to our list of community plugins for publication on our community plugins directory.

Eleventy Documentation

2026-07-01T21:19:13Z

Accessibility Statement

The Eleventy project recognizes that Accessibility is an incredibly important baseline to developing inclusive and quality software. On Eleventy web properties specifically, we aim to meet WCAG 2.1 AA standards and to support our development community to do the same.

If you’ve encountered an issue with our web site—accessibility or otherwise—please let us know! The best way to do this is filing a new GitHub issue on the docs repository.

We are also available on Mastodon at eleventy or feel free to contact zachleat directly.

Our Eleventy Leaderboards encourage best practices on sites that were Built with Eleventy through performance and accessibility auditing (via Lighthouse and axe) but automated auditing systems are only a starting point.

It’s very important that we take responsibility for the code we publish and deliver and strive to correct accessibility issues with the same veracity as a full service outage.

Accessibility Resources

The A11Y Project (their website is Built with Eleventy!), including their incredible Accessibility Checklist
GOV.UK Service Manual: Understanding WCAG 2.1
WebAIM’s WCAG 2 Checklist
W3C Web Accessibility Initiative: How to Meet WCAG (Quick Reference)
Microsoft’s Inclusive Design Initiative

Tools

Automated Auditing

Compatibility Tests

Accessibility Support, screen reader compatibility tables
PowerMapper Assistive Technology Compatibility Tests

People to Follow

One of the best ways to immerse yourself in the accessibility development community is to follow the experts. Many of these folks are participants in the Eleventy community too!

Organizations to Follow

Watch and Serve

2026-07-01T21:04:11Z

Watch Files and use Development Servers

On this page

Running Eleventy with --serve starts a hot reloading local development server for you.

A development server is optional! Using --watch will run Eleventy (and re-run when you save your files) without a server.

Eleventy Dev Server Added in v2.0.0

Eleventy bundles its own dedicated Development Server. In versions prior to v2, we used Browsersync, which you can still use with Eleventy if you’d like.

For most use cases, the default behavior of this server should handle most things automatically. Changing files in your local environment will re-run an Eleventy build and refresh any active web browser sessions on the local site.

Add Your Own Watch Targets

The addWatchTarget config method allows you to manually add a file or directory for Eleventy to watch. When the file or the files in this directory change Eleventy will trigger a build. This is useful if Eleventy is not aware of your project-specific external dependencies.

eleventy.config.js

ESM CommonJS

export default function(eleventyConfig) {
	eleventyConfig.addWatchTarget("./src/scss/");
};

module.exports = function(eleventyConfig) {
	eleventyConfig.addWatchTarget("./src/scss/");
};

Advanced usage note: This works with chokidar under the hood and chokidar uses picomatch for globbing:

Both **/*.(png|jpeg) and **/*.{png,jpeg} are valid globs to matches any png or jpeg file in your project.

Reset configuration Added in v3.0.0

We do automatically look for dependencies in your configuration file based on JavaScript require or import—watch targets not included in that dependency graph will not reset or re-run your configuration automatically.

To reset your configuration for a specific watch target, use the resetConfig option.

eleventy.config.js

ESM CommonJS

export default function(eleventyConfig) {
	// You probably don’t need this
	eleventyConfig.addWatchTarget("./_config/**", {
		resetConfig: true
	});
};

module.exports = function(eleventyConfig) {
	// You probably don’t need this
	eleventyConfig.addWatchTarget("./_config/**", {
		resetConfig: true
	});
};

Reload without running a build

Use the watch option configurable with Eleventy Dev Server to refresh your local browser when local files change without triggering an Eleventy build. This is useful to decouple build processes outside of Eleventy.

Ignore Watching Files

`.gitignore`

Eleventy will ignore changes to files or folders listed in your .gitignore file by default, unless setUseGitIgnore is turned off.

Configuration API Added in v2.0.0

Previously, the configuration API ignores for template processing were also used as ignores for watching (e.g. eleventyConfig.ignores.add("README.md")).

New in v2.0.0, watch target ignores now have their own dedicated API:

eleventy.config.js

ESM CommonJS

export default function(eleventyConfig) {
	// Do not rebuild when README.md changes (You can use a glob here too)
	eleventyConfig.watchIgnores.add("README.md");

	// Or delete entries too
	eleventyConfig.watchIgnores.delete("README.md");
};

module.exports = function(eleventyConfig) {
	// Do not rebuild when README.md changes (You can use a glob here too)
	eleventyConfig.watchIgnores.add("README.md");

	// Or delete entries too
	eleventyConfig.watchIgnores.delete("README.md");
};

The watchIgnores Set starts with a default **/node_modules/** entry.

Watch JavaScript Dependencies

When in --watch mode, Eleventy will spider the dependencies of your JavaScript Templates (.11ty.js), JavaScript Data Files (.11tydata.js or _data/**/*.js), or Configuration File (usually eleventy.config.js) to watch those files too. Files in node_modules directories are ignored. This feature is enabled by default.

eleventy.config.js

ESM CommonJS

export default function(eleventyConfig) {
	// Enabled by default
	eleventyConfig.setWatchJavaScriptDependencies(false);
};

module.exports = function(eleventyConfig) {
	// Enabled by default
	eleventyConfig.setWatchJavaScriptDependencies(false);
};

Add delay before re-running

A hardcoded amount of time Eleventy will wait before triggering a new build when files have changes during --watch or --serve modes. You probably won’t need this, but is useful in some edge cases with other task runners (Gulp, Grunt, etc).

eleventy.config.js

ESM CommonJS

export default function(eleventyConfig) {
	// default is 0
	eleventyConfig.setWatchThrottleWaitTime(100); // in milliseconds
};

module.exports = function(eleventyConfig) {
	// default is 0
	eleventyConfig.setWatchThrottleWaitTime(100); // in milliseconds
};

Advanced `chokidar` Configuration

Advanced chokidar options can be defined using the setChokidarConfig configuration API method:

eleventy.config.js

ESM CommonJS

export default function(eleventyConfig) {
	eleventyConfig.setChokidarConfig({
		usePolling: true,
		interval: 500,
	});
};

module.exports = function(eleventyConfig) {
	eleventyConfig.setChokidarConfig({
		usePolling: true,
		interval: 500,
	});
};

WARNING

If you’re using Windows Subsystem for Linux (WSL) and your project exists outside of your home directory (~), you will likely want to use the usePolling feature to ensure watching works correctly. This is a WSL limitation.

Virtual Templates

2026-07-01T21:04:11Z

Virtual Templates Added in v3.0.0

In addition to template files in your input directory, Eleventy can also process virtual templates defined in your configuration file (or plugins). Related GitHub #1612.

The RSS plugin offers a virtual template to add feeds to your project.

API

eleventyConfig.addTemplate(virtualPath, content, data = {});

virtualPath: used to determine the template language and data cascade for this template. This path is relative to your project’s input directory.
content: usually a string, but maybe JavaScript (if using an 11ty.js template). Can include front matter if the template language supports it.
data: a data object tied to the template. A little more ergonomic than front matter but functionally the same.

Example

Markdown, HTML (via Liquid) Layout

eleventy.config.js

ESM CommonJS

export default function(eleventyConfig) {
	// Create content templates Files
	eleventyConfig.addTemplate("virtual.md", `# Hello`, {
        	layout: "virtual.html"
	});

	// Works great with Layouts too
	eleventyConfig.addTemplate("_includes/virtual.html", `<!-- Layout -->{{ content }}`);
};

module.exports = function(eleventyConfig) {
	// Create content templates Files
	eleventyConfig.addTemplate("virtual.md", `# Hello`, {
        	layout: "virtual.html"
	});

	// Works great with Layouts too
	eleventyConfig.addTemplate("_includes/virtual.html", `<!-- Layout -->{{ content }}`);
};

JavaScript

Any of the JavaScript shapes on 11ty.js templates are also supported here.

eleventy.config.js

ESM CommonJS

export default function(eleventyConfig) {
	// Create content templates Files
	eleventyConfig.addTemplate("virtual.11ty.js", function(data) {
		return `<h1>Hello</h1>`;
	});
};

module.exports = function(eleventyConfig) {
	// Create content templates Files
	eleventyConfig.addTemplate("virtual.11ty.js", function(data) {
		return `<h1>Hello</h1>`;
	});
};

Eleventy Documentation

Custom Data File Formats

Custom Data File Formats

Usage

Usage with Options Added in v2.0.0

Examples

YAML

TOML

JSON5 - JSON for Humans

Adding a custom JSON file extension

Feed EXIF image data into the Data Cascade

Ordering in the Data Cascade

Example

Release History

Release History

Major Branches

Full Release History

Starter Projects

Starter Projects

Lists

Source Code Samples

Image

Installation

Usage

HTML Transform

Resolving image sources

Attribute Overrides

More configuration options

Build Performance

Optimize Images on Request

In-Memory Cache

Disk Cache

Options

Output File Extensions

Output Widths

Output Formats

Skip raster formats for SVG

Related:

Allow SVG to upscale

Transparent Images

Animated Images

Transform on Request

returnType and htmlOptions

Fix Orientation

Custom Filenames

Dry-Run

Advanced Options

Fail on Error

Format Filtering

Output Directory

URL Path

Use Cache

Advanced control of Sharp image processor

Full Sharp API Access

Change Global Plugin Concurrency

Change the default Hash length

Advanced Caching Options for Remote Images

Using a Hosted Image Service

Custom URLs

Stats Only

From the Community

Community Plugins

Community Contributed Plugins

Content Dates

Content Dates

Setting a Content Date in Front Matter

Configuration API for Custom Date Parsing

Custom Date Parsing Example

Change a Project’s Default Time Zone

Dates off by one day?

Example

Also on YouTube

Collections out of order when you run Eleventy on your Server?

From the Community

Create or use Plugins

Create or use Plugins

Plugins are Configuration

Adding a Plugin

Installation

Add the plugin to Eleventy in your config file

`returnType` and `htmlOptions`

`.gitignore`

Advanced `chokidar` Configuration