Eleventy Documentation

Configuration

2025-10-28T19:30:53Z

Configuration

On this page

Configuration files are optional. Add an eleventy.config.js file to the root directory of your project (read more about default configuration filenames) to configure Eleventy to your own project’s needs. It might look like this:

eleventy.config.js

ESM CommonJS

export default async function(eleventyConfig) {
	// Configure Eleventy
};

module.exports = async function(eleventyConfig) {
	// Configure Eleventy
};

There are a few different ways to shape your configuration file. Added in v3.0.0Eleventy v3 added support for both ESM and Asynchronous callbacks.

Add Filters.
Add Shortcodes.
Add Custom Tags.
Add JavaScript Template Functions
Add custom Collections and use Advanced Collection Filtering and Sorting.
Add Plugins.

Is your config file getting big and hard to understand? You can create a project-specific plugin to better organize your code.

Default filenames

We look for the following configuration files:

.eleventy.js
eleventy.config.js Added in v2.0.0
eleventy.config.mjs Added in v3.0.0
eleventy.config.cjs Added in v2.0.0

The first configuration file found is used. The others are ignored.

Configuration Options

Input Directory

Controls the top level directory/file/glob that we’ll use to look for templates. By default Eleventy looks in the current working directory but for more complex projects it’s recommended to set this to a directory inside of your project (e.g. a content folder, as shown on the Getting Started guide).

Input Directory
Object Key	`dir.input`
Default Value	`.` (current directory)
Valid Options	Any valid directory.
Configuration API	`eleventyConfig.setInputDirectory()` Added in v3.0.0
Command Line Override	`--input`

Command Line

# The current directory
npx @11ty/eleventy --input=.

# A single file
npx @11ty/eleventy --input=README.md

# A glob of files
npx @11ty/eleventy --input=*.md

# A subdirectory (Recommended)
npx @11ty/eleventy --input=content

Configuration

Via named export (order doesn’t matter). Note that there are many different shapes of configuration file.

eleventy.config.js

ESM CommonJS

export const config = {
  dir: {
    input: "views"
  }
};

module.exports.config = {
  dir: {
    input: "views"
  }
};

Or via method (not available in plugins) Added in v3.0.0:

eleventy.config.js

ESM CommonJS

export default function(eleventyConfig) {
	// Order matters, put this at the top of your configuration file.
  eleventyConfig.setInputDirectory("views");
};

module.exports = function(eleventyConfig) {
	// Order matters, put this at the top of your configuration file.
  eleventyConfig.setInputDirectory("views");
};

Directory for Includes

The includes directory is meant for Eleventy layouts, include files, extends files, partials, or macros. These files will not be processed as full template files, but can be consumed by other templates.

Includes Directory
Object Key	`dir.includes`
Default	`_includes`
Valid Options	Any valid directory inside of `dir.input` (an empty string `""` is supported)
Configuration API	`eleventyConfig.setIncludesDirectory()` Added in v3.0.0
Command Line Override	None

Via named export (order doesn’t matter). Note that there are many different shapes of configuration file.

eleventy.config.js

ESM CommonJS

export const config = {
  dir: {
		// ⚠️ This value is relative to your input directory.
    includes: "my_includes"
  }
};

module.exports.config = {
  dir: {
		// ⚠️ This value is relative to your input directory.
    includes: "my_includes"
  }
};

Or via method (not available in plugins) Added in v3.0.0:

eleventy.config.js

ESM CommonJS

export default function(eleventyConfig) {
	// Order matters, put this at the top of your configuration file.
	// This is relative to your input directory!
  eleventyConfig.setIncludesDirectory("my_includes");
};

module.exports = function(eleventyConfig) {
	// Order matters, put this at the top of your configuration file.
	// This is relative to your input directory!
  eleventyConfig.setIncludesDirectory("my_includes");
};

Directory for Layouts (Optional)

This configuration option is optional but useful if you want your Eleventy layouts to live outside of the Includes directory. Just like the Includes directory, these files will not be processed as full template files, but can be consumed by other templates.

WARNING:

This setting only applies to Eleventy's language-agnostic layouts (when defined in front matter or data files).

When using {% extends %}, Eleventy will still search the _includes directory. See this note about existing templating features.

Includes Directory
Object Key	`dir.layouts`
Default	The value in `dir.includes`
Valid Options	Any valid directory inside of `dir.input` (an empty string `""` is supported)
Configuration API	`eleventyConfig.setLayoutsDirectory()` Added in v3.0.0
Command Line Override	None

Via named export (order doesn’t matter). Note that there are many different shapes of configuration file.

eleventy.config.js

ESM CommonJS

export const config = {
  dir: {
    // These are both relative to your input directory!
    includes: "_includes",
    layouts: "_layouts",
  }
};

module.exports.config = {
  dir: {
    // These are both relative to your input directory!
    includes: "_includes",
    layouts: "_layouts",
  }
};

Or via method (not available in plugins) Added in v3.0.0:

eleventy.config.js

ESM CommonJS

export default function(eleventyConfig) {
	// Order matters, put this at the top of your configuration file.
	// This is relative to your input directory!
  eleventyConfig.setLayoutsDirectory("_layouts");
};

module.exports = function(eleventyConfig) {
	// Order matters, put this at the top of your configuration file.
	// This is relative to your input directory!
  eleventyConfig.setLayoutsDirectory("_layouts");
};

Directory for Global Data Files

Controls the directory inside which the global data template files, available to all templates, can be found. Read more about Global Data Files.

Data Files Directory
Object Key	`dir.data`
Default	`_data`
Valid Options	Any valid directory inside of `dir.input`
Configuration API	`eleventyConfig.setDataDirectory()` Added in v3.0.0
Command Line Override	None

Via named export (order doesn’t matter). Note that there are many different shapes of configuration file.

eleventy.config.js

ESM CommonJS

export const config = {
  dir: {
    // ⚠️ This value is relative to your input directory.
    data: "lore",
  }
};

