Progressive Mermaid and streaming diff code blocks – 100x faster render

7 points

9 months ago

I'm releasing vue-markdown-render, a Vue-focused Markdown rendering library optimized for large documents and real-time previews. The core features are progressive/incremental Mermaid rendering, streaming diff code blocks (render as the diff arrives), and various renderer-level optimizations that drastically reduce time-to-first-render and memory use in heavy workloads.

Why this exists: Many Markdown renderers struggle with huge documents, large embedded diagrams, and live-editing scenarios. Typical approaches block rendering until all assets/graphs/code are processed. In interactive editors this causes jank and slow feedback loops. vue-markdown-render targets those pain points with a streaming-first design.

Key features:

Progressive Mermaid: complex diagrams render incrementally so users see a usable diagram earlier. Streaming diff code blocks: diff/code-block rendering can stream partial results during reception for instant feedback. Performance-first architecture: lazy parsing, chunked rendering, and careful memory usage. In some large-doc benchmarks we observe ~100× speedups vs Streamdown (depends on test case and environment). Quick start npm i vue-markdown-render // in a Vue 3 app import { createApp } from 'vue' import App from './App.vue' import VueMarkdownRender from 'vue-markdown-render' const app = createApp(App) app.use(VueMarkdownRender) app.mount('#app')

Reproducing the benchmark (approx) We provide a small benchmark repo under /playground (or attach a link in your release). To reproduce a similar test:

Prepare a large markdown file containing many code blocks and a few large Mermaid diagrams (e.g., 50k+ lines total). Run a timed render with Node or a browser automation script for both vue-markdown-render and Streamdown (same input). Measure time-to-first-paint and full render time, and profile memory usage. Notes and caveats: The "100×" number is workload dependent: it represents observed accelerations in some heavy, real-world-like tests, not a universal guarantee. Differences in environment (CPU, browser, Node version) and the specific document shape affect results. We welcome replication and PRs on test harnesses. Discussion points / Ask the community

What large-doc workflows have you tried that still feel slow? Would you prefer an out-of-the-box editor integration (Monaco/CodeMirror demo) for this? Ideas for additional streaming-friendly Markdown extensions? Links

Repo: https://github.com/Simon-He95/vue-markdown-render Playgrounds / benchmarks: (link to playground folder or separate bench repo) Quick demo: (link to demo site if available) Thanks — happy to answer questions, and would love feedback on benchmark methodology or integration examples.