The Front End That Renders Live

parsing SSE on the client

Part of: Streaming Writing Assistant

The backend is streaming frames. Now build the other half: a browser page that reads those frames as they arrive and paints each one onto the screen the moment it shows up, with no full-page wait. Reading a stream in the browser The plain-JavaScript way uses fetch with a ReadableStream reader. You read raw bytes in whatever-sized pieces the network hands you, decode them to text, and split on the frame boundary: Look closely at frames.pop(). buffer.split("\n\n") may cut a frame in half if the network delivered fewer bytes than a full frame. The last element after splitting is whatever's left over, which might be a complete frame or a fragment. Popping it off and keeping it in buffer for the next read is what makes this safe: you never render a half-arrived chunk, only frames you know are complete. The DOM update is the whole point targetEl.textContent += frame.slice(6) is the line that makes this feel alive. Each time a frame completes, you append its payload onto whatever's already on the page, so the essay draft visibly grows word by word instead of appearing as one block after a multi-second wait. slice(6) strips the "data: " prefix, six characters, and leaves just the payload.

Challenge: Parse the SSE Wire Format