
I Made Streaming Markdown 300x Faster — Here's the Architecture
Every AI chat app has the same hidden performance bug. Go open ChatGPT. Stream a long response. Open DevTools → Performance tab → Record. Watch the flame chart. Every single token triggers a full re-parse of the entire accumulated markdown string. Every heading re-detected. Every code block re-highlighted. Every table re-measured. After 500 tokens on a 2KB response, your app has re-parsed 1,000,000 characters . The work scales quadratically. I built StreamMD to make this structurally impossible. Here's how. 🔴 The O(n²) Trap Here's the code every AI app uses: function Chat ({ streamingText }) { // Re-parses ALL markdown, re-renders ALL components — per token return < ReactMarkdown > { streamingText } </ ReactMarkdown >; } This looks innocent. But here's what actually happens on every token : Token arrives → Concat to string (now 2,847 chars) → Re-parse ENTIRE string from char 0 → Rebuild AST (unified/remark/rehype) → Diff entire virtual DOM tree → Reconcile all changed nodes → Re-highli
Continue reading on Dev.to Webdev
Opens in a new tab

