v151 · DOM · Streaming

Streaming AI Content

element.streamAppendHTML() returns a WritableStream. Pipe an AI response directly into it and the browser's parser renders each HTML chunk progressively — no string accumulation, no re-parsing of the full document, no manual DOM diff.

Checking streamAppendHTML support…

demo

Speed:
AI Assistant (simulated stream) idle
Hi! Click one of the prompts below to see streaming HTML rendering in action.
▶ Show stream internals
Chunk events will appear here…

code

// Chrome 151+: streamAppendHTML returns a WritableStream
async function streamAIResponseIntoElement(container, aiResponseStream) {
  // Get a writable stream backed by the browser's HTML parser
  const writer = container.streamAppendHTML();
  // WritableStream from the fetch Response body (or any ReadableStream)
  await aiResponseStream.pipeTo(writer);
  // The browser rendered each chunk as it arrived — no batching needed.
}

// Usage with a real AI API:
const response = await fetch('/api/ai-complete', {
  method: 'POST',
  body: JSON.stringify({ prompt: userMessage }),
});

const messageEl = document.createElement('div');
messageEl.className = 'msg msg-ai';
chatContainer.appendChild(messageEl);

await streamAIResponseIntoElement(messageEl, response.body);

// Without streamAppendHTML — the old way:
let accumulated = '';
const reader = response.body.getReader();
while (true) {
  const { done, value } = await reader.read();
  if (done) break;
  accumulated += new TextDecoder().decode(value);
  messageEl.innerHTML = accumulated; // ← re-parses the whole string every chunk!
}

see also

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