TransformStream: TransformStream() constructor

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() constructor creates a new TransformStream object which represents a pair of streams: a WritableStream representing the writable side, and a ReadableStream representing the readable side.

Syntax

js
new TransformStream()
new TransformStream(transformer)
new TransformStream(transformer, writableStrategy)
new TransformStream(transformer, writableStrategy, readableStrategy)

Parameters

transformer Optional

An object representing the transformer. If not supplied the resulting stream will be an identity transform stream which forwards all chunks written to its writable side to its readable side, without any changes.

The transformer object can contain any of the following methods. In each method controller is an instance of TransformStreamDefaultController.

start(controller)

Called when the TransformStream is constructed. It is typically used to enqueue chunks using TransformStreamDefaultController.enqueue().

transform(chunk, controller)

Called when a chunk written to the writable side is ready to be transformed, and performs the work of the transformation stream. It can return a promise to signal success or failure of the write operation. If no transform() method is supplied, the identity transform is used, and the chunk will be enqueued with no changes.

flush(controller)

Called after all chunks written to the writable side have been successfully transformed, and the writable side is about to be closed.

writableStrategy Optional

An object that optionally defines a queuing strategy for the stream. This takes two parameters:

highWaterMark

A non-negative integer. This defines the total number of chunks that can be contained in the internal queue before backpressure is applied.

size(chunk)

A method containing a parameter chunk. This indicates the size to use for each chunk, in bytes.

readableStrategy Optional

An object that optionally defines a queuing strategy for the stream. This takes two parameters:

highWaterMark

A non-negative integer. This defines the total number of chunks that can be contained in the internal queue before backpressure is applied.

size(chunk)

A method containing a parameter chunk. This indicates the size to use for each chunk, in bytes.

Note: You could define your own custom readableStrategy or writableStrategy, or use an instance of ByteLengthQueuingStrategy or CountQueuingStrategy for the object values.

Examples

Transforming text to uppercase

The following example transforms text to uppercase chunk by chunk. This example is from Streams—The Definitive Guide, which has a number of examples of different types of streams.

js
function upperCaseStream() {
  return new TransformStream({
    transform(chunk, controller) {
      controller.enqueue(chunk.toUpperCase());
    },
  });
}

function appendToDOMStream(el) {
  return new WritableStream({
    write(chunk) {
      el.append(chunk);
    },
  });
}

fetch("./lorem-ipsum.txt").then((response) =>
  response.body
    .pipeThrough(new TextDecoderStream())
    .pipeThrough(upperCaseStream())
    .pipeTo(appendToDOMStream(document.body)),
);

Creating an identity transform stream

If no transformer argument is supplied then the result will be an identity transform stream which forwards all chunks written to the writable side to the readable side with no changes. In the following example an identity transform stream is used to add buffering to a pipe.

js
const writableStrategy = new ByteLengthQueuingStrategy({
  highWaterMark: 1024 * 1024,
});
readableStream
  .pipeThrough(new TransformStream(undefined, writableStrategy))
  .pipeTo(writableStream);

Specifications

Specification
Streams
# ref-for-ts-constructor④

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() 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

Legend

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

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