MDX
CSS
Config
Write and preview MDX (Markdown + JSX) in real-time
MDX Editor is a powerful tool for content creators, React developers, and documentation writers who want to combine the simplicity of Markdown with the power of JSX components. This free online MDX editor allows you to write and preview MDX content in real-time, making it perfect for crafting rich, interactive documentation.
MDX is a file format that combines Markdown with JSX (the syntax extension used by React). It allows you to use components directly within your Markdown content, enabling interactive and dynamic content creation while maintaining the simplicity of Markdown syntax.
# This is MDX
Regular markdown **bold** and *italic* text works as expected.
{/* JSX comments work too */}
## Interactive components in Markdown!
<Button onClick={() => alert('Hello MDX!')}>
Click me
</Button>
- You can use components anywhere in your Markdown
- You can import and use custom components
- You can export variables and functions# Using Highlight Component
This paragraph demonstrates basic Markdown text.
<Highlight color="blue">This text will be highlighted in blue with white text</Highlight>
<Highlight color="#ffcc00">This text will be highlighted in yellow</Highlight>
- List item one
- List item two with **bold text**export const myData = [10, 20, 30, 40];
# Dynamic Data Visualization
Below is a chart generated from the myData array:
<Chart data={myData} color="#4f46e5" />
The total value of myData is {myData.reduce((sum, val) => sum + val, 0)}.
You can use any JavaScript expression inside curly braces.# Using Component Composition
<Tabs>
<TabItem label="What is MDX?">
MDX lets you **write JSX directly in your Markdown documents**.
* You can import React components
* You can export metadata and variables
* You can use JSX alongside Markdown syntax
</TabItem>
<TabItem label="Using Components">
Components can be nested within each other.
<Alert type="info">
This is an info alert inside a tab component!
</Alert>
<Alert type="warning">
This is a warning alert with **Markdown support**
</Alert>
</TabItem>
</Tabs>
Try clicking the button below:
<Button>
Interactive Button
</Button>MDX was created to solve the problem of writing rich, interactive content that combines the simplicity of Markdown with the power of components. It's widely used in documentation sites, blogs, and content-rich applications, especially in the React ecosystem.
With MDX, content creators can focus on writing while still having the power to embed interactive elements, charts, diagrams, and custom components directly in their text. This makes it ideal for technical documentation, educational content, and any scenario where you want to combine narrative text with interactive elements.