- Stable
3.0.0
Toggle Menu
Eleventy
5.81s
Remix
40.14s
JSXAdded in v3.0.0
Template Languages:
Eleventy Short Name | File Extension | npm Package |
---|---|---|
11ty.jsx |
.11ty.jsx |
tsx |
11ty.tsx |
.11ty.tsx |
tsx |
- Related languages: TypeScript, JavaScript, MDX, Custom
- Front matter is not yet supported in JSX files.
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