A High-Performance Streaming Markdown Renderer for Vue, Born From Our AI Chatbot
Posted4 months agoActive4 months ago
github.comTechstory
supportivepositive
Debate
10/100
VueMarkdownAI Chatbot
Key topics
Vue
Markdown
AI Chatbot
A new high-performance Markdown renderer for Vue is shared, born from an AI chatbot project.
Snapshot generated from the HN discussion
Discussion Activity
Light discussionFirst comment
N/A
Peak period
2
0-1h
Avg / period
2
Key moments
- 01Story posted
Sep 15, 2025 at 12:03 PM EDT
4 months ago
Step 01 - 02First comment
Sep 15, 2025 at 12:03 PM EDT
0s after posting
Step 02 - 03Peak activity
2 comments in 0-1h
Hottest window of the conversation
Step 03 - 04Latest activity
Sep 15, 2025 at 12:07 PM EDT
4 months ago
Step 04
Generating AI Summary...
Analyzing up to 500 comments to identify key contributors and discussion patterns
ID: 45251344Type: storyLast synced: 11/17/2025, 2:05:27 PM
Want the full context?
Jump to the original sources
Read the primary article or dive into the live Hacker News thread when you're ready.
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!