markstream-vue

Vue/Nuxt streaming Markdown renderer for AI chat, LLM token streams, SSE/WebSocket output, incomplete Markdown, long documents, Mermaid, KaTeX, and stream-diffs powered code blocks.
636,231 3,040
Install
npm install markstream-vue
Latest Version:2.0.21
Vue:3
License:MIT
Last Updated:Oct 27, 2026
Links: GitHub  ·  npm
Maintainer: simon_he

Markstream

面向 AI 应用的多框架流式 Markdown 渲染器家族 — 支持 Vue、React、Octane、Svelte、Angular、Nuxt 和 Next.js。

Markstream 专为在用户眼前持续变化的 Markdown 场景而构建:LLM token 流、SSE/WebSocket 输出、AI 聊天消息、未闭合 Markdown 中间态、长文档、渐进式 Mermaid 图表、KaTeX 数学公式、流式代码块以及安全的组件化渲染。

Vue 3、Nuxt 和 VitePress 项目优先使用 markstream-vue;React、Octane、Svelte、Angular、Vue 2 项目使用对应 sibling package。普通 AI 聊天可以直接传不断累积的 content 字符串,只有外层已经负责解析、batch 或 worker AST 时才需要 nodes 路径。

English Docs Playground Test page

Vue 包:

markstream-vue npm version NPM downloads Bundle size

其它框架包:

markstream-react npm version markstream-svelte npm version markstream-angular npm version markstream-vue2 npm version

Release Discussions Discord Support Security CI License

包矩阵

如果你还在选择框架包,先看 框架总览。

包 框架 安装 文档
markstream-vue Vue 3 / Nuxt / VitePress pnpm add markstream-vue 框架总览 · Vue 指南 · Nuxt 指南
markstream-react React / Next.js / Remix pnpm add markstream-react React 指南 · Next.js 指南
markstream-octane Octane pnpm add markstream-octane octane 包使用指南 · 本地 Playground
markstream-svelte Svelte 5 pnpm add markstream-svelte svelte@^5 Svelte 指南
markstream-angular Angular standalone pnpm add markstream-angular Angular 指南
markstream-vue2 Vue 2.6 / 2.7 pnpm add markstream-vue2 Vue 2 指南 · 快速开始
stream-markdown-parser 任意 JS/TS 应用 pnpm add stream-markdown-parser 解析器指南
markstream-core 框架无关 pnpm add markstream-core Core 包

我该用哪个包?

  • Vue 3 / Nuxt / VitePress → markstream-vue
  • React / Next.js / Remix → markstream-react
  • Octane → markstream-octane
  • Svelte 5 → markstream-svelte
  • Angular standalone → markstream-angular
  • Vue 2.6 / 2.7 → markstream-vue2
  • 仅需框架无关的解析 → stream-markdown-parser
  • 流式控制器工具 → markstream-core

稳定性

markstream-vue 2.x 已稳定并发布在 npm latest 标签。维护中的 1.x 仍可通过 markstream-vue@1 或 legacy 标签安装。2.0 移除了 Monaco 和 stream-markdown 代码块 runtime;需要增强代码块时再安装可选 peer stream-diffs。升级前请阅读 从 1.x 迁移到 2.0。

稳定面包括:MarkdownRender、流式内容渲染、预解析节点渲染、安全 HTML 策略、可选 Mermaid / KaTeX / D2 / Infographic 集成、增强代码块、虚拟滚动协调、CSS 导出、worker client 子路径以及 Vite / Nuxt / VitePress 的 SSR 导入。

跨框架渲染器(markstream-react、markstream-octane、markstream-svelte、markstream-angular、markstream-vue2)已可用并积极开发中。请查看各包文档了解 API 成熟度、框架支持和已知限制。

📖 框架总览、详细文档、API、示例和高级用法: https://markstream.simonhe.me/frameworks

速览

  • 为 流式 Markdown(AI/聊天/SSE)打造,目标是减少闪烁并保持内存可预期。
  • 双渲染模式:长文档虚拟化窗口,或“打字机”式增量批次。
  • 渐进式图表(Mermaid)与 流式代码块(stream-diffs),跟上 diff/增量输出。
  • 同时支持 Markdown 字符串或预解析节点,可在 Vue、React、Octane、Svelte 和 Angular 中嵌入 自定义框架组件。
  • TypeScript 优先,开箱默认即可上线(导入 CSS 即用)。

