Writing MDX#

MDX is a format that lets you seamlessly use JSX in your Markdown documents. You can import components, like interactive charts and embed them within your content. This makes writing long-form content with components a blast.

More details about MDX in the Official website.

An example react component inside markdown#

Below there is an example of a graphiql component directly imported inside the markdown

To show that component i just needed to write the following mdx

md
1
import { MiniGraphiQL } from 'mini-graphiql'
2
import { Box } from '@chakra-ui/react'
3
4
export const query1 = \`
5
{
6
continents {
7
code
8
name
9
}
10
}
11
\`
12
13
<Box my='40px' borderRadius='lg' overflow='hidden' shadow='xl'>
14
    <MiniGraphiQL url='https://countries.trevorblades.com' query={query1} />
15
</Box>

Importing relative components#

The example below assumes we have an exported component named Button in a file named Button.jsx/Button.tsx located in the same folder as the .mdx file we are editing.

mdx
1
---
2
name: Hello world
3
---
4
5
import { Button } from './Button'
6
7
# Hello world
8
9
Hello, I'm still a mdx file, but now I have a button component !
10
11
<Button
12
    onClick={() => {
13
        alert('You clicked me')
14
    }}
15
>
16
    Click me
17
</Button>

With MDX you can mix React Components or html-elements with regular markdown allowing you to either document your own components or create helper components that make documentation easier.