module.exports.config = {
  dir: {
    // ⚠️ This value is relative to your input directory.
    data: "lore",
  }
};

Or via method (not available in plugins) Added in v3.0.0:

eleventy.config.js

ESM CommonJS

export default function(eleventyConfig) {
	// Order matters, put this at the top of your configuration file.
  eleventyConfig.setDataDirectory("lore");
};

module.exports = function(eleventyConfig) {
	// Order matters, put this at the top of your configuration file.
  eleventyConfig.setDataDirectory("lore");
};

Output Directory

Controls the directory inside which the finished templates will be written to.

Output Directory
Object Key	`dir.output`
Default	`_site`
Valid Options	Any string that will work as a directory name. Eleventy creates this if it doesn’t exist.
Configuration API	`eleventyConfig.setOutputDirectory()` Added in v3.0.0
Command Line Override	`--output`

Command Line

npx @11ty/eleventy --output=_site

Configuration

Via named export (order doesn’t matter). Note that there are many different shapes of configuration file.

eleventy.config.js

ESM CommonJS

export const config = {
  dir: {
		output: "dist",
  }
};

module.exports.config = {
  dir: {
		output: "dist",
  }
};

Or via method (not available in plugins) Added in v3.0.0:

eleventy.config.js

ESM CommonJS

export default function(eleventyConfig) {
	// Order matters, put this at the top of your configuration file.
  eleventyConfig.setOutputDirectory("dist");
};

module.exports = function(eleventyConfig) {
	// Order matters, put this at the top of your configuration file.
  eleventyConfig.setOutputDirectory("dist");
};

Default template engine for Markdown files

Markdown files run through this template engine before transforming to HTML.

Markdown Template Engine
Object Key	`markdownTemplateEngine`
Default	`liquid`
Valid Options	A valid template engine short name or `false`
Command Line Override	None
Configuration API	`setMarkdownTemplateEngine` Added in v4.0.0

eleventy.config.js

ESM CommonJS

export const config = {
  markdownTemplateEngine: "njk",
};

module.exports.config = {
  markdownTemplateEngine: "njk",
};

There are many different shapes of configuration file.

Default template engine for HTML files

HTML templates run through this template engine before transforming to (better) HTML.

HTML Template Engine
Object Key	`htmlTemplateEngine`
Default	`liquid`
Valid Options	A valid template engine short name or `false`
Command Line Override	None
Configuration API	`setHtmlTemplateEngine` Added in v4.0.0

eleventy.config.js

ESM CommonJS

export const config = {
  htmlTemplateEngine: "njk",
};

module.exports.config = {
  htmlTemplateEngine: "njk",
};

There are many different shapes of configuration file.

Template Formats

Specify which types of templates should be transformed.

Template Formats
Object Key	`templateFormats`
Default	`html,liquid,ejs,md,hbs,mustache,haml,pug,njk,11ty.js`
Valid Options	Array of template engine short names
Command Line Override	`--formats` (accepts a comma separated string)
Configuration API	`setTemplateFormats` and `addTemplateFormats`

INFO:

Case sensitivity: File extensions should be considered case insensitive, cross-platform. While macOS already behaves this way (by default), other operating systems require additional Eleventy code to enable this behavior.

Command Line

npx @11ty/eleventy --formats=html,liquid,njk

Configuration File Static Export

eleventy.config.js

ESM CommonJS

export const config = {
  templateFormats: ["html", "liquid", "njk"],
};

module.exports.config = {
  templateFormats: ["html", "liquid", "njk"],
};

There are many different shapes of configuration file.

Configuration API

eleventy.config.js

ESM CommonJS

export default function (eleventyConfig) {
	// Reset to this value
	eleventyConfig.setTemplateFormats("html,liquid,njk");

	// Additive to existing
	eleventyConfig.addTemplateFormats("pug,haml");

	// Or:
	// eleventyConfig.setTemplateFormats([ "html", "liquid", "njk" ]);
	// eleventyConfig.addTemplateFormats([ "pug", "haml" ]);
};

module.exports = function (eleventyConfig) {
	// Reset to this value
	eleventyConfig.setTemplateFormats("html,liquid,njk");

	// Additive to existing
	eleventyConfig.addTemplateFormats("pug,haml");

	// Or:
	// eleventyConfig.setTemplateFormats([ "html", "liquid", "njk" ]);
	// eleventyConfig.addTemplateFormats([ "pug", "haml" ]);
};

Enable Quiet Mode to Reduce Console Noise

In order to maximize user-friendliness to beginners, Eleventy will show each file it processes and the output file. To disable this noisy console output, use quiet mode!

Quiet Mode
Default	`false`
Valid Options	`true` or `false`
Command Line Override	`--quiet`

eleventy.config.js

ESM CommonJS

export default function (eleventyConfig) {
	eleventyConfig.setQuietMode(true);
};

module.exports = function (eleventyConfig) {
	eleventyConfig.setQuietMode(true);
};

The command line will override any setting in configuration:

npx @11ty/eleventy --quiet

Deploy to a subdirectory with a Path Prefix

If your site lives in a different subdirectory (particularly useful with GitHub pages), use pathPrefix to specify this. When paired with the HTML <base> plugin it will transform any absolute URLs in your HTML to include this folder name and does not affect where things go in the output folder.

Path Prefix
Object Key	`pathPrefix`
Default	`/`
Valid Options	A prefix directory added to urls in HTML files
Command Line Override	`--pathprefix`

eleventy.config.js

ESM CommonJS

import { HtmlBasePlugin } from "@11ty/eleventy";

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

export const config = {
	pathPrefix: "/eleventy-base-blog/",
}

module.exports = async function (eleventyConfig) {
	const { HtmlBasePlugin } = await import("@11ty/eleventy");

	eleventyConfig.addPlugin(HtmlBasePlugin);
};

module.exports.config = {
	pathPrefix: "/eleventy-base-blog/",
}