按场景选择入口

如果你现在想做的是... 先看这里 然后看
先把第一段渲染跑起来 框架总览 快速上手
接到文档站或 VitePress 主题里 文档站与 VitePress 集成 自定义标签与高级组件
做 AI 聊天界面或 SSE 流式输出 AI 聊天与流式输出 性能
替换一个内置节点渲染器 覆盖内置组件 渲染器与节点组件
增加 thinking 这类可信标签 自定义标签与高级组件 API 参考
接入坏了但还不知道原因 按症状排查 排查问题

🚀 立即试用

框架 Playground
Vue 3 https://markstream-vue.simonhe.me/
React https://markstream-react.pages.dev/
Octane pnpm play:octane
Svelte https://markstream-svelte.pages.dev/
Angular https://markstream-angular.pages.dev/
Nuxt https://markstream-nuxt.pages.dev/
Vue 2 https://markstream-vue2.pages.dev/

仓库内的 skills 和 prompts

如果你想直接拿到 AI 资产,而不是先克隆仓库:

npx skills add Simon-He95/markstream-vue

推荐这样理解:

  • npx skills add Simon-He95/markstream-vue 是最推荐的安装方式,因为它会直接读取 GitHub 仓库里的 .agents/skills
  • 升级现有 Markstream 1.x 应用到 2.0 时,使用内置的 markstream-migration skill
  • markstream-vue@1.0 不发布 CLI bin;pnpm skills:list、pnpm prompts:list 这类脚本只面向克隆仓库后的维护者
  • prompts 继续保留在仓库的 prompts/ 目录下,供直接复制或后续拆成独立包

npx skills add 也支持这些来源:

# 完整 GitHub URL
npx skills add https://github.com/Simon-He95/markstream-vue

# 仓库里的单个 skill 直链
npx skills add https://github.com/Simon-He95/markstream-vue/tree/main/.agents/skills/markstream-install

# 任意 git URL
npx skills add git@github.com:Simon-He95/markstream-vue.git

💬 社区与支持

  • Discussions:https://github.com/Simon-He95/markstream-vue/discussions
  • Discord:https://discord.gg/vkzdkjeRCW
  • Issues:请使用模板并附上复现链接(https://markstream-vue.simonhe.me/test)

测试页内置编辑器 + 实时预览,并提供“生成分享链接”功能(过长内容会回退为直接打开或预填 GitHub Issue)。

支持项目

如果 markstream-vue 对你的工作有帮助,欢迎通过 GitHub Sponsors 或下面的收款码支持项目的持续维护。

在 GitHub 上赞助

支付宝 微信收款
支付宝收款码 微信收款码

⚡ 快速上手

Vue / Nuxt

2.x 稳定版已发布在 npm latest。基础 Markdown 只需要安装主包:

pnpm add markstream-vue

需要增强代码块和 diff 时再安装 stream-diffs。从 1.x 升级前请阅读 2.0 迁移指南;如需继续锁定维护中的 1.x,请显式使用 markstream-vue@1。

pnpm add markstream-vue@1
<script setup>
import MarkdownRender from 'markstream-vue'
import 'markstream-vue/index.css'
</script>

<template>
  <MarkdownRender :content="content" />
</template>

React / Next.js

pnpm add markstream-react
import MarkdownRender from 'markstream-react'
import 'markstream-react/index.css'

export function Message({ content, isDone }: { content: string, isDone: boolean }) {
  return <MarkdownRender content={content} final={isDone} fade={false} />
}

Next.js 的实时 SSE/WebSocket 区域用 root markstream-react 放在 'use client' 组件里;SSR-first 或 server-only Markdown 看 Next.js 指南。

Octane

pnpm add markstream-octane octane
import { NodeRenderer } from 'markstream-octane'
import 'markstream-octane/index.css'

export function Message(props: { content: string, isDone: boolean }) {
  return <NodeRenderer content={props.content} final={props.isDone} />
}

请按包使用指南在 Vite 中启用 octane/compiler/vite 并配置 .tsrx。发布包已经包含编译后的 client/server 入口,应用源码仍按正常 Octane 流程编译。

Svelte 5

pnpm add markstream-svelte svelte@^5
<script lang="ts">
  import MarkdownRender from 'markstream-svelte'
  import 'markstream-svelte/index.css'

  let { content = '# Hello from markstream-svelte' }: { content?: string } = $props()
</script>

<MarkdownRender {content} />

Angular

pnpm add markstream-angular
import { Component, signal } from '@angular/core'
import { bootstrapApplication } from '@angular/platform-browser'
import { MarkstreamAngularComponent } from 'markstream-angular'
import 'markstream-angular/index.css'

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [MarkstreamAngularComponent],
  template: '<markstream-angular [content]="content()" [final]="true" />',
})
class AppComponent {
  readonly content = signal('# Hello from markstream-angular')
}

