Skip to navigation Skip to main content
Blog
The Eleventy Community Survey (2025)
Versions
Stable
3.1.2
Canary
4.0.0-alpha.6

JSXAdded in v3.0.0

Template Languages:
Eleventy Short Name File Extension npm Package
11ty.jsx .11ty.jsx tsx
11ty.tsx .11ty.tsx tsx
JSX 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 JSX files. If you’re looking for TypeScript only, there are simpler methods in Node.js.

eleventy.config.js
import "tsx/esm";
import { renderToStaticMarkup } from "react-dom/server";

export default function (eleventyConfig) {
	// We can add support for TypeScript 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.

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 TypeScript 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.jsx and 11ty.tsx files:

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

Other pages in JavaScript