Learn what MDX is, and how you can use it when creating content for your Gatsby site.
Markdown defines a plain text syntax for HTML elements such as
a, but still supports inline HTML. An example Markdown document follows.
MDX takes this one step further, and makes it possible to use JSX in your Markdown documents. Try making the
figure element into a
Now you can import this component into your Markdown document.
If you’re creating a Gatsby site from scratch, you can use
npm init gatsby to kick off a new site with MDX. At the question “Would you like to install additional features with other plugins?” choose the option “Add Markdown and MDX support”.
- MDX official site
- Adding Components to Markdown with MDX from the Gatsby docs
- Introducing JSX from the React documentation