A lightweight, TypeScript-first Vue 3 component library for rendering Markdown at scale. It’s built for documentation sites and editors that need to render very large documents or continuously-updating previews without jank.
Why this exists
Most Markdown renderers work fine for small pages, but struggle when pages grow huge or when you need live previews and rich features (Mermaid, math, diffs).
This project focuses on real-world performance: progressive Mermaid rendering, streaming diff code blocks, and incremental rendering to keep UI responsive.
Highlights
Progressive Mermaid: render diagrams lazily and progressively so big docs don’t block the main thread.
Streaming diff code blocks: supports streaming updates for diffs so editors can show incremental patches smoothly.
Fast real-time preview: optimized rendering pipeline for large documents and frequent updates.
Built on Vue 3 + TypeScript; integrates with KaTeX, markdown-it plugins, and optional peers (Mermaid, vue-i18n, etc).
Small bundle, tree-shakable components, and a demo playground for quick testing.
Quick start
Install:
Basic usage (Vue 3):
Try the demo locally
Clone and run the playground:
Notes for integrators
Peer deps: Vue 3, KaTeX, optional Mermaid and others—see the repo for details.
Designed to be drop-in for docs sites or editor previews; API focuses on per-node components so you can customize rendering.
What I’m looking for
Feedback on performance bottlenecks, API ergonomics, and integration with doc generators.
Real-world use cases or benchmarks (happy to guide integration into your site).
Bug reports, PRs, or ideas for features (e.g., server-side rendering support, additional progressive renderers).
License: MIT
Repo: https://github.com/Simon-He95/vue-markdown-render
simon_he•4mo ago
A lightweight, TypeScript-first Vue 3 component library for rendering Markdown at scale. It’s built for documentation sites and editors that need to render very large documents or continuously-updating previews without jank.
Why this exists
Most Markdown renderers work fine for small pages, but struggle when pages grow huge or when you need live previews and rich features (Mermaid, math, diffs). This project focuses on real-world performance: progressive Mermaid rendering, streaming diff code blocks, and incremental rendering to keep UI responsive. Highlights
Progressive Mermaid: render diagrams lazily and progressively so big docs don’t block the main thread. Streaming diff code blocks: supports streaming updates for diffs so editors can show incremental patches smoothly. Fast real-time preview: optimized rendering pipeline for large documents and frequent updates. Built on Vue 3 + TypeScript; integrates with KaTeX, markdown-it plugins, and optional peers (Mermaid, vue-i18n, etc). Small bundle, tree-shakable components, and a demo playground for quick testing. Quick start
Install: Basic usage (Vue 3): Try the demo locally
Clone and run the playground: Notes for integrators
Peer deps: Vue 3, KaTeX, optional Mermaid and others—see the repo for details. Designed to be drop-in for docs sites or editor previews; API focuses on per-node components so you can customize rendering. What I’m looking for
Feedback on performance bottlenecks, API ergonomics, and integration with doc generators. Real-world use cases or benchmarks (happy to guide integration into your site). Bug reports, PRs, or ideas for features (e.g., server-side rendering support, additional progressive renderers). License: MIT Repo: https://github.com/Simon-He95/vue-markdown-render