Skip to navigation Skip to main content
Eleventy
Eleventy Documentation
Stable
2.0.1
Toggle Menu
Eleventy 5.81s
Gatsby 43.36s

MDXAdded in v3.0.0

Eleventy Short Name File Extension npm Package
mdx .mdx @mdx-js/node-loader
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

Added in v3.0.0MDX provides a Node.js loader (@mdx-js/node-loader on npm). We can add this to our Eleventy configuration file to render *.mdx files.

eleventy.config.js
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.

Community Contributions