Using MDX With React

Articles & Tutorials

Intro to MDX in Gatsby (alligator.io)
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 (css-tricks.com)
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 (dev.to)
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 (christopherbiscardi.com)
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 (frontarm.com)
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 (auth0.com)
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 (youtube.com)
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 (youtube.com)
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 (youtube.com)
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.

Libraries

@mdx-js/mdx (mdxjs.com)5906
v1.2.2
Aug 09, 2019
JSX in Markdown for ambitious projects.
mdx-deck (jxnblk.com)6695
v3.0.9
Aug 06, 2019
♠️ MDX-based presentation decks
  • Brent Jackson
spectacle (formidable.com)7378
v5.7.0
Jul 31, 2019
A React.js based library for creating sleek presentations.
mdx-deck-code-surfer (codesurfer.js.org)2527
v0.5.5
Jan 22, 2019
React component for scrolling, zooming and highlighting code samples.
  • Rodrigo Pombo