Deploy to https://11ty.github.io/eleventy-base-blog/ on GitHub pages without modifying your config. This allows you to use the same code-base to deploy to either GitHub pages or Netlify, like the eleventy-base-blog project does.

npx @11ty/eleventy --pathprefix=eleventy-base-blog

Change Base File Name for Data Files

Added in v2.0.0 When using Directory Specific Data Files, looks for data files that match the current folder name. You can override this behavior to a static string with the setDataFileBaseName method.

File Suffix
Configuration API	`setDataFileBaseName`
Default	Current folder name
Valid Options	String
Command Line Override	None

eleventy.config.js

ESM CommonJS

export default function (eleventyConfig) {
	// Looks for index.json and index.11tydata.json instead of using folder names
	eleventyConfig.setDataFileBaseName("index");
};

module.exports = function (eleventyConfig) {
	// Looks for index.json and index.11tydata.json instead of using folder names
	eleventyConfig.setDataFileBaseName("index");
};

Change File Suffix for Data Files

Added in v2.0.0 When using Template and Directory Specific Data Files, to prevent file name conflicts with non-Eleventy files in the project directory, we scope these files with a unique-to-Eleventy suffix. This suffix is customizable using the setDataFileSuffixes configuration API method.

File Suffix
Configuration API	`setDataFileSuffixes`
Default	`[".11tydata", ""]`
Valid Options	Array
Command Line Override	None

For example, using ".11tydata" will search for *.11tydata.js and *.11tydata.json data files. The empty string ("") here represents a file without a suffix—and this entry only applies to *.json data files.

This feature can also be used to disable Template and Directory Data Files altogether with an empty array ([]).

eleventy.config.js

ESM CommonJS

export default function (eleventyConfig) {
	// e.g. file.json and file.11tydata.json
	eleventyConfig.setDataFileSuffixes([".11tydata", ""]);

	// e.g. file.11tydata.json
	eleventyConfig.setDataFileSuffixes([".11tydata"]);

	// No data files are used.
	eleventyConfig.setDataFileSuffixes([]);
};

module.exports = function (eleventyConfig) {
	// e.g. file.json and file.11tydata.json
	eleventyConfig.setDataFileSuffixes([".11tydata", ""]);

	// e.g. file.11tydata.json
	eleventyConfig.setDataFileSuffixes([".11tydata"]);

	// No data files are used.
	eleventyConfig.setDataFileSuffixes([]);
};

Backwards Compatibility Note (v2.0.0)

Prior to v2.0.0 this feature was exposed using a jsDataFileSuffix property in the configuration return object. When the setDataFileSuffixes method has not been used, Eleventy maintains backwards compatibility for old projects by using this property as a fallback.

eleventy.config.js

ESM CommonJS

export default function (eleventyConfig) {
	return {
		jsDataFileSuffix: ".11tydata",
	};
};

module.exports = function (eleventyConfig) {
	return {
		jsDataFileSuffix: ".11tydata",
	};
};

Transforms

Documented moved to Transforms.

Linters

Similar to Transforms, Linters are provided to analyze a template’s output without modifying it.

Linters
Configuration API	`addLinter`
Object Key	N/A
Valid Options	Callback function
Command Line Override	None

eleventy.config.js

ESM CommonJS

export default function (eleventyConfig) {
	// Sync or async
	eleventyConfig.addLinter("linter-name", async function (content) {
		console.log(this.inputPath);
		console.log(this.outputPath);

		// Eleventy 2.0+ has full access to Eleventy’s `page` variable
		console.log(this.page.inputPath);
		console.log(this.page.outputPath);
	});
};

module.exports = function (eleventyConfig) {
	// Sync or async
	eleventyConfig.addLinter("linter-name", async function (content) {
		console.log(this.inputPath);
		console.log(this.outputPath);

		// Eleventy 2.0+ has full access to Eleventy’s `page` variable
		console.log(this.page.inputPath);
		console.log(this.page.outputPath);
	});
};

Linters Example: Use Inclusive Language

Inspired by the CSS Tricks post Words to Avoid in Educational Writing, this linter will log a warning to the console when it finds a trigger word in a markdown file.

This example has been packaged as a plugin in eleventy-plugin-inclusive-language.

Filename eleventy.config.js

export default function (eleventyConfig) {
	eleventyConfig.addLinter(
		"inclusive-language",
		function (content, inputPath, outputPath) {
			let words =
				"simply,obviously,basically,of course,clearly,just,everyone knows,however,easy".split(
					","
				);

			// Eleventy 1.0+: use this.inputPath and this.outputPath instead
			if (inputPath.endsWith(".md")) {
				for (let word of words) {
					let regexp = new RegExp("\\b(" + word + ")\\b", "gi");
					if (content.match(regexp)) {
						console.warn(
							`Inclusive Language Linter (${inputPath}) Found: ${word}`
						);
					}
				}
			}
		}
	);
};

Data Filter Selectors

A Set of lodash selectors that allow you to include data from the data cascade in the output from --to=json, --to=ndjson.

eleventy.config.js

ESM CommonJS

export default function (eleventyConfig) {
	eleventyConfig.dataFilterSelectors.add("page");
	eleventyConfig.dataFilterSelectors.delete("page");
};

module.exports = function (eleventyConfig) {
	eleventyConfig.dataFilterSelectors.add("page");
	eleventyConfig.dataFilterSelectors.delete("page");
};

This will now include a data property in your JSON output that includes the page variable for each matching template.

TypeScript Type Definitions

This may enable some extra autocomplete features in your IDE (where supported).

eleventy.config.js

ESM CommonJS

/** @param {import("@11ty/eleventy").UserConfig} eleventyConfig */
export default function (eleventyConfig) {
	// …
};

/** @param {import("@11ty/eleventy").UserConfig} eleventyConfig */
module.exports = function (eleventyConfig) {
	// …
};

Related: GitHub #2091 and GitHub #3097

Removed Features

Change exception case suffix for HTML files

Feature Removal