bootstrapApplication(AppComponent)

Vue / Nuxt 详细快速上手

pnpm add markstream-vue
# npm install markstream-vue
# yarn add markstream-vue
import MarkdownRender from 'markstream-vue'
// main.ts
import { createApp } from 'vue'
import 'markstream-vue/index.css'

createApp({
  components: { MarkdownRender },
  template: '<MarkdownRender custom-id="docs" :content="doc" />',
  setup() {
    const doc = '# Hello markstream-vue\\n\\n支持 **流式** 节点。'
    return { doc }
  },
}).mount('#app')

确保在 CSS reset(如 @tailwind base 或 @unocss/reset)之后导入 markstream-vue/index.css,推荐使用 @import 'markstream-vue/index.css' layer(components); 以避免 Tailwind/UnoCSS 覆盖组件样式。根据需求再按需安装可选 peer 依赖:stream-diffs(增强代码块与 diff)、mermaid(Mermaid 图表)、katex(数学公式)。 如果你的移动端会主动调大根字号(html/body),建议改用 markstream-vue/index.px.css,避免 rem 跟随根字号导致整体放大。

按使用场景选择渲染模式:

<!-- AI 聊天 / SSE 输出:稳定节奏,不叠加透明度动画,避免闪烁 -->
<MarkdownRender
  mode="chat"
  :content="message"
  :final="isDone"
  smooth-streaming="auto"
  :fade="false"
/>

<!-- 富文档:默认启用更大的渲染批次、tooltip 和 fade -->
<MarkdownRender
  mode="docs"
  :content="doc"
  :final="true"
/>

当你想要和 chat 相同的轻量默认值,但当前页面不是聊天语义时,可以使用 mode="minimal"。在 Vue 3(含 Nuxt)中,smooth-streaming 控制出字节奏,fade 控制透明度,两者可以同时开启。mode="chat" 保留 fade=false 作为轻量默认值;需要文字渐显时添加 fade,更看重动画成本时保持关闭。 同一条聊天消息不要仅因为 final 变为 true 就从 mode="chat" 切到 mode="docs"。保持 mode 稳定,只切换 smooth-streaming、typewriter、fade 等节奏/动画 props;docs 会改变布局策略。 如果某个渲染面不需要增强代码块,建议设置 :render-code-blocks-as-pre="true";如果需要富 CodeBlockNode UI 与 File/Diff 渲染,请安装 stream-diffs,否则渲染器会按设计降级为 <pre> 渲染。如果应用要完全接管普通 fenced code,用 setCustomComponents 注册带作用域的 code_block。 stream-diffs 是与框架无关的 DOM runtime;由 CodeBlockNode 决定何时把流式 <pre> 切换为最终的 File 或 FileDiff surface。

使用顶层 code-block-options 配置内置 surface;直接使用 CodeBlockNode 时接收同一个 codeBlockOptions object。六个框架 adapter 共享 CodeBlockOptions。它包含宿主管理的排版/布局字段(fontSize、lineHeight、fontFamily、number 类型且单位为 px 的 maxHeight、number 类型且单位为 px 的上下对称 padding、tabSize),以及受支持的 File/FileDiff、交互、annotation 与 callback 字段。主题、code/language、流式状态、header、挂载、显示与释放仍由宿主管理。

渲染器的 CSS 会作用于内部 .markstream-vue 容器下,以尽量降低对全局的影响;如果你脱离 MarkdownRender 单独使用导出的节点组件,请在外层包一层带 markstream-vue 类名的容器。

暗色变量可以通过给祖先节点加 .dark,或直接给 MarkdownRender 传入 :is-dark="true"(仅对渲染器生效)。

新的接入建议优先使用统一代码块 theme prop。如果你是通过 MarkdownRender 统一下发,可以放到 code-block-props:

<MarkdownRender
  :is-dark="isDark"
  :code-block-props="{ theme: { light: 'vitesse-light', dark: 'vitesse-dark' } }"
  :content="doc"
