MDX

MDX is the Markdown format extended to allows JSX components.

Reflex uses MDX for content. Pages, blocks, posts, and navs are all built using MDX. You can import components, such as blocks, and embed them within your content.

Components

Components can be imported or written inline with your Markdown content.

---
title: A page
---
import { Example } from "package" 
# Heading 1
A paragraph officiis labore excepturi nam.
<Block src="hero" /> 
Another paragraph.
<Button>A button</Button> component.

Styling

Components in MDX files can be styled using style props.

---
title: A page
---
<P color="primary">A paragraph in primary color</P>
<H3 mb="4">A heading with margin bottom</H3>

See the Theme reference for style props values.