The htmlOutputSuffix feature was removed in Eleventy 3.0. You can read about the feature on the v2 documentation. Related: GitHub #3327.

Documentation Moved to Dedicated Pages

Copy Files to Output using Passthrough File Copy

Files found (that don’t have a valid template engine) from opt-in file extensions in templateFormats will passthrough to the output directory. Read more about Passthrough Copy.

Transforms

Documented at Transforms.

Environment Variables

2025-10-28T18:08:49Z

Environment Variables

On this page

You can set and use your own environment variables in your projects. They will be available in your code via Node.js’ process.env property.

These are typically used for setting your deployment context and private API keys. This is also the approach used to enable DEBUG mode.

INFO:

Note that environment variables are only available in JavaScript files in your project, evaluated at build time. This includes your config file, JavaScript data files, JavaScript templates, etc. To use environment variables in other template languages, you can use a Javascript Data file.

Setting your own

Via `.env` file

For private keys and other sensitive information, you’ll want to create a .env file and use the dotenv package to setup those values.

WARNING:

Make sure you add .env to your .gitignore file. Do not commit your .env file to your repository!!

Via the command line

macOS or Linux (et al)

MY_ENVIRONMENT=production npx @11ty/eleventy

Windows cmd.exe

set MY_ENVIRONMENT=production & npx @11ty/eleventy

Windows Powershell (default in VS Code)

$env:MY_ENVIRONMENT="production"; npx @11ty/eleventy

Cross Platform npm scripts

Use the cross-env package to compatibly set your environment variables cross-platform.

npm install cross-env

Filename package.json

{
	"scripts": {
		"build:prod": "cross-env MY_ENVIRONMENT=production npx @11ty/eleventy"
  }
}

Use Case Ideas

Expose Environment Variables to your templates using JavaScript Data Files.
Opt-in to git Last Modified only in production
Use fewer image formats in the Image plugin to speed up local development

Eleventy Supplied

Node.js exposes environment variables under process.env.

Eleventy also supplies its own Eleventy-specific environment variables, usually intended for more advanced use cases. You can use these in your configuration or in data files as needed.

process.env.ELEVENTY_ROOT the absolute path to the directory in which you’ve run the Eleventy command.
process.env.ELEVENTY_SOURCE is the method in which Eleventy has run, current either cli or script (via the programmatic API).
process.env.ELEVENTY_RUN_MODE Added in v2.0.0 is one of build, serve, or watch.
process.env.ELEVENTY_VERSION Added in v3.0.0 the current version of Eleventy (e.g. "3.0.0-alpha.5").

Disable Colors

Node.js supports a NODE_DISABLE_COLORS environment variable that will disable colorized text in the terminal output.

macOS Linux Windows Cross Platform

NODE_DISABLE_COLORS=1 npx @11ty/eleventy

$env:NODE_DISABLE_COLORS="1"; npx @11ty/eleventy

Or with the older cmd.exe:

set NODE_DISABLE_COLORS=1 & npx @11ty/eleventy

npx cross-env NODE_DISABLE_COLORS=1 npx @11ty/eleventy

Use the cross-env package to compatibly set your environment variables cross-platform.

Programmatic API

2025-10-28T17:45:46Z

Programmatic API

On this page

You can run Eleventy in any arbitrary Node script.

Write to the file system

Don’t forget to install Eleventy into your local project first!

Now create a file called my-node-script.js with the following contents:

my-node-script.js

ESM CommonJS

import Eleventy from "@11ty/eleventy";

let elev = new Eleventy();
await elev.write();

(async function () {
	const { Eleventy } = await import("@11ty/eleventy");

	let elev = new Eleventy();
	await elev.write();
})();

Then run your new script from the command line.

node my-node-script.js

Don’t write to the file system

Using .write() will write your output to the file system. If, instead, you want to retrieve the content programmatically without writing, use .toJSON() or .toNDJSON().

JSON Output

my-node-script.js

ESM CommonJS

import Eleventy from "@11ty/eleventy";

let elev = new Eleventy();
let json = await elev.toJSON();

// All results
console.log(json);

(async function () {
	const { Eleventy } = await import("@11ty/eleventy");

	let elev = new Eleventy();
	let json = await elev.toJSON();

	// All results
	console.log(json);
})();

Adding data to JSON output

You can use the eleventyConfig.dataFilterSelectors configuration API Set to add or remove lodash-style selectors for Data Cascade entries to be included in individual entries from the toJSON method.

my-node-script.js

ESM CommonJS

import Eleventy from "@11ty/eleventy";

let elev = new Eleventy(".", "_site", {
	config: function(eleventyConfig) {
		eleventyConfig.dataFilterSelectors.add("globalData.key1");
		eleventyConfig.dataFilterSelectors.add("globalData.key2");
		eleventyConfig.dataFilterSelectors.add("someProperty.key");
	}
});

let json = await elev.toJSON();

// All results with
// json[…].data.globalData.key1
// json[…].data.globalData.key2
// json[…].data.someProperty.key
console.log(json);

(async function () {
	const { Eleventy } = await import("@11ty/eleventy");

	let elev = new Eleventy(".", "_site", {
		config: function(eleventyConfig) {
			eleventyConfig.dataFilterSelectors.add("globalData.key1");
			eleventyConfig.dataFilterSelectors.add("globalData.key2");
			eleventyConfig.dataFilterSelectors.add("someProperty.key");
		}
	});

	let json = await elev.toJSON();

	// All results with
	// json[…].data.globalData.key1
	// json[…].data.globalData.key2
	// json[…].data.someProperty.key
	console.log(json);
})();

ndjson Output

my-node-script.js

ESM CommonJS

import Eleventy from "@11ty/eleventy";

let elev = new Eleventy();
let stream = await elev.toNDJSON();
stream.on("data", (entry) => {
	// Stream one output result at a time
	let json = JSON.parse(entry.toString());
	console.log(json);
});

