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!