JSXAdded in v3.0.0

• Related languages: TypeScript, JavaScript, MDX, Custom
• Front matter is not yet supported in JSX files.

Configuration

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

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

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

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

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

Community Contributions

• eleventy-hast-jsx
• eleventy-plugin-react-ssr
• 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 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:

• JSX
• TypeScript