TransformStream

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since June 2022.

* Some parts of this feature may have varying levels of support.

Note: This feature is available in Web Workers.

The TransformStream interface of the Streams API represents a concrete implementation of the pipe chain transform stream concept.

It may be passed to the ReadableStream.pipeThrough() method in order to transform a stream of data from one format into another. For example, it might be used to decode (or encode) video frames, decompress data, or convert the stream from XML to JSON.

A transformation algorithm may be provided as an optional argument to the object constructor. If not supplied, data is not modified when piped through the stream.

TransformStream is a transferable object.

Constructor

TransformStream()

Creates and returns a transform stream object, optionally specifying a transformation object and queuing strategies for the streams.

Instance properties

TransformStream.readable Read only

The readable end of a TransformStream.

TransformStream.writable Read only

The writable end of a TransformStream.

Instance methods

None

Examples

Anything-to-uint8array stream

In the following example, a transform stream passes through all chunks it receives as Uint8Array values.

js
const transformContent = {
  start() {}, // required.
  async transform(chunk, controller) {
    chunk = await chunk;
    switch (typeof chunk) {
      case "object":
        // just say the stream is done I guess
        if (chunk === null) {
          controller.terminate();
        } else if (ArrayBuffer.isView(chunk)) {
          controller.enqueue(
            new Uint8Array(chunk.buffer, chunk.byteOffset, chunk.byteLength),
          );
        } else if (
          Array.isArray(chunk) &&
          chunk.every((value) => typeof value === "number")
        ) {
          controller.enqueue(new Uint8Array(chunk));
        } else if (
          typeof chunk.valueOf === "function" &&
          chunk.valueOf() !== chunk
        ) {
          this.transform(chunk.valueOf(), controller); // hack
        } else if ("toJSON" in chunk) {
          this.transform(JSON.stringify(chunk), controller);
        }
        break;
      case "symbol":
        controller.error("Cannot send a symbol as a chunk part");
        break;
      case "undefined":
        controller.error("Cannot send undefined as a chunk part");
        break;
      default:
        controller.enqueue(this.textencoder.encode(String(chunk)));
        break;
    }
  },
  flush() {
    /* do any destructor work here */
  },
};

class AnyToU8Stream extends TransformStream {
  constructor() {
    super({ ...transformContent, textencoder: new TextEncoder() });
  }
}

Chaining multiple ReadableStreams together

This is a useful one, where multiple streams can be conjoined. Examples include building a PWA with progressive loading and progressive streaming.

js
let responses = [
  /* conjoined response tree */
];
let { readable, writable } = new TransformStream();

responses.reduce(
  (a, res, i, arr) =>
    a.then(() => res.pipeTo(writable, { preventClose: i + 1 !== arr.length })),
  Promise.resolve(),
);

Note that this is not resilient to other influences.

Specifications

Specification
Streams
# ts-class

Browser compatibility

