MDX combines the simplicity of markdown with the ability to import and use React components inline.
Write markdown like you normally would.
# Hello
Import and use React components inline.
import { Box } from 'grid-styled' # Hello <Box p={3} bg='tomato'> This is a React component! </Box>
MDX uses the ES export syntax to communicate with its parent. mdx-go makes use of this to customize layouts, routing, and set other configuration options.
For example, a custom Root component that wraps the entire app can be added by exporting Root
from your index.mdx
file.
export const Root = props => <div style={{ color: 'tomato' }}> {props.children} </div> # Tomato
Fenced code blocks can be automatically converted to live code examples using react-live. To enable this feature, use either the ComponentProvider or the StyleProvider component in a custom Root component.
When LiveCode is enabled, the following code block with the .jsx
language attribute, will be converted into a live example, as seen below.
```.jsx <h3>Edit me</h3> ```
<h3>Edit me</h3>
To learn more about using MDX, see the MDX docs.