Skip to navigation Skip to main content
Eleventy
Eleventy Documentation
Stable
3.0.0
Toggle Menu
Eleventy 5.81s
Gatsby 43.36s

TypeScriptAdded in v3.0.0

Eleventy Short Name File Extension npm Package
11ty.ts .11ty.ts tsx
11ty.tsx .11ty.tsx tsx
INFO:
TypeScript requires ESM (when used with Eleventy, 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.

Configuration

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

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

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

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: