即时编辑和预览 MDX

专为 Markdown 和 MDX 风格文档准备的在线工作区。
左侧编写，右侧预览，草稿自动保存在浏览器中。

无需登录，文档内容只保存在你的浏览器中。

MDX Playground

更改会保存在浏览器本地，不会离开你的设备。

---
title: 你好，MDX
description: 一份实时渲染的示例文档
---

# 你好，MDX Viewer 👋

在左侧编写 **Markdown** 和 MDX 风格内容，右侧会即时显示结果。

## 这里可以做什么

- 编写标题、列表和链接
- 展示表格、引用和代码块
- 自动在浏览器本地保存草稿
- 复制源码或下载 .mdx 文件

> 你的草稿不会上传到服务器。

```tsx
export function Greeting({ name }: { name: string }) {
  return <strong>你好，{name}！</strong>;
}
```

| 功能 | 状态 |
| --- | --- |
| 实时预览 | ✅ |
| 本地保存 | ✅ |
| 下载 MDX | ✅ |

title: 你好，MDX description: 一份实时渲染的示例文档

你好，MDX Viewer 👋

在左侧编写 Markdown 和 MDX 风格内容，右侧会即时显示结果。

这里可以做什么

编写标题、列表和链接
展示表格、引用和代码块
自动在浏览器本地保存草稿
复制源码或下载 .mdx 文件

你的草稿不会上传到服务器。

export function Greeting({ name }: { name: string }) {
  return <strong>你好，{name}！</strong>;
}

功能	状态
实时预览	✅
本地保存	✅
下载 MDX	✅

---
title: 你好，MDX
description: 一份实时渲染的示例文档
---

# 你好，MDX Viewer 👋

在左侧编写 **Markdown** 和 MDX 风格内容，右侧会即时显示结果。

## 这里可以做什么

- 编写标题、列表和链接
- 展示表格、引用和代码块
- 自动在浏览器本地保存草稿
- 复制源码或下载 .mdx 文件

> 你的草稿不会上传到服务器。

```tsx
export function Greeting({ name }: { name: string }) {
  return <strong>你好，{name}！</strong>;
}
```

| 功能 | 状态 |
| --- | --- |
| 实时预览 | ✅ |
| 本地保存 | ✅ |
| 下载 MDX | ✅ |

为保证安全，预览会渲染文档标记，但不会执行任意 JavaScript 或导入的 React 组件。

专注于 MDX 写作的工作区

适合开发者和内容作者编写文档、README、技术文章以及 MDX 风格内容。

实时编辑
使用熟悉的 Markdown 工具栏编写内容，格式化结果即时呈现。
本地保存
草稿自动保存在浏览器本地，不会上传到服务器。
随时导出
一键复制源码或下载可直接使用的 .mdx 文件。

为什么选择 MDX Viewer

为写作而设计，无需配置

打开页面就能开始，不需要创建项目，也没有登录门槛。

桌面端使用左右分栏，移动端可在编辑器与预览之间切换。

快速预览 MDX 所需的完整能力

面向日常 Markdown 与 MDX 草稿的实用工具。

实时预览

即时呈现标题、链接、列表、引用、表格和代码块。

自动保存

再次打开页面时，可以继续编辑同一浏览器中保存的草稿。

格式工具栏

无需记住所有 Markdown 标记，也能快速完成常用格式。

复制源码

一键将完整文档复制到剪贴板。

下载 MDX

将当前内容导出为便携的 .mdx 文件。

示例文档

随时恢复示例内容，快速体验支持的常用语法。

常见问题

关于 MDX Viewer 的常见问题

把重要细节说清楚。

什么是 MDX？

MDX 是一种将 Markdown 内容与 JSX 结合的格式，常用于文档、博客和 React 内容网站。

会执行 React 组件吗？

安全预览模式不会执行。它会展示文档结构，但不会运行任意 JavaScript 或来自不可信输入的组件。

我的文档会上传吗？

不会。编辑、预览和自动保存都在你的浏览器本地完成。

可以下载编辑结果吗？

可以。点击下载即可保存为 document.mdx，也可以直接复制完整源码。

开始编写你的下一份 MDX 文档

无需注册和配置，现在就可以开始。