Skip to navigation Skip to main content
Eleventy
Eleventy Documentation
Stable
3.0.0
Toggle Menu
Eleventy 5.81s
Remix 40.14s

JSXAdded in v3.0.0

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

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

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

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

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: