过去两年，大模型以周为单位迭代，AI 应用以日为单位上线。
对话、编程、文档、报表、代码 review……所有场景都在做同一件事——让机器“边想边说”。
传统 Markdown 渲染器“等全文、再渲染”的模式，在逐字蹦出的 Token 面前彻底失效；
流式渲染成了新一代 AI 产品的“刚需”。
Ant Design X 给出答案：XMarkdown
Ant Design 团队把为「通义千问、钉钉 AI、阿里云智能客服」打磨多年的内核抽离出来，做成零依赖、开箱即用的 React 组件：
优势一览
-
⚡ 真·流式
基于分片+缓存补丁，新 Token 只更新“最后一行”，60 fps不闪屏 -
🔌 插件生态 KaTeX公式、Mermaid图表、highlight代码块全部内置，一行引入 -
🎨 极致可定制
任意Markdown元素可替换成自定义React组件；主题变量一键换肤 -
🔐 默认安全
无dangerouslySetInnerHTML，XSS 攻击面直接清零 -
📦 轻量
压缩后< 40 kB，CommonMark+GFM 100%兼容
2 分钟跑起来
npm i @ant-design/x-markdown
import { XMarkdown } from'@ant-design/x-markdown'
function App() {
const [chunk, setChunk] = useState('')
// 逐字接收 AI 输出
useEffect(() => {
fetchEventSource('/api/ai-stream', {
onmessage(ev) { setChunk(c => c + ev.data) }
})
}, [])
return<XMarkdown content={chunk} plugins={[Latex, Mermaid, Highlight]} />
}
✅ 支持 Next.js、Vite、Umi、Rspack 等任意 React 技术栈。
Vue 阵营怎么办？Element Plus X 同步跟进！
Ant Design X 目前仅支持 React，但Vue 用户无需眼红。
Element Plus X 推出同名组件 XMarkdown，API 与生态完全对齐 Vue 习惯：
优势再升级
-
高亮引擎： Shiki（140+ 主题，可动态切换） -
代码块： 折叠、复制、全屏、放大、下载、主题换肤全套 Toolbar -
Mermaid： 渐进式渲染+工具栏（缩放、重置、下载） -
公式： KaTeX行内 / 块级，增量排版 -
自定义标签：可在 Markdown里直接写<my-chart :data="xxx"/>并渲染成 Vue 组件 -
安全： HTML默认不解析，预览可选 安全模式
2 分钟跑起来
npm i element-plus-x
<template>
<x-markdown :markdown="stream" :themes="{ light: 'github-light', dark: 'dracula' }" />
</template>
<script setup>
import { ref } from 'vue'
import { XMarkdown } from 'element-plus-x'
const stream = ref('')
const evtSource = new EventSource('/api/ai-stream')
evtSource.onmessage = e => stream.value += e.data
</script>
✅ 兼容 Nuxt、Vite、Webpack、Rspack、纯 CDN 引入。
还有惊喜：markstream-vue —— 更轻量的第三选择
如果你只想“最小包 + 最纯流式”，尤雨溪亲自推荐的 markstream-vue 值得一看：
-
无 UI 框架依赖，仅 807 kB -
Monaco Editor 同款增量算法，大代码块 60 fps -
Mermaid/KaTeX均做 Token 级切片，语法一够就渲染 -
支持在 Markdown里直接嵌入 任意 Vue 组件 -
零配置， <MarkdownRenderer :stream="chunk" />即用
1 分钟跑起来
npm i markstream-vue
<template>
<MarkdownRenderer :stream="chunk" />
</template>
<script setup>
import { ref } from 'vue'
import MarkdownRenderer from 'markstream-vue'
const chunk = ref('')
fetchEventSource('/api/ai-stream', {
onmessage(e) { chunk.value += e.data }
})
</script>
如何选型？一句话记住
-
React 项目 → 直接用 Ant Design X XMarkdown，插件全、主题省心 -
Vue 项目 → Element Plus X XMarkdown，Shiki 高亮、工具栏一条龙 -
Vue 但想极致轻量 → markstream-vue，807 kB 无依赖，纯流式更敏捷
