Get multi-framework Markdown rendering for AI apps, ideal for founders using Vue and other frameworks, with 2.6k+ GitHub stars
2,647 stars168 forksVueQuality 8/10Updated 7/8/2026100% free ยท open source
What it does
Markstream-vue renders Markdown with multi-framework support, including Vue, React, Svelte, and Angular, and integrates with tools like Mermaid, KaTeX, and Monaco for AI-powered applications.
Install / run
npm install markstream-vue or yarn add markstream-vue
When to use it
โขBuilding a Vue-based AI app that requires dynamic Markdown rendering
โขIntegrating Markdown rendering across multiple frameworks in a single project
โขCreating interactive, real-time Markdown updates with low jitter
Quick start
1Import markstream-vue in your Vue component: `import { MarkstreamVue } from 'markstream-vue'`
2Create a MarkstreamVue instance and pass Markdown content: `const markstream = new MarkstreamVue('#markdown-container', '**Hello World!**')`
3Use the `mermaid` property to enable Mermaid diagram rendering: `markstream.mermaid = true`
4Configure KaTeX for math equation rendering: `markstream.katex = { throwOnError: false }`
5Integrate with Monaco editor for real-time updates: `markstream.monaco = { theme: 'vs-dark' }`
Ready-to-paste prompt
`const markstream = new MarkstreamVue('#markdown-container', '# Heading
## Subheading
Hello **World**!')` to render a simple Markdown heading and paragraph
Heads up: Make sure to include the `markstream-vue.css` file in your project for proper styling, as markstream-vue does not include default styles
Saves to your device
Topics
ai
ai-chat
angular
katex
llm
markdown
markdown-renderer
markstream
mermaid
monaco-editor
nextjs
nuxt
react
safe-html
shiki
stream-markdown
streaming-markdown
svelte
vitepress
vue
What's inside โ free to inspect
No purchase needed
Read the entire source before you build โ unlike paid marketplaces that hide it behind a buy button.