We built `vue-renderer-markdown`, a high-performance streaming Markdown renderer for Vue 3. It was extracted from the core of DeepChat, our open-source AI chatbot, after being battle-tested in production.
This wasn't just an exercise. We needed to render complex, streaming Markdown in real-time for AI chat UIs, and existing solutions weren't performant enough for the Vue ecosystem. Our renderer solves this by drastically minimizing DOM updates.
*Key Highlights:*
* *Built for Vue 3:* Native, with a simple and intuitive API.
* *Extreme Performance:* In complex streaming scenarios, it generates up to *100x fewer DOM nodes* than alternatives like Vercel's Streamdown. This is critical for smooth, responsive UIs.
* *Battle-Tested:* Proven in a large-scale application (DeepChat) and used by an active developer community.
* *Rich Markdown Support:* Handles custom Vue components, tables, math/LaTeX, syntax highlighting, and more, right out of the box.
*See the Difference:*
We set up two live playgrounds with the same complex Markdown to demonstrate the performance and markup difference.
We built `vue-renderer-markdown`, a high-performance streaming Markdown renderer for Vue 3. It was extracted from the core of DeepChat, our open-source AI chatbot, after being battle-tested in production.
This wasn't just an exercise. We needed to render complex, streaming Markdown in real-time for AI chat UIs, and existing solutions weren't performant enough for the Vue ecosystem. Our renderer solves this by drastically minimizing DOM updates.
*Key Highlights:*
* *Built for Vue 3:* Native, with a simple and intuitive API. * *Extreme Performance:* In complex streaming scenarios, it generates up to *100x fewer DOM nodes* than alternatives like Vercel's Streamdown. This is critical for smooth, responsive UIs. * *Battle-Tested:* Proven in a large-scale application (DeepChat) and used by an active developer community. * *Rich Markdown Support:* Handles custom Vue components, tables, math/LaTeX, syntax highlighting, and more, right out of the box.
*See the Difference:*
We set up two live playgrounds with the same complex Markdown to demonstrate the performance and markup difference.
* *Our Vue Renderer:* [https://vue-markdown-renderer.netlify.app](https://vue-markdown-renderer.netlify.app) * *React (Streamdown):* [https://react-stream.netlify.app](https://react-stream.netlify.app)
NPM: `https://www.npmjs.com/package/vue-renderer-markdown`
If you're building AI applications, chatbots, or any content-heavy UI with Vue, give it a try. We'd love to hear your feedback!