Writing MDX

MDX is an authorable 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.

Working with components

For now, you only need to know that with MDX you can use your components inside markdown. But how? Let's take a look at how we can improve our .mdx file created previously by importing and using a component inside it.

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.

---
name: Hello world
---

import { Button } from './Button'

# Hello world

Hello, I'm still a mdx file, but now I have a button component !

<Button onClick={() => { alert("You clicked me"); }}>Click me</Button>

And, if you do have a Button component to import, you'll see something like this:

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.

Docz comes with some helper components that will help you document your components faster, these are covered in Built-in components.