Free and open source, runs in your browser

React Streaming Markdown Playground

Edit the Markdown on the left and press Simulate stream. The right side is the React Markdown Kit renderer fed the text a few tokens at a time, the way a chat UI re-renders on every chunk from a model.

Streaming guidenpmGitHubReact Markdown Kit

  • Every prefix rendersOpen fences, half-written emphasis, tables stopped mid row and links with no closing bracket all render without throwing. The cases are asserted prefix by prefix in the renderer’s tests.
  • Finished blocks stay putThe HTML of a finished block doesn’t change as more text arrives, so nothing above the line being written jumps around.
  • Same componentThere’s no streaming mode to turn on. It’s the same <Markdown> you’d use for a static page.

Render a streamed reply

npm install @react-markdown-kit/renderer

Keep appending chunks to a string in state and render it. That’s the whole integration.

import Markdown, { defineMarkdownPreset, gfm } from '@react-markdown-kit/renderer'


const preset = defineMarkdownPreset({ extensions: [gfm()] })


export function Reply({ text }: { text: string }) {
  // text grows with every chunk from the model
  return <Markdown preset={preset}>{text}</Markdown>
}

The playground also turns on the Mermaid plugin, so a mermaid fence switches to SVG once the diagram type arrives, then fills in node by node.

About this playground

  • Speed sets the time between chunks and Chunk size sets how many tokens each one carries. A token is a word or a single space or punctuation character, so a code fence arrives as three separate backticks.
  • The status strip counts chunks and elapsed time. Every chunk is a full parse and render of the prefix, with nothing cached between them.
  • Copy link compresses the Markdown into the URL hash. Whoever opens it gets this page with your document loaded, and nothing is uploaded.
  • The streaming guide has the details, including the two constructs that change shape as they complete.

Questions

Do I need a streaming mode or a special component?
No. Pass the text received so far to the same Markdown component on every chunk. The renderer re-parses the whole prefix each time and React keeps the finished DOM nodes in place. Streaming Markdown in React.
What happens to a code fence that is still open?
It renders as a code block holding what has arrived so far, and closes when the closing fence comes in. Half-written emphasis, a table stopped mid row and a link with no closing bracket render the same way, as whatever they are at that prefix.
Does text that already rendered move around?
Finished blocks produce byte-identical HTML at every later prefix. There are two exceptions from the CommonMark and GFM rules: a paragraph followed by a setext underline turns into a heading, and a half-typed URL autolinks to the truncated host until the rest arrives.
Is the stream in this playground a real model?
No. It replays the Markdown on the left in chunks on a timer, in your browser. Random chunk size sends 1 to 8 tokens at a time, which is closer to what a model API sends than one token per tick.