/>

主题值使用已注册名称:直接 CodeBlockNode.theme 接收固定 string 或 { dark, light },themes 是要加载的 [dark, light] 对。旧 Monaco JSON theme object 不会直接改名;先调用 stream-diffs/pierre 的 registerCustomTheme,再传入注册名称。

code-block-props 只会透传面向用户的代码块 props;node、key、ref、ctx、renderNode、indexKey、__proto__、prototype、constructor 等渲染器结构字段会被忽略。

语言图标默认使用内置的 material theme。新接入建议在 app.mount() 之前通过导出的 helper 查看或切换 icon theme。旧的 app.use(VueRendererMarkdown, { iconTheme }) 选项在 1.x 仍可用,但它会修改进程级全局状态,因此优先使用 helper。

import { getRegisteredThemes, setIconTheme } from 'markstream-vue'

console.log(getRegisteredThemes()) // ['material']
setIconTheme('material')

如果你需要接自己的图标包,可以继续使用 registerIconTheme() 注册。

按需启用重型依赖:

import { enableKatex, enableMermaid } from 'markstream-vue'
import 'markstream-vue/index.css'
import 'katex/dist/katex.min.css'

// 安装对应 peer 后再启用
enableMermaid()
enableKatex()
可选:CDN Worker(KaTeX / Mermaid)

如果你是用 CDN 引入 KaTeX,并且希望公式在 Web Worker 中渲染(不打包 / 不安装可选 peer),可以注入一个“CDN 加载 KaTeX”的 worker:

import { createKaTeXWorkerFromCDN, setKaTeXWorker } from 'markstream-vue'

const { worker } = createKaTeXWorkerFromCDN({
  mode: 'classic',
  // worker 内通过 importScripts() 加载的 UMD 构建
  katexUrl: 'https://cdn.jsdelivr.net/npm/katex@0.16.22/dist/katex.min.js',
  mhchemUrl: 'https://cdn.jsdelivr.net/npm/katex@0.16.22/dist/contrib/mhchem.min.js',
})

if (worker)
  setKaTeXWorker(worker)

如果你是用 CDN 引入 Mermaid,并且希望 Mermaid 的解析在 worker 中进行(用于渐进式 Mermaid 渲染的后台解析),可以注入 Mermaid parser worker:

import { createMermaidWorkerFromCDN, setMermaidWorker } from 'markstream-vue'

const { worker } = createMermaidWorkerFromCDN({
  // Mermaid CDN 构建通常是 ESM,推荐 module worker。
  mode: 'module',
  workerOptions: { type: 'module' },
  mermaidUrl: 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs',
})

if (worker)
  setMermaidWorker(worker)
Nuxt 快速接入
// plugins/markstream-vue.client.ts
import { defineNuxtPlugin } from '#app'
import MarkdownRender from 'markstream-vue'
import 'markstream-vue/index.css'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.component('MarkdownRender', MarkdownRender)
})

然后在页面中直接使用 <MarkdownRender :content=\"md\" />。

🛠️ 常用命令

  • pnpm dev — playground 开发
  • pnpm play:nuxt — Nuxt playground 开发
  • pnpm build — 构建库与 CSS
  • pnpm build:analyze — 带可视化报告的构建(输出 bundle-visualizer.html、bundle-visualizer-tailwind.html)
  • pnpm size:check — 本地执行 dist + npm 包体积预算检查(与 CI 一致)
  • pnpm test — Vitest 测试(快照用 pnpm test:update)
  • pnpm typecheck / pnpm lint — 类型检查与 Lint

⏱️ 30 秒流式接入

用 SSE / WebSocket 结合内置平滑节奏渲染 Markdown:

import MarkdownRender from 'markstream-vue'
import { ref } from 'vue'

const content = ref('')
const final = ref(false)

eventSource.onmessage = (event) => {
  content.value += event.data
}
eventSource.addEventListener('done', () => {
  final.value = true
})

// template
// <MarkdownRender
//   :content="content"
//   :final="final"
//   :max-live-nodes="0"
//   :batch-rendering="true"
//   :render-batch-size="16"
//   :render-batch-delay="8"
//   :render-batch-budget-ms="4"
//   :fade="false"
//   :typewriter="true"
// />

smooth-streaming 在打字机/增量模式(typewriter 或 max-live-nodes <= 0)默认开启;如果希望严格按原始 chunk 节奏显示,可按实例设置 :smooth-streaming="false"。

