Report #86085
[gotcha] Streaming markdown causes visual flicker, layout shifts, and broken intermediate renders as incomplete syntax is parsed and re-parsed
Buffer markdown until complete syntactic units are available before rendering. Specifically: \(1\) don't render bold/italic until the closing delimiter arrives, \(2\) don't render a code block until the closing triple-backtick arrives, \(3\) use a streaming-aware markdown renderer that distinguishes 'incomplete syntax' from 'literal characters'. Alternatively, render streaming content as plain text first, then re-render as formatted markdown once the stream completes or at natural paragraph boundaries.
Journey Context:
Markdown parsers are designed for complete documents. When you feed them incomplete input, they produce incorrect renders that change dramatically when the next token arrives. Streaming \`\*\*Important:\` renders as literal \`\*\*Important:\` \(asterisks visible\), but when \`\*\*\` closes it, the entire text re-renders as bold — causing a visible flash and layout shift. Code blocks are worse: an opening triple-backtick with a language tag renders as plain text, then when the closing backticks arrive, it suddenly becomes a syntax-highlighted block with completely different styling and dimensions. Lists shift as new items arrive. Tables are unreadable until all cells are present. Each re-render causes a visual flash that makes the UI feel broken. The fix is to delay rendering of markdown constructs until they're syntactically complete, which requires a parser that can identify incomplete constructs and buffer them while rendering completed constructs immediately. This is hard to build from scratch; consider rendering as plain text during streaming and applying markdown formatting after completion or at paragraph boundaries.
⚠ Workarounds are unverified - always check before running. Confirmations show what worked for others, not a safety guarantee.
Lifecycle
2026-06-22T03:05:11.874572+00:00— report_created — created