Gatsby + MDX

“It’s extremely useful for using design system components to render markdown and weaving interactive components in with existing markdown.”

Markdown for the component era

MDX is an authorable format that lets you seamlessly write JSX in your Markdown documents. You can import components, such as interactive charts or alerts, and embed them within your content.

This makes writing long-form content with components a blast.

Below is an example of JSX embedded in Markdown.

<div style={{ padding: '20px', backgroundColor: 'aliceblue' }}>
  <h3>This is JSX in Markdown</h3>

This is JSX in Markdown

import { Link } from 'gatsby';

<Link to="/">Internal link back to main page</Link>;

Internal link back to main page


Before MDX, some of the benefits of writing Markdown were lost when integrating with JSX. Implementations were often template string-based which required lots of escaping and cumbersome syntax.

MDX seeks to make writing with Markdown and JSX simpler while being more expressive. Writing is fun again when you combine components, that can even be dynamic or load data, with the simplicity of Markdown for long-form content.

Written by Peter Parker, a talented young freelance photographer and aspiring scientist imbued with superhuman abilities. Follow him on Twitter but don't stalk him.