按页面需要切换渲染风格:

  • 虚拟化窗口(默认):长文档滚动平稳、内存稳定。
  • 增量批次:将 :max-live-nodes="0",获得更明显的“打字机”体验与轻量占位。
进阶:SSR / Worker / 流式续写

SSR / Worker(确定性输出)

在服务端或 Worker 预解析 Markdown,前端直接渲染节点:

// server or worker
import { getMarkdown, parseMarkdownToStructure } from 'markstream-vue'

const md = getMarkdown()
const nodes = parseMarkdownToStructure('# Hello\n\n服务端解析一次', md)
// 将 nodes JSON 下发到客户端

注意:parseMarkdownToStructure 默认是 streamParse: 'auto':兼容的 md 实例会在非 final 顶层解析时使用 md.stream.parse,并保留最近一次 source/token cache。final 一次性解析默认走普通 parser;需要强制 stream 时传 { streamParse: true },需要关闭时传 { streamParse: false }。如果复用同一个 md 解析互不相关的一次性文档,请传 { final: true } 或 { streamParse: false }。

<!-- client -->
<MarkdownRender :nodes="nodesFromServer" />

这样可以避免前端解析,保持 SSR/水合的一致性。

混合模式:SSR + 流式续写

  • 服务端:解析首批 Markdown,序列化 initialNodes(以及 initialMarkdown,便于后续流式追加)。
  • 客户端:用相同的解析配置水合,然后继续流式追加:
import type { ParsedNode } from 'markstream-vue'
import { getMarkdown, parseMarkdownToStructure } from 'markstream-vue'
import { ref } from 'vue'

const nodes = ref<ParsedNode[]>(initialNodes)
const buffer = ref(initialMarkdown)
const md = getMarkdown() // 与服务端保持一致

function addChunk(chunk: string) {
  buffer.value += chunk
  nodes.value = parseMarkdownToStructure(buffer.value, md)
}

这样无需重新解析 SSR 内容,同时还能通过 SSE/WebSocket 持续追加后续片段。

提示:当你明确知道流已结束(消息已完整)时,建议用 parseMarkdownToStructure(buffer.value, md, { final: true }) 或在组件上设置 :final="true",以关闭解析器的中间态(loading)策略,避免末尾残留分隔符(如 $$、未闭合 code fence)导致永久 loading。

⚙️ 性能模式

  • 默认虚拟化窗口:docs 模式的 max-live-nodes 默认值为 220,渲染器会立即渲染当前窗口的节点,同时只保留有限数量的 DOM 节点,实现平滑滚动与可控内存,占位骨架极少。
  • 增量流式模式:当需要更明显的“打字机”体验时,将 :max-live-nodes="0"。这会关闭虚拟化并启用 batchRendering 系列参数控制的增量渲染,新的节点会以小批次加上占位骨架的形式进入视图。

可根据页面类型选择最合适的模式:虚拟化适合长文档/回溯需求,增量流式适合聊天或 AI 输出面板。

小贴士:聊天场景可使用 max-live-nodes="0",并将 renderBatchSize 调小(如 16),renderBatchDelay 设为较小值(如 8ms),获得平滑的“打字”节奏且避免大段跳变。如需限制单帧 CPU,可适当调低 renderBatchBudgetMs。

🧰 关键属性速览

  • content 与 nodes:传原始 Markdown 或预解析节点(来自 parseMarkdownToStructure)。
  • max-live-nodes:docs 模式默认为 220;chat / minimal 模式默认为 0。
  • batchRendering:用 initialRenderBatchSize、renderBatchSize、renderBatchDelay、renderBatchBudgetMs 微调批次。
  • enableMermaid / enableKatex:用于(重新)启用重型依赖或自定义 loader(可与 disableMermaid / disableKatex 配合)。
  • parse-options:在组件上复用解析钩子(如 preTransformTokens、requireClosingStrong)。
  • final:标记“最终态/流结束”,关闭中间态 loading 解析并强制收敛未闭合结构。
  • custom-html-tags:扩展流式 HTML 白名单并将这些标签输出为自定义节点,便于 setCustomComponents 直接映射(如 ['thinking'])。 声明过的自定义节点会尽量让 content/raw 保留原始标签 payload,children 则仍作为富文本场景下的 Markdown 渲染结果。
  • setCustomComponents(customId?, mapping):为自定义标签/标记注册内嵌 Vue 组件(传 custom-id 可限定作用域)。

