Streams Demos

Append child WritableStream

Piping through a series of transforms to a custom writable stream that appends children to the DOM.

Streaming element

Using custom element to stream into a given DOM location.

Streaming element with backpressure

A variation on the streaming element demo that adds backpressure to the element's writable stream, decreasing jank.

Streaming fetch() call with a progress bar | (Source Code)

A call to the fetch() api that uses the ReadableStream on the response body to fill a progress bar.

Streaming response from a service worker that instantly populates the DOM | (Source Code)

A book search app that caches responses from an API and streams them to the DOM, allowing for offline streaming responses and making use of the browser's streaming HTML parser.

Progress indicators with Service Workers and Fetch | (Source Code)

Streams intercept Service Worker FetchEvent and fetch() statements to show progress indicators. See browser support notes.

Grayscale a PNG | (Source Code)

A PNG is retrieved via fetch(), and the response body is piped through a TransformStream to convert the PNG data to black and white.

Unpack chunks of a PNG | (Source Code)

A PNG is fetched as a ReadableStream, then pipeThrough() is used to transform the stream of Uint8Arrays to a stream of PNG chunks.

Feel free to submit more demos by sending a pull request to the whatwg/streams repository!