desktop mobile server
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Bun
Deno
Node.js
TransformStream
Chrome – Full support
Chrome 67 (Release date: 2018-05-29)
footnote Full support
Edge – Full support
Edge 79 (Release date: 2020-01-15)
footnote Full support
Firefox – Full support
Firefox 102 (Release date: 2022-06-28)
footnote Full support
Opera – Full support
Opera 54 (Release date: 2018-06-28)
footnote Full support
Safari – Full support
Safari 14.1 (Release date: 2021-04-26)
footnote Full support
Chrome Android – Full support
Chrome Android 67 (Release date: 2018-05-31)
footnote Full support
Firefox for Android – Full support
Firefox for Android 102 (Release date: 2022-06-28)
footnote Full support
Opera Android – Full support
Opera Android 48 (Release date: 2018-11-08)
footnote Full support
Safari on iOS – Full support
Safari on iOS 14.5 (Release date: 2021-04-26)
footnote Full support
Samsung Internet – Full support
Samsung Internet 9 (Release date: 2018-09-15)
footnote Full support
WebView Android – Full support
WebView Android 67 (Release date: 2018-05-31)
footnote Full support
WebView on iOS – Full support
WebView on iOS 14.5 (Release date: 2021-04-26)
footnote Full support
Bun – Full support
Bun 1 (Release date: 2023-09-08)
footnote Full support
Deno – Full support
Deno 1 (Release date: 2020-05-13)
footnote Full support
Node.js – Partial support
Node.js 16.5 – 17.5 (Release date: 2021-07-14)
footnote Partial support
footnote Available as a part of the stream/web module.
Node.js – Full support
Node.js 18 (Release date: 2022-04-19)
footnote Full support
TransformStream() constructor
Chrome – Full support
Chrome 67 (Release date: 2018-05-29)
footnote Full support
Edge – Full support
Edge 79 (Release date: 2020-01-15)
footnote Full support
Firefox – Full support
Firefox 102 (Release date: 2022-06-28)
footnote Full support
Opera – Full support
Opera 54 (Release date: 2018-06-28)
footnote Full support
Safari – Full support
Safari 14.1 (Release date: 2021-04-26)
footnote Full support
Chrome Android – Full support
Chrome Android 67 (Release date: 2018-05-31)
footnote Full support
Firefox for Android – Full support
Firefox for Android 102 (Release date: 2022-06-28)
footnote Full support
Opera Android – Full support
Opera Android 48 (Release date: 2018-11-08)
footnote Full support
Safari on iOS – Full support
Safari on iOS 14.5 (Release date: 2021-04-26)
footnote Full support
Samsung Internet – Full support
Samsung Internet 9 (Release date: 2018-09-15)
footnote Full support
WebView Android – Full support
WebView Android 67 (Release date: 2018-05-31)
footnote Full support
WebView on iOS – Full support
WebView on iOS 14.5 (Release date: 2021-04-26)
footnote Full support
Bun – Full support
Bun 1 (Release date: 2023-09-08)
footnote Full support
Deno – Full support
Deno 1 (Release date: 2020-05-13)
footnote Full support
Node.js – Full support
Node.js 16.5 (Release date: 2021-07-14)
footnote Full support
transformer.cancel method
Experimental
Chrome – No support
Chrome
footnote
footnote See bug 40283531
Edge – No support
Edge
footnote
footnote See bug 40283531
Firefox – No support
Firefox
footnote
footnote See bug 1856103
Opera – No support
Opera
footnote
footnote See bug 40283531
Safari – No support
Safari
footnote
footnote See bug 262424
Chrome Android – No support
Chrome Android
footnote
footnote See bug 40283531
Firefox for Android – No support
Firefox for Android
footnote
footnote See bug 1856103
Opera Android – No support
Opera Android
footnote
footnote See bug 40283531
Safari on iOS – No support
Safari on iOS
footnote
footnote See bug 262424
Samsung Internet – No support
Samsung Internet
footnote
footnote See bug 40283531
WebView Android – No support
WebView Android
footnote
footnote See bug 40283531
WebView on iOS – No support
WebView on iOS
footnote
footnote See bug 262424
Bun – No support
Bun
footnote No support
Deno – Full support
Deno 1.38 (Release date: 2023-11-01)
footnote Full support
Node.js – No support
Node.js 20.14 – 20.17 (Release date: 2024-05-28)
footnote Removed in 21 and later
Node.js – Full support
Node.js 21.5 (Release date: 2023-12-19)
footnote Full support
readable
Chrome – Full support
Chrome 67 (Release date: 2018-05-29)
footnote Full support
Edge – Full support
Edge 79 (Release date: 2020-01-15)
footnote Full support
Firefox – Full support
Firefox 102 (Release date: 2022-06-28)
footnote Full support
Opera – Full support
Opera 54 (Release date: 2018-06-28)
footnote Full support
Safari – Full support
Safari 14.1 (Release date: 2021-04-26)
footnote Full support
Chrome Android – Full support
Chrome Android 67 (Release date: 2018-05-31)
footnote Full support
Firefox for Android – Full support
Firefox for Android 102 (Release date: 2022-06-28)
footnote Full support
Opera Android – Full support
Opera Android 48 (Release date: 2018-11-08)
footnote Full support
Safari on iOS – Full support
Safari on iOS 14.5 (Release date: 2021-04-26)
footnote Full support
Samsung Internet – Full support
Samsung Internet 9 (Release date: 2018-09-15)
footnote Full support
WebView Android – Full support
WebView Android 67 (Release date: 2018-05-31)
footnote Full support
WebView on iOS – Full support
WebView on iOS 14.5 (Release date: 2021-04-26)
footnote Full support
Bun – Full support
Bun 1 (Release date: 2023-09-08)
footnote Full support
Deno – Full support
Deno 1 (Release date: 2020-05-13)
footnote Full support
Node.js – Full support
Node.js 16.5 (Release date: 2021-07-14)
footnote Full support
transferable
Chrome – Full support
Chrome 87 (Release date: 2020-11-17)
footnote Full support
Edge – Full support
Edge 87 (Release date: 2020-11-19)
footnote Full support
Firefox – Full support
Firefox 103 (Release date: 2022-07-26)
footnote Full support
Opera – Full support
Opera 73 (Release date: 2020-12-09)
footnote Full support
Safari – No support
Safari
footnote No support
Chrome Android – Full support
Chrome Android 87 (Release date: 2020-11-17)
footnote Full support
Firefox for Android – Full support
Firefox for Android 103 (Release date: 2022-07-26)
footnote Full support
Opera Android – Full support
Opera Android 62 (Release date: 2021-02-16)
footnote Full support
Safari on iOS – No support
Safari on iOS
footnote No support
Samsung Internet – Full support
Samsung Internet 14 (Release date: 2021-04-17)
footnote Full support
WebView Android – Full support
WebView Android 87 (Release date: 2020-11-17)
footnote Full support
WebView on iOS – No support
WebView on iOS
footnote No support
Bun – No support
Bun
footnote No support
Deno – Full support
Deno 2.6 (Release date: 2025-11-19)
footnote Full support
Node.js – Full support
Node.js 16.5 (Release date: 2021-07-14)
footnote Full support
writable
Chrome – Full support
Chrome 67 (Release date: 2018-05-29)
footnote Full support
Edge – Full support
Edge 79 (Release date: 2020-01-15)
footnote Full support
Firefox – Full support
Firefox 102 (Release date: 2022-06-28)
footnote Full support
Opera – Full support
Opera 54 (Release date: 2018-06-28)
footnote Full support
Safari – Full support
Safari 14.1 (Release date: 2021-04-26)
footnote Full support
Chrome Android – Full support
Chrome Android 67 (Release date: 2018-05-31)
footnote Full support
Firefox for Android – Full support
Firefox for Android 102 (Release date: 2022-06-28)
footnote Full support
Opera Android – Full support
Opera Android 48 (Release date: 2018-11-08)
footnote Full support
Safari on iOS – Full support
Safari on iOS 14.5 (Release date: 2021-04-26)
footnote Full support
Samsung Internet – Full support
Samsung Internet 9 (Release date: 2018-09-15)
footnote Full support
WebView Android – Full support
WebView Android 67 (Release date: 2018-05-31)
footnote Full support
WebView on iOS – Full support
WebView on iOS 14.5 (Release date: 2021-04-26)
footnote Full support
Bun – Full support
Bun 1 (Release date: 2023-09-08)
footnote Full support
Deno – Full support
Deno 1 (Release date: 2020-05-13)
footnote Full support
Node.js – Full support
Node.js 16.5 (Release date: 2021-07-14)
footnote Full support

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.
Has more compatibility info.

See also