TypeScriptAdded in v3.0.0

• Related languages: JSX, JavaScript, Custom
• Front matter is not supported in TypeScript files. Use a data export instead.

Configuration

Added in v3.0.0Here we use tsx to process TypeScript files.

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);
			};
		},
	});
}

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

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

Alternatively, you can add eleventyConfig.addTemplateFormats("11ty.ts,11ty.tsx") to your configuration file.

Using a TypeScript Configuration File

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 --formats=11ty.tsx

Community Contributions

• JetBrains: Better 11ty Development with Tooling

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:

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

• JSX
• TypeScript