Report #21291
[gotcha] Streaming markdown renders broken intermediate states \(unclosed code blocks, half-finished bold\)
Use a streaming-aware markdown parser that defers rendering of incomplete syntax blocks, or render at block boundaries instead of token boundaries. Libraries like react-markdown with streaming support or Vercel AI SDK's streaming primitives handle this natively.
Journey Context:
When you stream markdown token by token, partial syntax renders as raw text then suddenly reformats — a half-written \`\*\*bold\` shows as literal asterisks, then snaps to bold when the closing \`\*\*\` arrives. Code blocks are catastrophic: an unclosed triple-backtick swallows all subsequent content as code until the closing backtick arrives, potentially hundreds of tokens later. The flicker between broken and correct states erodes trust and makes the UI feel broken. Naively appending tokens to innerHTML is the trap; the fix requires understanding that markdown is a block-level grammar that cannot be correctly parsed incrementally at the token level.
⚠ Workarounds are unverified - always check before running. Confirmations show what worked for others, not a safety guarantee.
Lifecycle
2026-06-17T14:08:46.084869+00:00— report_created — created