Using MDX With React

Articles & Tutorials

MDX Embed for Storybook (
Dec 10, 2020
Embed Egghead, Codepen, and Twitter into MDX.
  • Paul Scanlon
How To Build A Blog With Next And MDX (
Sep 09, 2020
In this guide, we will be looking at Next.js, a popular React framework that offers a great developer experience and ships with all of the features you need for production. We will also build a blog, step by step, using Next.js and MDX. Finally, we’ll cover why you would opt for Next.js instead of “vanilla” React and alternatives such as Gatsby.
  • Ibrahima Ndaw
Composing Documents with MDX: Markdown for the Component Era (
Jun 24, 2020
Build React UI components and MDX content components to compose and style a markdown document. Then, publish all components with Bit.
  • Eden Ella
Working With MDX Custom Elements and Shortcodes (
May 07, 2020
MDX is a killer feature for things like blogs, slide decks and component documentation. It allows you to write Markdown without worrying about HTML elements, their formatting and placement while sprinkling in the magic of custom React components when necessary.
  • Agney Menon
Improving My Next.js MDX Blog (
Mar 29, 2020
I revamped my personal site, adding a variety of improvements for the ideal Next.js + MDX blogging experience.
  • Lee Robinson
ASTs, Markdown and MDX (
Feb 27, 2020
Markdown for documents, React for interaction, MDX for both! But how do Markdown and MDX arrive at HTML and JSX? The answer is Abstract Syntax Trees.
Rich docs with Storybook MDX (
Dec 12, 2019
Components & documentation in harmony at last.
  • Michael Shilman
Build a coding blog from scratch with Gatsby and MDX (
Oct 31, 2019
You’re going to build a developer blog with MDX support (for some React components in Markdown goodness), so you will be able to add your own React components into your Markdown posts.
  • Scott Spence
Intro to MDX in Gatsby (
Aug 15, 2019
In this article we’ll explore the basics of MDX with Gatsby, including some introductory techniques to help you start using it right away.
  • Daniel Stout
Front-End Documentation, Style Guides and the Rise of MDX (
May 23, 2019
This article is a broad overview of the tools available for writing documentation and for building style guides. Not all the tools listed here make use of MDX but it’s increasingly being incorporated into documentation tooling.
  • Ollie Williams
Convert the Gatsby default starter blog to use MDX (
Apr 11, 2019
In this guide we're going to cover converting the Gatsby default blog starter to use MDX.
  • Scott Spence
Accessing Props in MDX (
Jan 19, 2019
When writing MDX, sometimes you want to display more dynamic content than you otherwise would be able to.
  • Chris Biscardi
Using MDX with create-react-app 2 (
Jan 16, 2019
Learn how to get the succinct syntax of Markdown, the power of JSX, and all with the simplicity of create-react-app 2.
Building Ambitious Apps with MDX (
Oct 25, 2018
Learn how MDX works and create a blazing fast app in no time.
  • Prosper Otemuyiwa

Video Guides & Talks

Design systems and MDX in Gatsby (
Aug 16, 2019
Creating design systems with great documentation and examples can be a pain. MDX makes it far less painful — on this episode, Kathleen McMahon joins to teach us how to create excellent documentation for a design system using MDX and Gatsby.
  • Jason Lengstorf
  • Kathleen McMahon
What is MDX (
Aug 06, 2018
I've recently taking a big liking to MDX: A JSX in Markdown loader, parser, and renderer for ambitious projects. It combines the readability of Markdown with the expressivity of JSX. The best of both worlds.
ZEIT Day 2018 - Keynote (
May 03, 2018
In this keynote, of our third conference in San Francisco, we are talking about what we have accomplished so far and what the future of cloud computing holds. We also announced Next.js 6 and MDX.


@mdx-js/mdx (
Aug 09, 2019
JSX in Markdown for ambitious projects.
mdx-deck (
Aug 06, 2019
♠️ MDX-based presentation decks
  • Brent Jackson
spectacle (
Jul 31, 2019
A React.js based library for creating sleek presentations.
mdx-deck-code-surfer (
Jan 22, 2019
React component for scrolling, zooming and highlighting code samples.
  • Rodrigo Pombo