(async function () {
	const { Eleventy } = await import("@11ty/eleventy");

	let elev = new Eleventy();
	let stream = await elev.toNDJSON();
	stream.on("data", (entry) => {
		// Stream one output result at a time
		let json = JSON.parse(entry.toString());
		console.log(json);
	});
})();

Changing the Input and Output Directories

The first argument is the input directory. The second argument is the output directory.

my-node-script.js

ESM CommonJS

import Eleventy from "@11ty/eleventy";

let elev = new Eleventy(".", "_site");

// Use `write` or `toJSON` or `toNDJSON`

(async function () {
	const { Eleventy } = await import("@11ty/eleventy");

	let elev = new Eleventy(".", "_site");

	// Use `write` or `toJSON` or `toNDJSON`
})();

Full Options List

The third argument to Eleventy is an options object.

(This documentation section is a work in progress but you’re welcome to dig into the Eleventy class source code in v3.1.2 to learn more)

my-node-script.js

ESM CommonJS

import Eleventy from "@11ty/eleventy";

let elev = new Eleventy(".", "_site", {
	// --quiet
	quietMode: true,

	// --config
	configPath: ".eleventy.js",

	config: function (eleventyConfig) {
		// Do some custom Configuration API stuff
		// Works great with eleventyConfig.addGlobalData
	},
});

// Use `write` or `toJSON` or `toNDJSON`

(async function () {
	const { Eleventy } = await import("@11ty/eleventy");

	let elev = new Eleventy(".", "_site", {
		// --quiet
		quietMode: true,

		// --config
		configPath: ".eleventy.js",

		config: function (eleventyConfig) {
			// Do some custom Configuration API stuff
			// Works great with eleventyConfig.addGlobalData
		},
	});

	// Use `write` or `toJSON` or `toNDJSON`
})();

Install Eleventy Globally

2025-10-28T17:45:46Z

Install Eleventy Globally

WARNING:

It is not recommended to install Eleventy globally (though it does work fine).

It is preferred to use package.json installation instead. package.json installation will avoid versioning issues if you come back to this project later or decide to use Eleventy on multiple projects that may need different versions.

WARNING:

If you’re planning on deploying your site using a service like Netlify (running a build a deployment server), you must use package.json installation and not global installation.

npm install -g @11ty/eleventy

The above adds an eleventy command that you can use in any directory. When you run Eleventy globally, it might look like this:

$ eleventy --version
3.1.2

Data Deep Merge

2025-10-24T21:18:50Z

Data Deep Merge

On this page

Using the override prefix

Feature Removed

This feature was removed in Eleventy v4.0. Read more at GitHub Issue #3937 (originally inspired by GitHub Issue #147).

Feel free to head over to the previous Eleventy version of the docs for this documentation. Historically, it may be important to remember that the default for this feature was changed to true in Eleventy v1.

eleventy.config.js

ESM CommonJS

export default function (eleventyConfig) {
	// throws an error in Eleventy v4
	eleventyConfig.setDataDeepMerge(false);

	// is a no-op in Eleventy v4
	eleventyConfig.setDataDeepMerge(true);
};

module.exports = function (eleventyConfig) {
	// throws an error in Eleventy v4
	eleventyConfig.setDataDeepMerge(false);

	// is a no-op in Eleventy v4
	eleventyConfig.setDataDeepMerge(true);
};

Using the `override:` prefix

The override: prefix in the Data Cascade is still available! Read more about override: on the Data Cascade documentation.

Markdown

2025-10-24T14:12:24Z

On this page

Eleventy Short Name	File Extension	npm Package
`md`	`.md`	`markdown-it`

Related languages: MDX

Eleventy version	`markdown-it` version
`@11ty/eleventy@0.x`	`markdown-it@10.x`
`@11ty/eleventy@1.x`	`markdown-it@12.x`
`@11ty/eleventy@2.x`	`markdown-it@13.x`
`@11ty/eleventy@3.x`	`markdown-it@14.x`

INFO:

Markdown files are by default pre-processed as Liquid templates. You can change this default in your configuration file (or disable it altogether). To change this for a single template and not globally, read Changing a Template’s Rendering Engine.

Markdown Options

Default Options

html: true (markdown-it default is false)

The only listed options here are the ones that differ from the default markdown-it options. See all markdown-it options and defaults.

Starting in Eleventy 2.0, we’ve disabled the Indented Code Blocks feature by default.

Optional: Set your own library instance

Pass in your own instance of the Markdown library using the Configuration API. See all markdown-it options.

eleventy.config.js

ESM CommonJS

import markdownIt from "markdown-it";

export default function (eleventyConfig) {
	let options = {
		html: true,
		breaks: true,
		linkify: true,
	};

	eleventyConfig.setLibrary("md", markdownIt(options));
};

const markdownIt = require("markdown-it");

module.exports = function (eleventyConfig) {
	let options = {
		html: true,
		breaks: true,
		linkify: true,
	};

	eleventyConfig.setLibrary("md", markdownIt(options));
};

Optional: Amend the Library instance Added in v2.0.0

Run your own callback on the provided Library instance (the default or any provided by setLibrary above).

eleventy.config.js

ESM CommonJS

export default function (eleventyConfig) {
	eleventyConfig.amendLibrary("md", (mdLib) => mdLib.enable("code"));
};

module.exports = function (eleventyConfig) {
	eleventyConfig.amendLibrary("md", (mdLib) => mdLib.enable("code"));
};

Add your own plugins

Pass in your own markdown-it plugins using the amendLibrary (Eleventy >= 2.0) or setLibrary (Eleventy <= 1.0) Configuration API methods (building on the method described in “Options” above).

Find your own markdown-it plugin on NPM
npm install the plugin.

import { full as emoji } from "markdown-it-emoji";

export default function (eleventyConfig) {
	eleventyConfig.amendLibrary("md", (mdLib) => mdLib.use(emoji));
};

Indented Code Blocks

Markdown has a lesser known feature called Indented Code Blocks, which means any content that is indented by four or more spaces (and has a preceding line break) will be transformed into a code block.

