DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,673 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
K (he/him)
K (he/him)

Posted on

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

Conclusion

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)

Collapse
 
ben profile image
Ben Halpern

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

Collapse
 
rattanakchea profile image
Rattanak Chea

Very cool idea.

Collapse
 
anbuchelva profile image
anbuchelva

oh! mdx being used already.

Collapse
 
kayis profile image
K (he/him) Author

There is also a well known email client called mdx xD

DEV has this feature:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. πŸ›