TransformStream is now supported cross-browser | Blog

TransformStream goes cross-browser

With Firefox 102 adding support for TransformStream, the Streams API is now fully available in Chrome, Safari, and Firefox. Developers can finally rely on it in production environments.

What changed

The Streams API processes large resources in small, manageable chunks. TransformStream lets you modify those chunks as they pass through a pipeline, either by piping data from a ReadableStream into a WritableStream or by consuming the transformed output directly.

class UpperCaseTransformStream {
  constructor() {
    return new TransformStream({
      transform(chunk, controller) {
        controller.enqueue(chunk.toUpperCase());
      },
    });
  }
}

button.addEventListener('click', async () => {
  const response = await fetch('/script.js');
  const readableStream = response.body
    .pipeThrough(new TextDecoderStream())
    .pipeThrough(new UpperCaseTransformStream());

  const reader = readableStream.getReader();
  pre.textContent = '';
  while (true) {
      const { done, value } = await reader.read();
      if (done) {
        break;
      }
      pre.textContent += value;
  }
});

Browser support

• Chrome: 67
• Edge: 79
• Firefox: 102
• Safari: 14.1