Examples › LLM integrations › Stream editor

Streaming into the editor

When an LLM writes markdown, the artifact often lands in a document view — not just a chat bubble. This demo streams simulated tokens into QuikdownEditor so fences, tables, and diagrams render as the buffer grows. Same idea as chat streaming, but the canvas is the editor.

Ready

QuikdownEditor (live artifact view)

The pattern

Accumulate tokens in a buffer. On each chunk, call editor.setMarkdown(buffer). The editor re-renders preview + keeps source in sync. quikdown's parser is small enough that full re-parses on every chunk feel instant for typical agent output sizes. 

let buffer = '';

const editor = new QuikdownEditor('#editor', { mode: 'split' });

for await (const chunk of streamFromLLM(prompt)) {
  buffer += chunk;
  editor.setMarkdown(buffer);   // ← re-render on every chunk
}

When to use editor vs chat bubble

SurfaceBest for
Chat bubble + quikdown(md)Conversational replies, short answers
QuikdownEditor streamLong artifacts, docs users will edit, fence-heavy output
Tool editor (previous example)Agent mutates an existing document via tools

Production notes

  • Debounce — for very fast streams, update every 50–100 ms instead of every token.
  • Fences — incomplete code fences flicker; acceptable for many UIs, or wait until closing backticks.
  • Undo — consider disabling undo during stream, then one setMarkdown when complete.
  • Headless — same API with showToolbar: false if you only want preview chrome you control.