x0/docs/MDX.md

Using MDX

x0 also supports MDX format out of the box. MDX allows you to mix markdown syntax with JSX to render React components.

---
title: MDX Example
---
import { Box } from 'rebass'

# Hello

<Box p={3} bg='tomato'>
  Beep
</Box>

MDX Live Editor

Code blocks declared as .mdx will render a live MDX editor.

# Hello, LiveEditor

<div style={{ padding: '20px', backgroundColor: 'tomato' }}>
  <h4>Beep</h4>
</div>