Skip to navigation Skip to main content
Blog
Eleventy, 2025 in Review
Versions
Stable
3.1.2
Canary
4.0.0-alpha.6

TypeScriptAdded in v3.0.0

Template Languages:
Eleventy Short Name File Extension npm Package
11ty.ts .11ty.ts tsx
11ty.tsx .11ty.tsx tsx

Configuration

Added in v3.0.0Here we use Node.js’ type stripping feature (available in Node 22.6+) to process *.11ty.ts TypeScript files.

eleventy.config.js
export default function (eleventyConfig) {
	eleventyConfig.addExtension("11ty.ts", {
		key: "11ty.js",
	});

	// Add to --formats via Configuration
	// or via CLI: --formats=11ty.ts
	eleventyConfig.addTemplateFormats("11ty.ts");
}

You can optionally use an Array ["11ty.ts", "11ty.cts", "11ty.mts"] instead of "11ty.ts" above (in both places) to add additional file extensions supported in Node.js.

Or use tsx (Node.js)

Added in v3.0.0Alternatively, you can use tsx to process .11ty.jsx, .11ty.ts, and .11ty.tsx files.

This approach requires ESM (read more at Issue #3304). This means your project package.json must contain "type": "module" or your configuration file must use the .mjs file extension, e.g. eleventy.config.mjs. Read more about CommonJS versus ESM.
eleventy.config.js
import "tsx/esm";
import { renderToStaticMarkup } from "react-dom/server";

export default function (eleventyConfig) {
	// We can add support for JSX too, at the same time:
	eleventyConfig.addExtension(["11ty.jsx", "11ty.ts", "11ty.tsx"], {
		key: "11ty.js",
		compile: function () {
			return async function (data) {
				let content = await this.defaultRenderer(data);
				return renderToStaticMarkup(content);
			};
		},
	});

	// Add to --formats via Configuration
	// or via CLI: --formats=11ty.jsx,11ty.ts,11ty.tsx
	eleventyConfig.addTemplateFormats(["11ty.jsx", "11ty.ts", "11ty.tsx"]);
}

Now Eleventy will find and process **/*.11ty.{jsx,ts,tsx} files.

Using a TypeScript Configuration File

Added in v3.0.0Here we use Node.js’ type stripping feature (available in Node 22.6+) to use a TypeScript configuration file.

npx @11ty/eleventy --config=eleventy.config.ts

Or use tsx (Node.js)

You can use tsx to process your configuration file too, just run it directly like so:

npx tsx ./node_modules/.bin/eleventy --config=eleventy.config.ts

Community Contributions

Using esbuild-register

If you’d like an approach that works with CommonJS and Eleventy 2.0, you can use esbuild-register with Eleventy (using the same conventions as 11ty.js templates). Check out this gist from @pspeter3 on GitHub or this GitHub comment from @danielrob.

Your config file might look like this:

Filename eleventy.config.js (CommonJS)
const { register } = require("esbuild-register/dist/node");

register();

module.exports = function(eleventyConfig) {
	// We can add support for JSX too, at the same time:
	eleventyConfig.addExtension(["11ty.jsx", "11ty.ts", "11ty.tsx"], {
		key: "11ty.js",
	});
};

Now run Eleventy and tell it to process 11ty.ts and 11ty.tsx files:

npx @11ty/eleventy --formats=11ty.ts,11ty.tsx

Other pages in JavaScript