a simple
      indented code block

is transformed into:

<pre><code>a simple
  indented code block
</code></pre>

(Example borrowed from the CommonMark Specification)

After listening to community feedback, starting with Eleventy 2.0.0 Indented Code Blocks are disabled for both the default Markdown library instance and any set via setLibrary.

Want to re-enable Indented Code Blocks?

WARNING:

Careful! This feature is (almost) universally disliked.

To re-enable Indented Code Blocks in Eleventy 2.0 (or newer), use the amendLibrary approach. Make sure you read through the warning documented below to understand the ramifications.

module.exports = function (eleventyConfig) {
	eleventyConfig.amendLibrary("md", (mdLib) => mdLib.enable("code"));
};

When using Indented Code Blocks, any content that follows this four (or more) space indent may be subject to transformation. If you pre-process your markdown using Nunjucks or Liquid or another templating engine, that means the content retrieved from an include or a shortcode may also fit this formatting. Careful when you include extra whitespace in your includes or shortcodes!

Filename .eleventy.js

// 🛑 Bad, don’t do this
eleventyConfig.addShortcode("badShortcode", function () {
	return `
    This is a code block in a markdown file!
`;
});

Filename .eleventy.js

// ✅ This will return expected output
eleventyConfig.addShortcode("goodShortcode", function () {
	return `
This will not be a code block in a markdown file.
`;
});

If you still wish to indent your template literals, you can use outdent to strip each line of indentation before handing it off to the renderer.

// ✅ This is also acceptable
eleventyConfig.addShortcode("alsoGoodShortcode", function () {
	return outdent`
    This will not be a code block in a markdown file.
`;
});

Want to disable Indented Code Blocks on Eleventy v1 or older?

const markdownIt = require("markdown-it");

module.exports = function (eleventyConfig) {
	let options = {
		// … truncated for brevity
	};

	eleventyConfig.setLibrary("md", markdownIt(options).disable("code"));
};

Why can’t I return markdown from paired shortcodes to use in a markdown file?

WARNING:

This is a Common Pitfall.

The truth is, you can return markdown inside shortcodes (as long as the file is transforming markdown, either as a .md file extension or with templateEngineOverride). However, there is one small wrinkle that might catch you off guard.

eleventy.config.js

ESM CommonJS

export default function(eleventyConfig) {
	eleventyConfig.addPairedShortcode("myShortcode", function (content) {
		// Method A: ✅ This works fine
		return content;

		// Method B: ⚠️ Careful when wrapping with HTML
		return `<div>${content}</div>`;
	});
}

module.exports = function(eleventyConfig) {
	eleventyConfig.addPairedShortcode("myShortcode", function (content) {
		// Method A: ✅ This works fine
		return content;

		// Method B: ⚠️ Careful when wrapping with HTML
		return `<div>${content}</div>`;
	});
}

Syntax Liquid, Nunjucks

{% myShortcode %}My really *important* content.{% endmyShortcode %}

Method A returns: My really *important* content. which is successfully transformed as markdown into My really <em>important</em> content.
Method B returns: <div>My really *important* content.</div> which markdown treats as an HTML block which cannot have nested markdown inside of it. It’s transformed into <div>My really *important* content.</div>. Read more at the CommonMark specification on HTML blocks.

Computed Data

2025-10-24T14:12:24Z

Computed Data

On this page

At the end of the Data Cascade you may want to inject Data properties into your data object that are based on other data values. To do that you can use the new eleventyComputed feature.

INFO:

It is important to note that Computed Data is computed right before templates are rendered. Therefore Computed Data cannot be used to modify the special data properties used to configure templates (e.g. layout, pagination, tags etc.). These restrictions may be relaxed over time.

Real World Example

Say you want to use Eleventy’s Navigation Plugin to create a navigation menu for your site. This plugin relies on the eleventyNavigation object to be set. You don’t necessarily want to set this object manually in front matter in each individual source file. This is where Computed Data comes in!

Consider a blog post with the following front matter format:

Filename posts/my-page-title.md

---
title: My Page Title
parent: My Parent Key
---

If this file is generated by a Content Management System (like Netlify CMS, in my particular case), I may not be able to (or want to) create the eleventyNavigation object for each of them. I would also not be able to just dump a standard Data Directory File in there either (that would be useful for setting defaults but we don’t want the same values for every markdown file). eleventyNavigation properties must be set based on other data properties.

Instead, I created this Data Directory File using eleventyComputed:

posts/posts.11tydata.js

ESM CommonJS

export default {
	eleventyComputed: {
		eleventyNavigation: {
			key: (data) => data.title,
			parent: (data) => data.parent,
		},
	},
};

module.exports = {
	eleventyComputed: {
		eleventyNavigation: {
			key: (data) => data.title,
			parent: (data) => data.parent,
		},
	},
};

INFO:

If you want to use a JavaScript function for your eleventyComputed properties, you must use either JavaScript front matter or a JavaScript data file (template, directory, or global). YAML and JSON do not support JavaScript functions.

