Markstream: Streaming Markdown Renderers for AI Chat Token Streams

Intro

If you've ever built an AI chat interface, you know the pain: tokens arrive one by one, but your Markdown renderer expects the whole document at once. The result? Broken formatting, flickering UI, and a frustrating user experience. Most existing solutions either buffer everything (defeating the purpose of streaming) or give up on formatting entirely.

That's where Markstream comes in. It's a Vue-based approach (from the vue-markdown-render repo) that handles streaming Markdown rendering properly—processing tokens incrementally without losing formatting or breaking your UI. Think of it as a renderer that can keep up with real-time AI output.

What It Does

Markstream is a lightweight Vue component that takes a stream of Markdown text (like from an LLM) and renders it progressively. Instead of waiting for the full response, it parses and displays content as it arrives—handling headers, lists, code blocks, inline formatting, and even nested elements mid-stream.

The core idea is simple: treat each incoming chunk as a partial document, merge it with previous content, and re-render only what changed. It's designed to work with Vue's reactivity system, so updates are smooth and efficient.

Why It's Cool

• Progressive rendering: No more waiting for the full response. Content appears as Markdown, not raw text.
• Smart diffing: It doesn't re-render from scratch every time. Only modified parts of the DOM update.
• Code block handling: Even with partial code blocks, syntax highlighting works incrementally (if you pair it with a highlighter).
• Zero dependencies for core rendering: You just need Vue. No heavy Markdown libraries required.
• Stream-aware: Unlike most renderers, it handles edge cases like headers split across chunks or lists interrupted by new tokens.

How to Try It

First, grab the package:

npm install vue-markdown-render

Then use it in your component:

<template>
  <MarkdownRenderer 
    :content="streamingText" 
    :streaming="true"
  />
</template>

<script setup>
import MarkdownRenderer from 'vue-markdown-render'
import { ref } from 'vue'

const streamingText = ref('')
// Simulate streaming tokens
let i = 0
const tokens = ['# Hello
', 'This is **bold** and ', '*italic* text.']
const interval = setInterval(() => {
  if (i < tokens.length) {
    streamingText.value += tokens[i++]
  } else {
    clearInterval(interval)
  }
}, 300)
</script>

For a full demo, check the GitHub repo—it includes an example with an actual AI chat interface.

Final Thoughts

Markstream solves a real pain point without overcomplicating things. If you're building any kind of streaming text UI in Vue (chatbots, live Markdown editors, real-time documentation), this is worth a look. It's not flashy, but it does one thing well: make streaming Markdown feel native. Give it a shot next time you're tired of watching raw token streams flash across your screen.

Brought to you by @githubprojects