示例:将 Markdown 占位符映射到 Vue 组件(作用域)

import { setCustomComponents } from 'markstream-vue'

setCustomComponents('docs', {
  CALLOUT: () => import('./components/Callout.vue'),
})

// Markdown: [[CALLOUT:warning title="提示" body="具体内容"]]

渲染时使用同一个 custom-id:

<MarkdownRender
  :content="doc"
  custom-id="docs"
/>

解析钩子示例(服务端/客户端保持一致):

<MarkdownRender
  :content="doc"
  :parse-options="{
    requireClosingStrong: true,
    preTransformTokens: (tokens) => tokens,
  }"
/>

🔥 适用场景

  • AI / 聊天界面:Markdown token 通过 SSE/WebSocket 持续抵达,要求无闪烁与稳定内存。
  • 文档、变更日志、知识库:需要即时加载,同时保持长内容滚动的流畅性。
  • 流式 diff / 代码审查:stream-diffs 增量更新让大代码块也能跟上变更。
  • 图表与示意:Mermaid 渐进式渲染,避免阻塞主渲染。
  • Markdown 驱动的界面中嵌入 Vue 组件(callout、交互式挂件、CTA 等)。

❓ 快问快答

  • Mermaid / KaTeX 不显示?安装对应 peer(mermaid / katex),并传入 :enable-mermaid="true" / :enable-katex="true" 或调用 loader 设置函数。如果你是用 CDN <script> 引入,库也会自动读取 window.mermaid / window.katex。
  • CDN + KaTeX worker:如果你不打包 katex 但仍希望公式在 worker 中渲染(不占主线程),可以用 createKaTeXWorkerFromCDN() 创建一个“CDN 加载 KaTeX”的 worker,然后通过 setKaTeXWorker() 注入。
  • 体积问题:可选 peer 不会被打包,CSS 只需导入一次;增强代码块仅在安装了 stream-diffs 时按需加载其运行时。低频语言图标已拆分为异步 chunk 并按需加载;如果希望避免首次命中图标回退,可在空闲时调用 preloadExtendedLanguageIcons() 预热。
  • 自定义 UI:通过 setCustomComponents(全局或作用域)注册组件,在 Markdown 中放置占位标记并映射到 Vue 组件。

🆚 为什么选择 markstream-vue,而不是普通 Markdown 渲染器?

需求 普通 Markdown 预览 markstream-vue
流式输入 全量重渲染、易闪烁 虚拟窗口 + 增量批次
大代码块 重新高亮速度慢 stream-diffs File/Diff 界面
图表 解析/渲染阻塞 Mermaid 渐进式渲染与回退
自定义 UI 插槽有限 Markdown 内嵌 Vue 组件与类型化节点
长文档 内存峰值高 可配置 live-node 上限,滚动稳定

🗺️ Roadmap(快照)

  • 更多「即开即用」模板(Vite / Nuxt / Tailwind)与 StackBlitz 更新。
  • 代码块预设扩展(stream-diffs 的 diff 友好主题)。
  • AI / 聊天场景的 Cookbook(SSE/WebSocket、重试与续传、Markdown 中间态处理)。
  • 展示更多在 Markdown 中嵌入 Vue 组件的示例与实践。

📦 发布

  • 最新版本与升级提示:Releases
  • 完整历史:CHANGELOG.md
  • 2.x 稳定版:
    • 通过无 tag 的 markstream-vue 安装;维护中的 1.x 继续通过 @1 或 legacy 获取。
    • Monaco、stream-markdown runtime 与 Monaco 命名 API 已移除;受支持的代码块配置迁移到 codeBlockOptions。
    • 升级前阅读 从 1.x 迁移到 2.0。

🧭 案例与展示

用 markstream-vue 做了什么?欢迎提 PR 把你的项目放到这里(附链接 + 截图/GIF)。理想场景:AI/聊天界面、流式文档、diff/代码审查、或在 Markdown 驱动页面中嵌入 Vue 组件。

  • FlowNote —— 流式 Markdown 笔记示例(SSE + 虚拟化窗口):https://markstream-vue.simonhe.me/
  • AI Chat 场景 —— playground “test” 页展示增量批次与分享链接:https://markstream-vue.simonhe.me/test

介绍视频

一段短视频介绍了 markstream-vue 的关键特性与使用方式。

