hexmora/fluxdown

为流式内容打造的 Markdown 渲染器。

文档站 · 在线体验 · 文档 · English

Fluxdown 让 Markdown 在生成过程中保持可读，适用于 AI 对话、实时写作等内容持续增长的界面。

• 流畅的阅读体验。 逐步展示新文本，让尚未完成的链接、强调和代码保持可读。
• 减少重复计算。 以内容块为单位缓存结果，复用消息中已稳定的部分。
• 熟悉的 Markdown。 支持 GFM 表格、任务列表、删除线、自动链接和代码高亮，也可按需启用公式。
• 灵活的呈现方式。 定制主题、替换组件，或通过插件扩展解析与渲染。
• 框架无关的核心。 直接使用 React 组件，或为自己的界面构建渲染器。

在 React 18 或 19 应用中安装：

pnpm add fluxdown

import { Fluxdown } from "fluxdown";

type MessageProps = {
  text: string;
  isStreaming: boolean;
};

export function Message({ text, isStreaming }: MessageProps) {
  return <Fluxdown text={text} streaming={isStreaming} />;
}

将截至目前收到的完整消息传给 text。生成完成、取消或失败时，将 isStreaming 设为 false。渲染静态内容时可省略 streaming。

如果打包工具没有自动加载样式，请在应用的全局样式入口中添加：

import "fluxdown/styles.css";

更多示例见 React 快速上手。

• 流式内容 — 接入文本流，调整流式效果。
• 样式定制 — 调整主题、排版和布局。
• 插件 — 定制语法、内容和交互。
• Core — 直接处理响应式内容块。
• Stative — 创建和组合状态流。

欢迎报告问题、改进文档或提交 Pull Request。可以通过 Issues 报告缺陷或讨论想法。报告问题时，请尽量提供最小复现示例，帮助我们定位原因。

开发环境和 Pull Request 指南见 CONTRIBUTING.md。安全漏洞请按 SECURITY.md 中的说明私下报告。

感谢所有贡献代码、文档、问题反馈和想法的人。

MIT