Skip to navigation Skip to main content
11ty Logo Sustainability Fundraising
Eleventy
Eleventy Documentation
Stable
2.0.1
Canary
3.0.0-alpha.13
Toggle Menu
Eleventy 5.81s
Remix 40.14s

JSXPre-release only: v3.0.0-alpha.11

Eleventy Short Name File Extension npm Package
11ty.jsx .11ty.jsx tsx
11ty.tsx .11ty.tsx tsx
INFO:
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 Jump to heading

Pre-release only: v3.0.0-alpha.11Here we use tsx to process JSX files.

Filename eleventy.config.js (ESM)
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 Jump to heading

Using esbuild-register Jump to heading

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: