Gatsby+MDX

Bringing MDX to Gatsby for ambitious projects

Get Started

What is Gatsby?

  • Modern web tech without the headache
  • Bring your own data
  • Scale to the entire Internet
  • Future Proof
  • Static Progressive Web Apps
  • Speed past the competition

What is MDX?

MDX is markdown for the component era. It lets you write JSX embedded inside markdown. That’s a great combination because it allows you to use markdown’s often terse syntax (such as # heading) for the little things and JSX for more advanced components.

❤️Powerful: MDX blends markdown and JSX syntax to fit perfectly in React/JSX-based projects.

💻 Everything is a component: Use existing components inside your MDX and import other MDX files as plain components.

🔧 Customizable: Decide which component is rendered for each markdown element ({ h1: MyHeading }).

📚 Markdown-based: The simplicity and elegance of markdown remains, you interleave JSX only when you want to.

🔥 Blazingly blazing fast: MDX has no runtime, all compilation occurs during the build stage.

What Can I Do

With gatsby-mdx, you can:

  • Render Markdown content using custom React components
  • Write entire pages in markdown and JSX by placing a file in src/pages
  • Use regular markdown code blocks when authoring, but display them as interactive playgrounds when rendering
  • Use React Components as a more powerful version of shortcodes
  • Use gatsby plugins to optimize images using an advanced "blur-up" technique popularized by Medium