The resulting data for each posts/*.md file when processed by Eleventy has the following structure:

Data Cascade for posts/my-page-title.md

{
	"title": "My Page Title",
	"parent": "My Parent Key",
	"eleventyNavigation": {
		"key": "My Page Title",
		"parent": "My Parent Key"
	}
}

If I wanted this data to be computed for all files, I could instead create the following eleventyComputed.js global data file.

_data/eleventyComputed.js

ESM CommonJS

export default {
	eleventyNavigation: {
		key: (data) => data.title,
		parent: (data) => data.parent,
	},
};

module.exports = {
	eleventyNavigation: {
		key: (data) => data.title,
		parent: (data) => data.parent,
	},
};

Using JavaScript

Use any arbitrary JavaScript for an eleventyComputed property. Note that JavaScript functions require either JavaScript front matter or a JavaScript data file (template, directory, or global). YAML and JSON do not support JavaScript functions.

Here’s a bunch of examples:

ESM CommonJS

export default {
	eleventyComputed: {
		myTemplateString: "This is assumed to be a template string!",
		myString: (data) => "This is a string!",
		myFunction: (data) => `This is a string using ${data.someValue}.`,
		myAsyncFunction: async (data) => await someAsyncThing(),
		myPromise: (data) => {
			return new Promise((resolve) => {
				setTimeout(() => resolve("100ms DELAYED HELLO"), 100);
			});
		},
	},
};

module.exports = {
	eleventyComputed: {
		myTemplateString: "This is assumed to be a template string!",
		myString: (data) => "This is a string!",
		myFunction: (data) => `This is a string using ${data.someValue}.`,
		myAsyncFunction: async (data) => await someAsyncThing(),
		myPromise: (data) => {
			return new Promise((resolve) => {
				setTimeout(() => resolve("100ms DELAYED HELLO"), 100);
			});
		},
	},
};

Using a Template String

If you want to use eleventyComputed in YAML front matter, you can use the template syntax string that matches the syntax of the template.

This is how permalink works, if you’re already familiar with that.

Consider our first example, but using Nunjucks (this example is also valid Liquid syntax).

Filename posts/my-page-title.njk

---
title: My Page Title
parent: My Parent Key
eleventyComputed:
  eleventyNavigation:
    key: "{{ title }}"
    parent: "{{ parent }}"
---

The above would also resolve to the same Data Cascade:

Data Cascade for posts/my-page-title.njk

{
	"title": "My Page Title",
	"parent": "My Parent Key",
	"eleventyNavigation": {
		"key": "My Page Title",
		"parent": "My Parent Key"
	}
}

WARNING:

Template syntax is definitely slower than the “Using JavaScript” methods above.

INFO:

This would also work in JSON data files or any other data file type in the cascade, just keep in mind that the template syntax must match the template syntax that it eventually winds up with in the Data Cascade.

Advanced Details

We put a lot of work into making this feature as easy to use as possible. Most of these details shouldn’t matter to you as it should Just Work™. But here’s a few things we thought of already and handle in a good way:

You can put your eleventyComputed values anywhere in the Data Cascade: Front Matter, any Data Files (you could even make an eleventyComputed.js global data file if you wanted to set this for your entire site).
You can read and use any of the existing data properties (including ones created by Eleventy like page).
- You can use or set permalink in eleventyComputed and it will work (permalink is a top-level special case computed property anyway). Setting other special Eleventy data keys are not yet supported.
You can use a computed property that depends on other computed properties (just reference them like they were any other property data.propName and ⚠️ not data.eleventyComputed.propName)
- The order of the keys in the object doesn’t matter—we smartly figure out what order these should be computed in.
- We will let you know if you have circular references (key1 uses on key2 which uses key1 again)
- When we calculate the dependency graph for your variable references, we may get it wrong if your references to other computed properties are nested inside of conditional logic. Read more at Declaring your Dependencies.
You can use a nested object of any depth. It can mix, match, and merge with the standard (non-computed) data. This will always do deep merging.
You can reuse and override properties at the same time. In the following example key will have This Is My Key as its value.

---
key: My Key
eleventyComputed:
  key: "This Is {{ key }}"
---

Declaring Your Dependencies

We do try our best to automatically detect dependencies between eleventyComputed keys, but it isn’t always 100% accurate—especially if you include conditional logic that only uses another Computed Data key inside of a conditional block. To workaround this issue, you can always declare your dependencies inside of your callback so that it resolves correctly. To do so, just access the variables that your callback uses in the callback function.

ESM CommonJS

export default {
	eleventyComputed: {
		myValue: () => "Hi",
		myOtherValue: () => "Bye",
		usesAllTheThings: (data) => {
			// We detect this as a declared dependency
			data.myValue;
			// You can use as many as you want.
			data.myOtherValue;
			// You could use any valid JS syntax to access them.
			[data.myValue, data.myOtherValue];

			return `How are you?`;
		},
	},
};

module.exports = {
	eleventyComputed: {
		myValue: () => "Hi",
		myOtherValue: () => "Bye",
		usesAllTheThings: (data) => {
			// We detect this as a declared dependency
			data.myValue;
			// You can use as many as you want.
			data.myOtherValue;
			// You could use any valid JS syntax to access them.
			[data.myValue, data.myOtherValue];

			return `How are you?`;
		},
	},
};

If you suspect Eleventy has the Computed Data order wrong—you can double check what variables Eleventy detects inside of a Computed Data function in the debug output.

Data Cascade

2025-10-24T14:12:24Z

Data Cascade

On this page

In Eleventy, data is merged from multiple different sources before the template is rendered. The data is merged in what Eleventy calls the Data Cascade.

Sources of Data

When the data is merged in the Eleventy Data Cascade, the order of priority for sources of data is (from highest priority to lowest):

Example

Filename my-template.md

---
title: This is a Good Blog Post
tags:
  - CSS
  - HTML
layout: my-layout.njk
---

Filename _includes/my-layout.njk

---
title: This is a Very Good Blog Post
author: Zach
tags:
  - JavaScript
---

Note that when my-template.md and my-layout.njk share data with the same object key (title and tags), the “leaf template” my-template.md takes precedence.

The data cascade results in the following data when my-template.md is rendered:

Syntax JavaScript

{
	"title": "This is a Good Blog Post",
	"author": "Zach",
	"tags": ["CSS", "HTML", "JavaScript"],
	"layout": "my-layout.njk"
}

Eleventy does a deep merge to combine Object literals and Arrays. (Wait, where did the option to opt-out of deep-merging go?) You can override this on a per-property basis with the override: prefix.

Using the `override:` prefix

Use the override: prefix on any data key to opt-out of deep-merge behavior for specific values or nested values.

Filename posts/posts.json

{
	"tags": ["posts"]
}

Filename posts/firstpost.md

---
# Instead of merging the array, this creates an empty set
override:tags: []
---

Even though normally the posts/firstpost.md file would inherit the posts tag from the directory data file (per normal data cascade rules), we can override the tags value to be an empty array to opt-out of Array merge behavior.

From the Community

I Finally Understand Eleventy’s Data Cascade

+ Add yours!

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

exhibitionism — tlohde (2025)
Last modified date of Eleventy posts — Josh Sherman (2025)
Data vs. Collections in Eleventy — Mark Dyck (2025)
Rendering FreeMarker and Python page templates with 11ty — Tobias Fedder (2025)
Generating content driven CSS with Eleventy — Sami (2025)

Expand to see 44 more resources.

Building a personal digital music library with Eleventy and APIs — Damian Walsh (2025)
Adding Random Content Using Eleventy — Stu Robson (2024)
Here's how this is all put together — Cory Dransfeldt (2024)
Adding Cooklang Support to Eleventy Three Ways — Robb Knight (2024)
Building a Blog with Eleventy (blind, any%) — Sebin Nyshkim (2024)
New Reading page, powered by the Airtable API — Melanie Richards (2024)
Eleventy - Add CSV data file support — Rob O'Leary (2024)
Umami API Top 10 Pages — Clayton Errington (2024)
Building pages from data in Eleventy — Cory Dransfeldt (2024)
Eleventy Navigation Set URL to First Item in Collection — John M. Wargo (2024)
Version 3 — Devin Haska (2024)
Using B2 as a JSON data store — Cory Dransfeldt (2024)
Eleventy - Differentiate between dev and production builds with unique favicons — Rob O'Leary (2024)
Community websites with Eleventy — Juha-Matti Santala (2024)
Creating an OPML File for my Blogroll — Robb Knight (2024)
Learning New Tricks — Antonio Rodrigues (2024)
Right here, right now — Martin Gunnarsson (2024)
Adding a git based changelog in 11ty — James Doc (2023)
Programmatically importing your Last.fm listening data to ListenBrainz — Cory Dransfeldt (2023)
Popular Pages with Eleventy and Fathom Analytics — Robb Knight (2023)
Scratch that...use the Google Sheets API — Bob Monsour (2023)
Build a Blogroll with Eleventy — Ben Myers (2023)
Using Eleventy filters in Directory Computed Data — Chris Coleman (2023)
Relational data in Eleventy — Dan Burzo (2022)
How to access post content in template listing files — Al Power (2022)
Testing the Netlify Cache Plugin with Eleventy — Raymond Camden (2022)
Journey to the Center of the Eleventy Data Cascade with Ben Myers — Ben Myers (2022)
11ty tips I wish I knew from the start — David East (2022)
Dynamically choosing a data file to use in Eleventy templates — Cassey Lottman (2021)
Media Diary with Eleventy — anh (2021)
A Running Log - Garmin Connect and Eleventy — Josh Crain (2021)
Building a notification thingamajig with Eleventy data — Ashur Cabrera (2021)
Stop forgetting the Eleventy Data Cascade — Kaan Divringi (2021)
Creating pages from data with Eleventy — Florian Eckerstorfer (2021)
I Finally Understand Eleventy's Data Cascade — Ben Myers (2021)
Site Metadata — Stephanie Eckles (2021)
Using Template Content as Data for 11ty — Stephanie Eckles (2021)
How to use CSV data with Eleventy — Max Kohler (2021)
Add structured data annotations to Eleventy blog — Max Ivanov (2020)
Understanding Filters, Shortcodes and Data in 11ty — Mike (2020)
Composing data in Eleventy — Ryan Boone (2020)
Using Eleventy data files for frequently used links — Dana Byerly (2020)
Architecting data in Eleventy — Sia Karamalegos (2020)
Five Critical Things To Do Before Working With 11ty — Khalid Abuhakmeh (2020)

Watch and Serve

2025-10-23T21:39:30Z

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.

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 directly aware of any external file 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
	});
};

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

2025-10-23T21:39:30Z

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

Configuration

Configuration

Default filenames

Configuration Options

Input Directory

Command Line

Configuration

Directory for Includes

Directory for Layouts (Optional)

Directory for Global Data Files

Output Directory

Command Line

Configuration

Default template engine for Markdown files

Default template engine for HTML files

Template Formats

Command Line

Configuration File Static Export

Configuration API

Enable Quiet Mode to Reduce Console Noise

Deploy to a subdirectory with a Path Prefix

Change Base File Name for Data Files

Change File Suffix for Data Files

Transforms

Linters

Data Filter Selectors

TypeScript Type Definitions

Removed Features

Change exception case suffix for HTML files

Documentation Moved to Dedicated Pages

Copy Files to Output using Passthrough File Copy

Customize Front Matter Parsing Options

Watch JavaScript Dependencies

Add Your Own Watch Targets

Override Browsersync Server Options

Transforms

Environment Variables

Environment Variables

Setting your own

Via .env file

Via the command line

macOS or Linux (et al)

Windows cmd.exe

Windows Powershell (default in VS Code)

Cross Platform npm scripts

Use Case Ideas

Eleventy Supplied

Disable Colors

Programmatic API

Programmatic API

Write to the file system

Don’t write to the file system

JSON Output

Adding data to JSON output

ndjson Output

Changing the Input and Output Directories

Full Options List

Install Eleventy Globally

Install Eleventy Globally

Data Deep Merge

Data Deep Merge

Using the override: prefix

Markdown

Markdown Options

Default Options

Optional: Set your own library instance

Optional: Amend the Library instance Added in v2.0.0

Add your own plugins

Indented Code Blocks

Why can’t I return markdown from paired shortcodes to use in a markdown file?

Computed Data

Computed Data

Real World Example

Using JavaScript

Using a Template String

Advanced Details

Declaring Your Dependencies

Data Cascade

Data Cascade

Via `.env` file

Using the `override:` prefix

Using the `override:` prefix

`.gitignore`

Advanced `chokidar` Configuration