Skip to content
MDX logo
v1.5.9GitHub logoTwitter logo
GitHub logoTwitter logo


To use MDX with Gatsby, use gatsby-plugin-mdx.

First, scaffold a new Gatsby 2.0 or greater site and install the gatsby-plugin-mdx plugin.

gatsby new gatsby-site
cd gatsby-site
yarn add gatsby-plugin-mdx @mdx-js/mdx@latest @mdx-js/react@latest

Then add gatsby-plugin-mdx to your gatsby-config.js in the plugins section.

module.exports = {
siteMetadata: {
title: `My Ambitious Project`
plugins: [`gatsby-plugin-mdx`]

Finally, add an .mdx file in the src/pages directory. It “Just Works”.

# My first MDX Page
some awesome content

For more documentation on programmatically creating pages with Gatsby, see the Gatsby MDX docs.

Edit this page on GitHub
Create React App