Changelog

New updates and improvements at Cloudflare. Subscribe to RSS

← Back to all posts

Transform HTML quickly with streaming content

Jan 31, 2025, 01:00 AM

Workers

You can now transform HTML elements with streamed content using HTMLRewriter.

Methods like replace, append, and prepend now accept Response and ReadableStream values as Content.

This can be helpful in a variety of situations. For instance, you may have a Worker in front of an origin, and want to replace an element with content from a different source. Prior to this change, you would have to load all of the content from the upstream URL and convert it into a string before replacing the element. This slowed down overall response times.

Now, you can pass the Response object directly into the replace method, and HTMLRewriter will immediately start replacing the content as it is streamed in. This makes responses faster.

JavaScript

index.js

class ElementRewriter {
  async element(element) {
    // able to replace elements while streaming content
    // the fetched body is not buffered into memory as part
    // of the replace
    let res = await fetch("https://upstream-content-provider.example");
    element.replace(res);
  }
}

export default {
  async fetch(request, env, ctx) {
    let response = await fetch("https://site-to-replace.com");
    return new HTMLRewriter()
      .on("[data-to-replace]", new ElementRewriter())
      .transform(response);
  },
};

TypeScript

index.ts

class ElementRewriter {
  async element(element: any) {
    // able to replace elements while streaming content
    // the fetched body is not buffered into memory as part
    // of the replace
    let res = await fetch('https://upstream-content-provider.example');
    element.replace(res);
  }
}

export default {
  async fetch(request, env, ctx): Promise<Response> {
    let response = await fetch('https://site-to-replace.com');
    return new HTMLRewriter().on('[data-to-replace]', new ElementRewriter()).transform(response);
  },
} satisfies ExportedHandler<Env>;

For more information, see the HTMLRewriter documentation.