Simon-He95/markstream-vue

Multi-framework streaming Markdown renderers for AI apps: Vue/Nuxt, React/Next.js, Svelte, and Angular, with Mermaid, KaTeX, Shiki, Monaco, safe HTML, and low-jitter updates.

它解决了什么问题

许多标准的 Markdown 渲染器是为静态文档设计的，在渲染快速变化的内容（例如聊天界面中的 AI 生成的 token 流）时，会导致视觉闪烁或性能问题。markstream-vue 提供一种稳定、无闪烁的方式来渲染仍在从 LLM 流式输出的 Markdown。

它如何工作

它作为 Vue 3 的专用渲染器（还有 React、Svelte、Angular 的兄弟包）来处理不完整的 Markdown 状态。提供两种主要渲染模式：长文档的虚拟窗口以及“打字”效果的增量批处理。它可以处理原始 Markdown 字符串或预解析的节点，并支持对 Mermaid 图表、KaTeX 数学等大型元素的渐进式渲染。

适用人群

构建 AI 聊天 UI、基于 SSE（Server‑Sent Events）或 WebSocket 的流式接口，以及使用 Vue、Nuxt 或 VitePress 的文档站点的开发者。

亮点

  • AI 优化流式：专为在 LLM token 流期间最小化闪烁并保持可预测的内存使用而设计。
  • 多框架支持：虽然此仓库针对 Vue，但它属于支持 React、Svelte 与 Angular 系列渲染器的一部分。
  • 渐进式渲染：支持流式代码块（通过 Monaco/Shiki）和图表（通过 Mermaid），内容增长时实时更新。
  • 丰富集成：内置对 KaTeX 数学和自定义标签（如 thinking 块）的支持。
  • 灵活模式：包括 chat 模式用于平稳节奏，和 docs 模式用于丰富的文档布局。