DEV Community


Posted on

MDX - JSX in Markdown


There is a new markup-language on the block, called MDX, which is essentially Markdown sprinkeled with JSX elements and JavaScript imports.


If you read my article about Storybook, you know that can be nice to be able to run components on its own, without being embedded into an huge application. For example when you need to check if everythign still works or if you need examples for your documentation.

Also, some applications are mainly text-heavy but need some more complex parts, like charts or animations, so writing them with Markdown would be a bit of a pain. For example presentation slides.


To get up and running quickly, simply use this command:

npm init mdx
Enter fullscreen mode Exit fullscreen mode

This will setup a Next.js project pre-configured for MDX. Then you can start to write your MDX documents.

Here a simple example:

import Graph from './components/graph'

## My Heading

A nice paragraph that tells people about some data, followed by a `<Graph>` 
component that visualizes this data.

<Graph />
Enter fullscreen mode Exit fullscreen mode
  • The import statement from JavaScript
  • Heading and paragraph from Markdown
  • JSX element from React

The nice thing is everything is a component, so you can even import other MDX and even Markdown files.


MDX is a really interesting approach to make Markdown more flexible. Let's see what will be done with it in the future. :)

Top comments (4)

ben profile image
Ben Halpern

This is very interesting. I could see us wanting to incorporate this in some way for

rattanakchea profile image
Rattanak Chea

Very cool idea.

anbuchelva profile image

oh! mdx being used already.

kayis profile image

There is also a well known email client called mdx xD