- Stable
2.0.1
- Beta
3.0.0-beta.1
- Canary
3.0.0-alpha.18
Toggle Menu
Eleventy
5.81s
Remix
40.14s
MDXPre-release only: v3.0.0-alpha.11
Template Languages:
Eleventy Short Name | File Extension | npm Package |
---|---|---|
mdx |
.mdx |
@mdx-js/node-loader |
- Related languages: Markdown, JSX, Custom
- Front matter is not yet supported in MDX files.
- While Markdown files are preprocessed as Liquid, MDX files are not preprocessed by any other template syntax.
INFO:
MDX requires ESM. 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
Pre-release only: v3.0.0-alpha.11MDX provides a Node.js loader (@mdx-js/node-loader
on npm). We can add this to our Eleventy configuration file to render *.mdx
files.
Filename eleventy.config.js (ESM)
import {renderToStaticMarkup} from 'react-dom/server'
import {register} from 'node:module';
register('@mdx-js/node-loader', import.meta.url);
export default function(eleventyConfig) {
eleventyConfig.addExtension("mdx", {
key: "11ty.js",
compile: () => {
return async function(data) {
let content = await this.defaultRenderer(data);
return renderToStaticMarkup(content);
};
}
});
};
Now run Eleventy and tell it to process mdx
files:
npx @11ty/eleventy --formats=mdx
Alternatively, you can add eleventyConfig.addTemplateFormats("mdx")
to your configuration file.
Example MDX Template
export function Thing() {
return <>World!</>
}
# Hello, <Thing />
The above is rendered as <h1>Hello, World!</h1>
.
Read more on the What is MDX? docs.