MDXAdded in v3.0.0

• 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.

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.

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

• eleventy-plugin-mdx