Simon-He95 / markstream-vue

markstream-vue > Fast, streaming-friendly Markdown rendering for Vue 3 — progressive Mermaid, streaming diff code blocks, and real-time previews optimized for large documents. Looking for other frameworks? • Vue 2.6: use (a baseline port with fewer advanced features) • React: see at (first-pass port) Contents • TL;DR Highlights • Try It Now • Community & support • Quick Start • Common commands • Streaming in 30 seconds • Performance presets • Key props & options • Where it shines • FAQ • Why markstream-vue • Roadmap • Releases • Showcase • Introduction Video • Features • Contributing & community • Troubleshooting • Thanks • Star History • License > 📖 Detailed docs, API, and advanced usage: https://markstream-vue-docs.simonhe.me/guide/ TL;DR Highlights • Purpose-built for **streaming Markdown** (AI/chat/SSE) with zero flicker and predictable memory. • **Two render modes**: virtual window for long docs, incremental batching for “typing” effects. • **Progressive diagrams** (Mermaid) and **streaming code blocks** (Monaco/Shiki) that keep up with diffs. • Works with **raw Markdown strings or pre-parsed nodes**, supports **custom Vue components** inline. • TypeScript-first, ship-ready defaults — import CSS and render. 🚀 Try It Now • Playground (interactive demo): https://markstream-vue.simonhe.me/ • Interactive test page (shareable links, easy reproduction): https://markstream-vue.simonhe.me/test • Docs: https://markstream-vue-docs.simonhe.me/guide/ • AI/LLM context (project map): https://markstream-vue-docs.simonhe.me/llms • AI/LLM context (中文): https://markstream-vue-docs.simonhe.me/llms.zh-CN • One-click StackBlitz demo: https://stackblitz.com/github/Simon-He95/markstream-vue?file=playground/src/App.vue • Changelog: CHANGELOG.md • Nuxt playground: • Discord: https://discord.gg/vkzdkjeRCW 💬 Community & support • Discussions: https://github.com/Simon-He95/markstream-vue/discussions • Discord: https://discord.gg/vkzdkjeRCW • Issues: please use templates and attach a repro link (https://markstream-vue.simonhe.me/test) The test page gives you an editor + live preview plus “generate share link” that encodes the input in the URL (with a fallback to open directly or pre-fill a GitHub Issue for long payloads). ⚡ Quick Start Import after your reset (e.g., Tailwind ) so renderer styles win over utility classes. Install optional peers such as , , , , and only when you need Monaco code blocks, Shiki highlighting, diagrams, or math. If your app intentionally scales root font size on mobile, use to avoid -based global scaling side effects. Renderer CSS is scoped under an internal container to minimize global style conflicts. If you render exported node components outside of , wrap them in an element with class . For dark theme variables, either add a class on an ancestor, or pass to to scope dark mode to the renderer. Enable heavy peers only when needed: Optional: CDN-backed workers (KaTeX / Mermaid) If you load KaTeX via CDN and want KaTeX rendering in a Web Worker (no bundler / optional peer not installed), inject a CDN-backed worker: If you load Mermaid via CDN and want off-main-thread parsing (used by progressive Mermaid rendering), inject a Mermaid parser worker: Nuxt quick drop-in Then use in your pages. 🛠️ Common commands • — playground dev server • — Nuxt playground dev • — library + CSS build • — build with bundle visualizer reports ( , ) • — run dist + npm package size budget checks (same guard used in CI) • — Vitest suite ( for snapshots) • / — type and lint checks ⏱️ Streaming in 30 seconds Render streamed Markdown (SSE/websocket) with incremental updates: Switch rendering style per surface: • Virtualized window (default): steady scrolling and memory usage for long docs. • Incremental batches: set for AI-like “typing” with lightweight placeholders. Advanced: SSR / worker / streaming handoff SSR / Worker usage (deterministic output) Pre-parse Markdown on the server or in a worker and render typed nodes on the client: This avoids client-side parsing and keeps SSR/hydration deterministic. Hybrid: SSR + streaming handoff • Server: parse the first Markdown batch to nodes and serialize (and the raw if you also stream later chunks). • Client: hydrate with the same parser options, then keep streaming: This avoids re-parsing SSR content while letting later SSE/WebSocket chunks continue the stream. > Tip: when you know the stream has ended (the message is complete), use or pass to the component. This disables mid-state ( ) parsing so trailing delimiters (like or an unclosed code fence) won’t get stuck showing perpetual loading. ⚙️ Performance presets • **Virtual window (default)** – keep at its default to enable virtualization. Nodes render immediately and the renderer keeps a sliding window of elements mounted so long docs remain responsive without showing skeleton placeholders. • **Incremental stream** – set when you want a true typewriter effect. This disables virtualization and turns on incremental batching governed by , , , , and , so new content flows in small slices with lightweight placeholders. Pick one mode per surface: virtualization for best scrollback and steady memory usage, or incremental batching for AI-style “typing” previews. > Tip: In chats, combine with small (e.g., ) and a tiny (e.g., ) to keep the “typing” feel smooth without jumping large chunks. Tune down if you need to cap CPU per frame. 🧰 Key props & options (cheatsheet) • vs : pass raw Markdown or pre-parsed nodes (from ). • : (default virtualization) or (incremental batches). • : fine-tune batches with , , , . • / : (re)enable heavy peers or custom loaders when needed (pairs with / ). • : reuse parser hooks (e.g., , ) on the component. • : marks end-of-stream; disables mid-state loading parsing and forces unfinished constructs to settle. • : extend streaming HTML allowlist for custom tags and emit them as custom nodes for (e.g., ). • : register inline Vue components for custom tags/mar…