Skip to content
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 40 additions & 0 deletions src/content/changelogs-next/2025-02-03-html-rewriter-streaming.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
---
title: Rewrite HTML with streaming content
description: HTMLRewiter now supports streamed content for more efficient replacement of HTML elements
products:
- workers
date: 2025-02-03T3:00:00Z
---

import { Render, TypeScriptExample } from "~/components";

[`HTMLRewriter`](/workers/runtime-apis/html-rewriter) now supports replacing HTML with content from a stream.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

speak 2nd person — you can now...


This allows you to process HTML more efficiently, as content does not have to be loaded into memory before replacements are made.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

before and after?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it's just before because you would've await'd response.body previously, then passed in the string


[`Response`](/workers/runtime-apis/response/) and [`ReadableStream`](/workers/runtime-apis/streams/readablestream/) values can now
be passed as [`Content`](/workers/runtime-apis/html-rewriter/#global-types) into methods duch as
`replace`, `append`, and `prepend`.

<TypeScriptExample filename="index.ts">
```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>;
```
</TypeScriptExample>

For more information, see the [`HTMLRewriter` documentation](/workers/runtime-apis/html-rewriter).
4 changes: 2 additions & 2 deletions src/content/docs/workers/runtime-apis/html-rewriter.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -30,9 +30,9 @@ Throughout the `HTMLRewriter` API, there are a few consistent types that many pr



* `Content` string
* `Content` string | Response | ReadableStream

* Content inserted in the output stream should be a string.
* Content inserted in the output stream should be a string, a [`Response`](/workers/runtime-apis/response/), or a [`ReadableStream`](/workers/runtime-apis/streams/readablestream/).

* `ContentOptions` Object

Expand Down
Loading