by simon_he | 2025-12-16 13:48:24+00:00
> Fast, streaming-friendly Markdown rendering for Vue 3 — progressive Mermaid, streaming diff code blocks, and real-time previews optimized for large documents.

## Where it shines

- AI/chat UIs with long-form answers and Markdown tokens arriving over SSE/websocket. - Docs, changelogs, and knowledge bases that need instant load but stay responsive as they grow. - Streaming diffs and code review panes that benefit from Monaco live updates. - Diagram-heavy content that should render progressively (Mermaid) without blocking. - Embedding Vue components in Markdown-driven surfaces (callouts, widgets, CTA buttons).

## Why markstream-vue over a typical Markdown renderer?

| Needs | Typical Markdown preview | markstream-vue | | --- | --- | --- | | Streaming input | Re-renders whole tree, flashes | Incremental batches with virtual windowing | | Large code blocks | Slow re-highlight | Monaco streaming updates + Shiki option | | Diagrams | Blocks while parsing | Progressive Mermaid with graceful fallback | | Custom UI | Limited slots | Inline Vue components & typed nodes | | Long docs | Memory spikes | Configurable live-node cap for steady usage |

## Roadmap (snapshot)

- More “instant start” templates (Vite + Nuxt + Tailwind) and updated StackBlitz. - Additional codeblock presets (diff-friendly Shiki themes, Monaco decoration helpers). - Cookbook docs for AI/chat patterns (SSE/WebSocket, retry/resume, markdown mid-states). - More showcase examples for embedding Vue components inside Markdown surfaces.

## Features

- Extreme performance: minimal re-rendering and efficient DOM updates for streaming scenarios - Streaming-first: native support for incomplete or frequently updated tokenized Markdown - Monaco streaming updates: high-performance Monaco integration for smooth incremental updates of large code blocks - Progressive Mermaid: charts render instantly when syntax is available, and improve with later updates - Custom components: embed custom Vue components in Markdown content - Full Markdown support: tables, formulas, emoji, checkboxes, code blocks, etc. - Real-time updates: supports incremental content without breaking formatting - TypeScript-first: complete type definitions and IntelliSense - Zero config: works out of the box in Vue 3 projects - Flexible code block rendering: choose Monaco editor (`CodeBlockNode`) or lightweight Shiki highlighting (`MarkdownCodeBlockNode`) - Parser toolkit: [`stream-markdown-parser`](./packages/markdown-parser) now documents how to reuse the parser in workers/SSE streams and feed `<MarkdownRender :nodes>` directly, plus APIs for registering global plugins and custom math helpers.

## Contributing & community

- Read the contributor guide: [CONTRIBUTING.md](./CONTRIBUTING.md) and follow the PR template. - Be kind and follow the [Code of Conduct](./CODE_OF_CONDUCT.md). - Issues: use templates for bugs/requests; attach a repro from https://markstream-vue.simonhe.me/test when possible. - Questions? Start a discussion: https://github.com/Simon-He95/markstream-vue/discussions - Chat live: Discord https://discord.gg/vkzdkjeRCW - Looking to contribute? Start with [good first issues](https://github.com/Simon-He95/markstream-vue/labels/good%20f...). - Support guide: [SUPPORT.md](./SUPPORT.md) - PRs: follow Conventional Commits, add tests for parser/render changes, and include screenshots/GIFs for UI tweaks. - If the project helps you, consider starring and sharing the repo — it keeps the work sustainable. - Security: see [SECURITY.md](./SECURITY.md) to report vulnerabilities privately.

### Quick ways to help

- Add repro links/screenshots to existing issues. - Improve docs/examples (especially streaming + SSR/worker patterns). - Share playground/test links that showcase performance edge cases.