vue-stream-markdown

A markdown renderer specially optimized for streaming scenarios, inspired by Streamdown. Designed to achieve smoother streaming rendering through syntax inference and highly customizable rendering elements.

Documentation | Playground

Features

• Streaming-optimized rendering - Incomplete node completion with loading states for images, tables, and code blocks to prevent visual jitter
• Syntax highlighting - Highlight code with Shiki through the independently installable @stream-markdown/code extension
• Diagram rendering - Combine Mermaid and Beautiful Mermaid renderers with deterministic fallback
• Mathematical typesetting - Parse mathematical notation with Comark and render it with KaTeX
• Native HTML and custom tags - Render safe HTML and map custom tags directly to Vue components
• Interactive controls - Copy and download buttons for images, tables, and code blocks
• Fully customizable - Replace any Comark/native tag or UI component with your own Vue components
• Theme-aware scoped styles - Scoped styles under .stream-markdown with semantic data-stream-markdown attributes, following Shadcn UI design system
• Beautiful built-in typography - No atomic CSS required (Tailwind CSS/UnoCSS), self-contained styles
• Content hardening & security - Built-in protection against malicious Markdown with URL validation and protocol blocking
• SSR support - Full server-side rendering compatibility with environment detection utilities

Showcase

I am grateful to the teams and builders who trust this library in their products:

• AI Elements Vue
• ElevenLabs UI Vue

Thank you for your trust and support.

Credit

This project is inspired by Streamdown and uses Comark as its incremental Markdown parser.

This project also uses and benefits from:

• Comark - Compact document model and stateful incremental Markdown parser
• Shiki - Beautiful syntax highlighting
• Mermaid - Diagramming and charting tool
• Beautiful Mermaid - Beautiful Mermaid diagram renderer with Shiki integration
• KaTeX - Fast math typesetting library for the web

Inspiration

• Remend - Inspired the incomplete-Markdown completion approach
• Markstream Vue - Inspired custom Markdown rendering
• AST Explorer - Inspired the playground layout and document inspection
• Medium Zoom - Inspired the custom image zoom interaction

Code Sources

• Markdown Sanitizers - URL validation and security hardening logic in packages/core/src/utils/harden.ts is ported from Rehype Harden
• Dify - LaTeX normalization logic in packages/markmend/core/src/completion/vendored/markdown-utils.ts is ported from Dify

Acknowledgments

I would like to express my sincere gratitude to those who provided guidance and support during the project selection phase and promotion phase of this project. Without their encouragement and support, I would not have been able to complete this work. In particular, the Streamdown community provided excellent code guidance and even helped fix several issues.

Troubleshooting

The playground supports generating shareable links and provides streaming controls (forward/backward navigation) for debugging streaming rendering issues.

If you encounter any problems, please:

1. Use the Generate Share Links button in the playground to create a shareable link with your current content
2. Enable the Document Result toggle to view the parsed Comark document
3. Copy the Markdown content and Comark document at the time of the issue

Please provide the shareable link, Markdown content, and Comark document when creating an issue. This will help me reproduce and diagnose the problem more effectively.

Contributors

License

MIT License © jinghaihan