在 Bilibili 查看介绍

在 Bilibili 上观看: Open in Bilibili

核心特性

  • ⚡ 极致性能:为流式场景设计的最小化重渲染和高效 DOM 更新
  • 🌊 流式优先:原生支持不完整或频繁更新的 token 化 Markdown 内容
  • 🧠 增强代码块:stream-diffs File/Diff 界面,支持语法高亮与 diff 交互
  • 🪄 渐进式 Mermaid:图表在语法可用时即时渲染,并在后续更新中完善
  • 🧩 自定义组件:允许在 Markdown 内容中嵌入对应框架组件
  • 📝 完整 Markdown 支持:表格、公式、Emoji、复选框、代码块等
  • 🔄 实时更新:支持增量内容而不破坏格式
  • 📦 TypeScript 优先:提供完善的类型定义与智能提示
  • 🔌 默认配置:各框架入口开箱即可接入
  • 🎨 增强代码块渲染:stream-diffs File/Diff 界面(CodeBlockNode),未安装该 peer 时回退为普通 <pre>
  • 🧰 解析工具集:stream-markdown-parser 文档现已覆盖如何在 Worker/SSE 流中复用解析器、直接向 <MarkdownRender :nodes> 输送 AST、以及注册全局插件/数学辅助函数的方式。

🙌 贡献与社区

  • 阅读贡献指南与 PR 模板:CONTRIBUTING.md
  • 遵守 行为准则。
  • 提交 Issue 时使用模板;渲染问题尽量附上测试页复现链接:https://markstream-vue.simonhe.me/test
  • 有问题先讨论:https://github.com/Simon-He95/markstream-vue/discussions
  • 实时交流:Discord https://discord.gg/vkzdkjeRCW
  • 新手贡献入口:good first issues
  • 支持与求助入口:SUPPORT.md
  • 提交 PR 时遵循 Conventional Commits,渲染/解析改动补充测试,UI 改动附上截图/GIF。
  • 如果本项目对你有帮助,欢迎点 Star、分享给需要的人,助力项目持续演进。
  • 安全披露:请通过 SECURITY.md 中的邮件私下报告潜在漏洞。

快速参与的方式

  • 在现有 issue 中补充复现链接/截图。
  • 完善文档或示例(尤其是流式 + SSR/Worker 场景)。
  • 分享 playground/test 链接,展示性能边界或有趣用法。

故障排查 & 常见问题

详细故障排查与常见问题已迁移至文档站点: https://markstream.simonhe.me/zh/guide/troubleshooting

如需更多帮助,请到 GitHub Issues 创建问题: https://github.com/Simon-He95/markstream-vue/issues

快速提交问题

  1. 在测试页复现并点击“生成分享链接”:https://markstream-vue.simonhe.me/test
  2. 打开 Bug 模板并附上链接与截图:https://github.com/Simon-He95/markstream-vue/issues/new?template=bug_report.yml

鸣谢

贡献者

感谢所有为项目做出贡献的开发者!

Contributors

依赖项目

本项目使用并受益于:

感谢这些项目的作者与贡献者!

Star 历史

Star History Chart

许可

MIT © Simon He

Related Packages

markstream-vue2

Vue 2.6/2.7 streaming Markdown renderer for AI chat, LLM token streams, SSE/WebS...

17,805 3,032
@ashlesss/markstream-vue

Streaming-friendly Vue 3 Markdown renderer for docs sites, AI chat UIs, and larg...

1,121 0
@comark/nuxt

Nuxt module for Comark. Render Markdown with components at runtime, with auto-im...

390,704 1,080
vue3-streamdown

Vue 3 port of streamdown — a drop-in replacement for vue-markdown, designed for...

860
@comark/vue

Vue 3 renderer for Comark. Render Markdown with components at runtime, with stre...

1,255,538 1,080

Version History

Version Released Vue License
2.0.21 >=3.0.0 MIT
2.0.20 >=3.0.0 MIT
2.0.19 >=3.0.0 MIT
2.0.18 >=3.0.0 MIT
2.0.17 >=3.0.0 MIT
Pre-releases (131)
Version Released Vue License
2.0.11-beta.0 >=3.0.0 MIT
2.0.8-beta.0 >=3.0.0 MIT
2.0.6-beta.0 >=3.0.0 MIT
2.0.2-beta.0 >=3.0.0 MIT
2.0.1-beta.1 >=3.0.0 MIT