MDX - JSX in Markdown

What

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

Why

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.

How

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

npm init mdx

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 />

• 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.

Conclusion

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

Comments

[Ben Halpern]

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

[Rattanak Chea]

Very cool idea.

[anbuchelva]

oh! mdx being used already.

[K]

There is also a well known email client called mdx xD