From 897e970db9dffbf354de46d6955e94ca0c56f616 Mon Sep 17 00:00:00 2001 From: Kathy <153706637+kathayl@users.noreply.github.com> Date: Thu, 11 Sep 2025 16:59:54 -0700 Subject: [PATCH 01/20] Update get-started.mdx major update to get started page --- .../docs/browser-rendering/get-started.mdx | 55 ++++++++++++++++++- 1 file changed, 52 insertions(+), 3 deletions(-) diff --git a/src/content/docs/browser-rendering/get-started.mdx b/src/content/docs/browser-rendering/get-started.mdx index 9efeb8ac79e2a3..27ae633828bf6f 100644 --- a/src/content/docs/browser-rendering/get-started.mdx +++ b/src/content/docs/browser-rendering/get-started.mdx @@ -5,7 +5,56 @@ sidebar: order: 2 --- -Browser rendering can be used in two ways: +Cloudflare Browser Rendering allows you to programmatically control a headless browser, enabling you to do things like take screenshots, generate PDFs, and perform automated browser tasks. -- [Workers Bindings](/browser-rendering/workers-bindings/) for complex scripts. -- [REST API](/browser-rendering/rest-api/) for simple actions. +There are two ways to use Browser Rendering: +- [REST API](/browser-rendering/rest-api/) for simple, one-off actions, like taking a screenshot, fetching HTML, or generating a PDF. +- [Workers Bindings](/browser-rendering/workers-bindings/) for more complex, multi-step browser automation using [Puppeteer](/browser-rendering/platform/puppeteer/) and [Playwright](/browser-rendering/platform/playwright/). + +This guide will help you choose the right path for your needs and get you started with your first Browser Rendering project. + +## REST API + +The REST API is the perfect choice if you have an existing application and want to perform simple, stateless browser actions. + +### Prerequisites +- Sign up for a [Cloudflare account](https://dash.cloudflare.com/sign-up/workers-and-pages). +- Create a [Cloudflare API Token](/fundamentals/api/get-started/create-token/) with `Browser Rendering - Edit` permissions. + +### Example: Take a screenshot of the Cloudflare homepage + +```bash + +``` + +The REST API can also be used to: + +- [Fetch HTML](/browser-rendering/rest-api/content-endpoint/) +- [Generate a PDF](/browser-rendering/rest-api/pdf-endpoint/) +- [and more...](/browser-rendering/rest-api/) + +## Workers Bindings + +If you need to build more complex, multi-step browser automation workflows, Workers Bindings are the perfect choice. You can use familiar tools like [Puppeteer](/browser-rendering/platform/puppeteer/) and [Playwright](/browser-rendering/platform/playwright/). + +### Prerequisites + + +### Example: Navigate to a URL, take a screenshot, and store in KV + +```bash + +``` + +## Next Steps +If you have any feature requests or notice any bugs, share your feedback directly with the Cloudflare team by joining the [Cloudflare Developers community on Discord](https://discord.cloudflare.com/). + +- Check out all the [REST API endpoints](/browser-rendering/rest-api/) +- Try out the [Playwright MCP](/browser-rendering/platform/playwright-mcp/) +- Learn more about Browser Rendering [limits](/browser-rendering/platform/limits/) and [pricing](/browser-rendering/platform/pricing/). From c08489468d6ae00355bc26b3167724c568572a02 Mon Sep 17 00:00:00 2001 From: Kathy <153706637+kathayl@users.noreply.github.com> Date: Thu, 11 Sep 2025 17:01:00 -0700 Subject: [PATCH 02/20] Create example-workers-binding-screenshots-from-web.mdx make existing example into partial --- ...e-workers-binding-screenshots-from-web.mdx | 167 ++++++++++++++++++ 1 file changed, 167 insertions(+) create mode 100644 src/content/partials/browser-rendering/example-workers-binding-screenshots-from-web.mdx diff --git a/src/content/partials/browser-rendering/example-workers-binding-screenshots-from-web.mdx b/src/content/partials/browser-rendering/example-workers-binding-screenshots-from-web.mdx new file mode 100644 index 00000000000000..03eb70f1e0f8fd --- /dev/null +++ b/src/content/partials/browser-rendering/example-workers-binding-screenshots-from-web.mdx @@ -0,0 +1,167 @@ +## 1. Create a Worker project + +[Cloudflare Workers](/workers/) provides a serverless execution environment that allows you to create new applications or augment existing ones without configuring or maintaining infrastructure. Your Worker application is a container to interact with a headless browser to do actions, such as taking screenshots. + +Create a new Worker project named `browser-worker` by running: + + + + + +## 2. Install Puppeteer + +In your `browser-worker` directory, install Cloudflare’s [fork of Puppeteer](/browser-rendering/platform/puppeteer/): + + + +## 3. Create a KV namespace + +Browser Rendering can be used with other developer products. You might need a [relational database](/d1/), an [R2 bucket](/r2/) to archive your crawled pages and assets, a [Durable Object](/durable-objects/) to keep your browser instance alive and share it with multiple requests, or [Queues](/queues/) to handle your jobs asynchronous. + +For the purpose of this guide, you are going to use a [KV store](/kv/concepts/kv-namespaces/) to cache your screenshots. + +Create two namespaces, one for production, and one for development. + +```sh +npx wrangler kv namespace create BROWSER_KV_DEMO +npx wrangler kv namespace create BROWSER_KV_DEMO --preview +``` + +Take note of the IDs for the next step. + +## 4. Configure the Wrangler configuration file + +Configure your `browser-worker` project's [Wrangler configuration file](/workers/wrangler/configuration/) by adding a browser [binding](/workers/runtime-apis/bindings/) and a [Node.js compatibility flag](/workers/configuration/compatibility-flags/#nodejs-compatibility-flag). Bindings allow your Workers to interact with resources on the Cloudflare developer platform. Your browser `binding` name is set by you, this guide uses the name `MYBROWSER`. Browser bindings allow for communication between a Worker and a headless browser which allows you to do actions such as taking a screenshot, generating a PDF and more. + +Update your [Wrangler configuration file](/workers/wrangler/configuration/) with the Browser Rendering API binding and the KV namespaces you created: + + + +```toml title="wrangler.toml" +name = "browser-worker" +main = "src/index.js" +compatibility_date = "2023-03-14" +compatibility_flags = [ "nodejs_compat" ] + +browser = { binding = "MYBROWSER" } +kv_namespaces = [ + { binding = "BROWSER_KV_DEMO", id = "22cf855786094a88a6906f8edac425cd", preview_id = "e1f8b68b68d24381b57071445f96e623" } +] +``` + + + +## 5. Code + + +Update `src/index.js` with your Worker code: + +```js +import puppeteer from "@cloudflare/puppeteer"; + +export default { + async fetch(request, env) { + const { searchParams } = new URL(request.url); + let url = searchParams.get("url"); + let img; + if (url) { + url = new URL(url).toString(); // normalize + img = await env.BROWSER_KV_DEMO.get(url, { type: "arrayBuffer" }); + if (img === null) { + const browser = await puppeteer.launch(env.MYBROWSER); + const page = await browser.newPage(); + await page.goto(url); + img = await page.screenshot(); + await env.BROWSER_KV_DEMO.put(url, img, { + expirationTtl: 60 * 60 * 24, + }); + await browser.close(); + } + return new Response(img, { + headers: { + "content-type": "image/jpeg", + }, + }); + } else { + return new Response("Please add an ?url=https://example.com/ parameter"); + } + }, +}; +``` + + +Update `src/index.ts` with your Worker code: + +```ts +import puppeteer from "@cloudflare/puppeteer"; + +interface Env { + MYBROWSER: Fetcher; + BROWSER_KV_DEMO: KVNamespace; +} + +export default { + async fetch(request, env): Promise { + const { searchParams } = new URL(request.url); + let url = searchParams.get("url"); + let img: Buffer; + if (url) { + url = new URL(url).toString(); // normalize + img = await env.BROWSER_KV_DEMO.get(url, { type: "arrayBuffer" }); + if (img === null) { + const browser = await puppeteer.launch(env.MYBROWSER); + const page = await browser.newPage(); + await page.goto(url); + img = (await page.screenshot()) as Buffer; + await env.BROWSER_KV_DEMO.put(url, img, { + expirationTtl: 60 * 60 * 24, + }); + await browser.close(); + } + return new Response(img, { + headers: { + "content-type": "image/jpeg", + }, + }); + } else { + return new Response("Please add an ?url=https://example.com/ parameter"); + } + }, +} satisfies ExportedHandler; +``` + + + +This Worker instantiates a browser using Puppeteer, opens a new page, navigates to what you put in the `"url"` parameter, takes a screenshot of the page, stores the screenshot in KV, closes the browser, and responds with the JPEG image of the screenshot. + +If your Worker is running in production, it will store the screenshot to the production KV namespace. If you are running `wrangler dev`, it will store the screenshot to the dev KV namespace. + +If the same `"url"` is requested again, it will use the cached version in KV instead, unless it expired. + +## 6. Test + +Run `npx wrangler dev` to test your Worker locally or run [`npx wrangler dev --remote`](/workers/wrangler/commands/#dev) to test your Worker remotely before deploying to Cloudflare's global network. + +To test taking your first screenshot, go to the following URL: + +`/?url=https://example.com` + +## 7. Deploy + +Run `npx wrangler deploy` to deploy your Worker to the Cloudflare global network. + +To take your first screenshot, go to the following URL: + +`..workers.dev/?url=https://example.com` From 6dbe4cf40d3c9747a5d071a4594bae20fecbe20a Mon Sep 17 00:00:00 2001 From: Kathy <153706637+kathayl@users.noreply.github.com> Date: Thu, 11 Sep 2025 17:02:13 -0700 Subject: [PATCH 03/20] Update screenshots.mdx replace example with partial --- .../workers-bindings/screenshots.mdx | 167 +----------------- 1 file changed, 3 insertions(+), 164 deletions(-) diff --git a/src/content/docs/browser-rendering/workers-bindings/screenshots.mdx b/src/content/docs/browser-rendering/workers-bindings/screenshots.mdx index 3bb9068ca1e3b9..73002103107ca4 100644 --- a/src/content/docs/browser-rendering/workers-bindings/screenshots.mdx +++ b/src/content/docs/browser-rendering/workers-bindings/screenshots.mdx @@ -17,174 +17,13 @@ By following this guide, you will create a Worker that uses the Browser Renderin -## 1. Create a Worker project - -[Cloudflare Workers](/workers/) provides a serverless execution environment that allows you to create new applications or augment existing ones without configuring or maintaining infrastructure. Your Worker application is a container to interact with a headless browser to do actions, such as taking screenshots. - -Create a new Worker project named `browser-worker` by running: - - - +```bash - -## 2. Install Puppeteer - -In your `browser-worker` directory, install Cloudflare’s [fork of Puppeteer](/browser-rendering/platform/puppeteer/): - - - -## 3. Create a KV namespace - -Browser Rendering can be used with other developer products. You might need a [relational database](/d1/), an [R2 bucket](/r2/) to archive your crawled pages and assets, a [Durable Object](/durable-objects/) to keep your browser instance alive and share it with multiple requests, or [Queues](/queues/) to handle your jobs asynchronous. - -For the purpose of this guide, you are going to use a [KV store](/kv/concepts/kv-namespaces/) to cache your screenshots. - -Create two namespaces, one for production, and one for development. - -```sh -npx wrangler kv namespace create BROWSER_KV_DEMO -npx wrangler kv namespace create BROWSER_KV_DEMO --preview -``` - -Take note of the IDs for the next step. - -## 4. Configure the Wrangler configuration file - -Configure your `browser-worker` project's [Wrangler configuration file](/workers/wrangler/configuration/) by adding a browser [binding](/workers/runtime-apis/bindings/) and a [Node.js compatibility flag](/workers/configuration/compatibility-flags/#nodejs-compatibility-flag). Bindings allow your Workers to interact with resources on the Cloudflare developer platform. Your browser `binding` name is set by you, this guide uses the name `MYBROWSER`. Browser bindings allow for communication between a Worker and a headless browser which allows you to do actions such as taking a screenshot, generating a PDF and more. - -Update your [Wrangler configuration file](/workers/wrangler/configuration/) with the Browser Rendering API binding and the KV namespaces you created: - - - -```toml title="wrangler.toml" -name = "browser-worker" -main = "src/index.js" -compatibility_date = "2023-03-14" -compatibility_flags = [ "nodejs_compat" ] - -browser = { binding = "MYBROWSER" } -kv_namespaces = [ - { binding = "BROWSER_KV_DEMO", id = "22cf855786094a88a6906f8edac425cd", preview_id = "e1f8b68b68d24381b57071445f96e623" } -] -``` - - - -## 5. Code - - -Update `src/index.js` with your Worker code: - -```js -import puppeteer from "@cloudflare/puppeteer"; - -export default { - async fetch(request, env) { - const { searchParams } = new URL(request.url); - let url = searchParams.get("url"); - let img; - if (url) { - url = new URL(url).toString(); // normalize - img = await env.BROWSER_KV_DEMO.get(url, { type: "arrayBuffer" }); - if (img === null) { - const browser = await puppeteer.launch(env.MYBROWSER); - const page = await browser.newPage(); - await page.goto(url); - img = await page.screenshot(); - await env.BROWSER_KV_DEMO.put(url, img, { - expirationTtl: 60 * 60 * 24, - }); - await browser.close(); - } - return new Response(img, { - headers: { - "content-type": "image/jpeg", - }, - }); - } else { - return new Response("Please add an ?url=https://example.com/ parameter"); - } - }, -}; ``` - -Update `src/index.ts` with your Worker code: - -```ts -import puppeteer from "@cloudflare/puppeteer"; - -interface Env { - MYBROWSER: Fetcher; - BROWSER_KV_DEMO: KVNamespace; -} - -export default { - async fetch(request, env): Promise { - const { searchParams } = new URL(request.url); - let url = searchParams.get("url"); - let img: Buffer; - if (url) { - url = new URL(url).toString(); // normalize - img = await env.BROWSER_KV_DEMO.get(url, { type: "arrayBuffer" }); - if (img === null) { - const browser = await puppeteer.launch(env.MYBROWSER); - const page = await browser.newPage(); - await page.goto(url); - img = (await page.screenshot()) as Buffer; - await env.BROWSER_KV_DEMO.put(url, img, { - expirationTtl: 60 * 60 * 24, - }); - await browser.close(); - } - return new Response(img, { - headers: { - "content-type": "image/jpeg", - }, - }); - } else { - return new Response("Please add an ?url=https://example.com/ parameter"); - } - }, -} satisfies ExportedHandler; -``` - - - -This Worker instantiates a browser using Puppeteer, opens a new page, navigates to what you put in the `"url"` parameter, takes a screenshot of the page, stores the screenshot in KV, closes the browser, and responds with the JPEG image of the screenshot. - -If your Worker is running in production, it will store the screenshot to the production KV namespace. If you are running `wrangler dev`, it will store the screenshot to the dev KV namespace. - -If the same `"url"` is requested again, it will use the cached version in KV instead, unless it expired. - -## 6. Test - -Run `npx wrangler dev` to test your Worker locally or run [`npx wrangler dev --remote`](/workers/wrangler/commands/#dev) to test your Worker remotely before deploying to Cloudflare's global network. - -To test taking your first screenshot, go to the following URL: - -`/?url=https://example.com` - -## 7. Deploy - -Run `npx wrangler deploy` to deploy your Worker to the Cloudflare global network. - -To take your first screenshot, go to the following URL: - -`..workers.dev/?url=https://example.com` - ## Related resources - Other [Puppeteer examples](https://github.com/cloudflare/puppeteer/tree/main/examples) From 39b21432cadd2f8d30e0dcd129cf30863c2e6801 Mon Sep 17 00:00:00 2001 From: ToriLindsay Date: Fri, 12 Sep 2025 09:22:27 +0100 Subject: [PATCH 04/20] Needed to import Render component --- src/content/docs/browser-rendering/get-started.mdx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/content/docs/browser-rendering/get-started.mdx b/src/content/docs/browser-rendering/get-started.mdx index 27ae633828bf6f..fabbf9ffe58f6a 100644 --- a/src/content/docs/browser-rendering/get-started.mdx +++ b/src/content/docs/browser-rendering/get-started.mdx @@ -4,6 +4,7 @@ title: Get started sidebar: order: 2 --- +import { Render } from "~/components"; Cloudflare Browser Rendering allows you to programmatically control a headless browser, enabling you to do things like take screenshots, generate PDFs, and perform automated browser tasks. @@ -11,11 +12,11 @@ There are two ways to use Browser Rendering: - [REST API](/browser-rendering/rest-api/) for simple, one-off actions, like taking a screenshot, fetching HTML, or generating a PDF. - [Workers Bindings](/browser-rendering/workers-bindings/) for more complex, multi-step browser automation using [Puppeteer](/browser-rendering/platform/puppeteer/) and [Playwright](/browser-rendering/platform/playwright/). -This guide will help you choose the right path for your needs and get you started with your first Browser Rendering project. +This guide will help you choose the right path for your needs and get you started with your first Browser Rendering project. ## REST API -The REST API is the perfect choice if you have an existing application and want to perform simple, stateless browser actions. +The REST API is the perfect choice if you have an existing application and want to perform simple, stateless browser actions. ### Prerequisites - Sign up for a [Cloudflare account](https://dash.cloudflare.com/sign-up/workers-and-pages). @@ -53,7 +54,7 @@ If you need to build more complex, multi-step browser automation workflows, Work ``` ## Next Steps -If you have any feature requests or notice any bugs, share your feedback directly with the Cloudflare team by joining the [Cloudflare Developers community on Discord](https://discord.cloudflare.com/). +If you have any feature requests or notice any bugs, share your feedback directly with the Cloudflare team by joining the [Cloudflare Developers community on Discord](https://discord.cloudflare.com/). - Check out all the [REST API endpoints](/browser-rendering/rest-api/) - Try out the [Playwright MCP](/browser-rendering/platform/playwright-mcp/) From c1a47c69e2647ff98a35eeb383a2866202ed3a1e Mon Sep 17 00:00:00 2001 From: Kathy <153706637+kathayl@users.noreply.github.com> Date: Fri, 12 Sep 2025 09:11:37 -0700 Subject: [PATCH 05/20] Update src/content/docs/browser-rendering/get-started.mdx Co-authored-by: ToriLindsay --- src/content/docs/browser-rendering/get-started.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/browser-rendering/get-started.mdx b/src/content/docs/browser-rendering/get-started.mdx index fabbf9ffe58f6a..c232dd22247aeb 100644 --- a/src/content/docs/browser-rendering/get-started.mdx +++ b/src/content/docs/browser-rendering/get-started.mdx @@ -16,7 +16,7 @@ This guide will help you choose the right path for your needs and get you starte ## REST API -The REST API is the perfect choice if you have an existing application and want to perform simple, stateless browser actions. +The REST API is best for situations where you have an existing application and want to perform simple, stateless browser actions. ### Prerequisites - Sign up for a [Cloudflare account](https://dash.cloudflare.com/sign-up/workers-and-pages). From 73e0b25c8facb7f2712d5d7ee7525d0873171ab6 Mon Sep 17 00:00:00 2001 From: Kathy <153706637+kathayl@users.noreply.github.com> Date: Fri, 12 Sep 2025 09:14:59 -0700 Subject: [PATCH 06/20] Update src/content/docs/browser-rendering/get-started.mdx Co-authored-by: ToriLindsay --- src/content/docs/browser-rendering/get-started.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/browser-rendering/get-started.mdx b/src/content/docs/browser-rendering/get-started.mdx index c232dd22247aeb..130648fe75d4e5 100644 --- a/src/content/docs/browser-rendering/get-started.mdx +++ b/src/content/docs/browser-rendering/get-started.mdx @@ -39,7 +39,7 @@ The REST API can also be used to: ## Workers Bindings -If you need to build more complex, multi-step browser automation workflows, Workers Bindings are the perfect choice. You can use familiar tools like [Puppeteer](/browser-rendering/platform/puppeteer/) and [Playwright](/browser-rendering/platform/playwright/). +Workers Bindings are best for situations where you need to build more complex, multi-step browser automation workflows. You can use familiar tools like [Puppeteer](/browser-rendering/platform/puppeteer/) and [Playwright](/browser-rendering/platform/playwright/). ### Prerequisites From 26736a1bf8828223cfe00c1c84b31b5d4505462f Mon Sep 17 00:00:00 2001 From: Kathy <153706637+kathayl@users.noreply.github.com> Date: Mon, 15 Sep 2025 09:23:38 -0700 Subject: [PATCH 07/20] Update src/content/docs/browser-rendering/get-started.mdx Co-authored-by: ToriLindsay --- src/content/docs/browser-rendering/get-started.mdx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/content/docs/browser-rendering/get-started.mdx b/src/content/docs/browser-rendering/get-started.mdx index 130648fe75d4e5..e043760da77cdd 100644 --- a/src/content/docs/browser-rendering/get-started.mdx +++ b/src/content/docs/browser-rendering/get-started.mdx @@ -24,7 +24,6 @@ The REST API is best for situations where you have an existing application and w ### Example: Take a screenshot of the Cloudflare homepage -```bash Date: Mon, 15 Sep 2025 09:23:50 -0700 Subject: [PATCH 08/20] Update src/content/docs/browser-rendering/get-started.mdx Co-authored-by: ToriLindsay --- src/content/docs/browser-rendering/get-started.mdx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/content/docs/browser-rendering/get-started.mdx b/src/content/docs/browser-rendering/get-started.mdx index e043760da77cdd..88d62b0d8a9108 100644 --- a/src/content/docs/browser-rendering/get-started.mdx +++ b/src/content/docs/browser-rendering/get-started.mdx @@ -28,7 +28,6 @@ The REST API is best for situations where you have an existing application and w file="example-screenshot-from-url" product="browser-rendering" /> -``` The REST API can also be used to: From cc671a7d9b8fef8ca5bcbc770a3c387d0f62e8cd Mon Sep 17 00:00:00 2001 From: Kathy <153706637+kathayl@users.noreply.github.com> Date: Mon, 15 Sep 2025 10:37:37 -0700 Subject: [PATCH 09/20] Update get-started.mdx fix additional ```bash --- src/content/docs/browser-rendering/get-started.mdx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/content/docs/browser-rendering/get-started.mdx b/src/content/docs/browser-rendering/get-started.mdx index 88d62b0d8a9108..487c063e35f331 100644 --- a/src/content/docs/browser-rendering/get-started.mdx +++ b/src/content/docs/browser-rendering/get-started.mdx @@ -44,12 +44,10 @@ Workers Bindings are best for situations where you need to build more complex, m ### Example: Navigate to a URL, take a screenshot, and store in KV -```bash -``` ## Next Steps If you have any feature requests or notice any bugs, share your feedback directly with the Cloudflare team by joining the [Cloudflare Developers community on Discord](https://discord.cloudflare.com/). From 6fd0ab9c552c1034d2782091a44bf995b97ca6be Mon Sep 17 00:00:00 2001 From: Kathy <153706637+kathayl@users.noreply.github.com> Date: Mon, 15 Sep 2025 13:44:13 -0700 Subject: [PATCH 10/20] Update screenshots.mdx trying to diagnose problem. remove extra ``` bash? --- .../docs/browser-rendering/workers-bindings/screenshots.mdx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/content/docs/browser-rendering/workers-bindings/screenshots.mdx b/src/content/docs/browser-rendering/workers-bindings/screenshots.mdx index 73002103107ca4..ee2d3d72e76ce6 100644 --- a/src/content/docs/browser-rendering/workers-bindings/screenshots.mdx +++ b/src/content/docs/browser-rendering/workers-bindings/screenshots.mdx @@ -17,12 +17,10 @@ By following this guide, you will create a Worker that uses the Browser Renderin -```bash -``` ## Related resources From 2c303db12774ea97617187cf9a9a8b7237b719ff Mon Sep 17 00:00:00 2001 From: ToriLindsay Date: Tue, 16 Sep 2025 14:55:10 +0100 Subject: [PATCH 11/20] Fixing components --- .../example-workers-binding-screenshots-from-web.mdx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/content/partials/browser-rendering/example-workers-binding-screenshots-from-web.mdx b/src/content/partials/browser-rendering/example-workers-binding-screenshots-from-web.mdx index 03eb70f1e0f8fd..6916f0b83c656c 100644 --- a/src/content/partials/browser-rendering/example-workers-binding-screenshots-from-web.mdx +++ b/src/content/partials/browser-rendering/example-workers-binding-screenshots-from-web.mdx @@ -1,3 +1,5 @@ +import { Render, PackageManagers, WranglerConfig, Tabs, TabItem } from "~/components"; + ## 1. Create a Worker project [Cloudflare Workers](/workers/) provides a serverless execution environment that allows you to create new applications or augment existing ones without configuring or maintaining infrastructure. Your Worker application is a container to interact with a headless browser to do actions, such as taking screenshots. From 3e665697d1fdb708306c43b5935e0962130f335c Mon Sep 17 00:00:00 2001 From: Kathy <153706637+kathayl@users.noreply.github.com> Date: Tue, 23 Sep 2025 11:29:14 +0100 Subject: [PATCH 12/20] Update src/content/partials/browser-rendering/example-workers-binding-screenshots-from-web.mdx Co-authored-by: ToriLindsay --- .../example-workers-binding-screenshots-from-web.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/partials/browser-rendering/example-workers-binding-screenshots-from-web.mdx b/src/content/partials/browser-rendering/example-workers-binding-screenshots-from-web.mdx index 6916f0b83c656c..fb66501dae9a4d 100644 --- a/src/content/partials/browser-rendering/example-workers-binding-screenshots-from-web.mdx +++ b/src/content/partials/browser-rendering/example-workers-binding-screenshots-from-web.mdx @@ -30,7 +30,7 @@ In your `browser-worker` directory, install Cloudflare’s [fork of Puppeteer](/ ## 3. Create a KV namespace -Browser Rendering can be used with other developer products. You might need a [relational database](/d1/), an [R2 bucket](/r2/) to archive your crawled pages and assets, a [Durable Object](/durable-objects/) to keep your browser instance alive and share it with multiple requests, or [Queues](/queues/) to handle your jobs asynchronous. +Browser Rendering can be used with other developer products. You might need a [relational database](/d1/), an [R2 bucket](/r2/) to archive your crawled pages and assets, a [Durable Object](/durable-objects/) to keep your browser instance alive and share it with multiple requests, or [Queues](/queues/) to handle your jobs asynchronously. For the purpose of this guide, you are going to use a [KV store](/kv/concepts/kv-namespaces/) to cache your screenshots. From e6c45db6835e73a5416baf1993b7cbc6a7036cd8 Mon Sep 17 00:00:00 2001 From: Kathy <153706637+kathayl@users.noreply.github.com> Date: Tue, 23 Sep 2025 11:29:23 +0100 Subject: [PATCH 13/20] Update src/content/partials/browser-rendering/example-workers-binding-screenshots-from-web.mdx Co-authored-by: ToriLindsay --- .../example-workers-binding-screenshots-from-web.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/partials/browser-rendering/example-workers-binding-screenshots-from-web.mdx b/src/content/partials/browser-rendering/example-workers-binding-screenshots-from-web.mdx index fb66501dae9a4d..10137143ee67b9 100644 --- a/src/content/partials/browser-rendering/example-workers-binding-screenshots-from-web.mdx +++ b/src/content/partials/browser-rendering/example-workers-binding-screenshots-from-web.mdx @@ -34,7 +34,7 @@ Browser Rendering can be used with other developer products. You might need a [r For the purpose of this guide, you are going to use a [KV store](/kv/concepts/kv-namespaces/) to cache your screenshots. -Create two namespaces, one for production, and one for development. +Create two namespaces, one for production and one for development. ```sh npx wrangler kv namespace create BROWSER_KV_DEMO From caf171dbe142093914a8f8a2a71e3b85e4c3e992 Mon Sep 17 00:00:00 2001 From: Kathy <153706637+kathayl@users.noreply.github.com> Date: Tue, 23 Sep 2025 11:29:33 +0100 Subject: [PATCH 14/20] Update src/content/partials/browser-rendering/example-workers-binding-screenshots-from-web.mdx Co-authored-by: ToriLindsay --- .../example-workers-binding-screenshots-from-web.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/partials/browser-rendering/example-workers-binding-screenshots-from-web.mdx b/src/content/partials/browser-rendering/example-workers-binding-screenshots-from-web.mdx index 10137143ee67b9..a6e43d63b111db 100644 --- a/src/content/partials/browser-rendering/example-workers-binding-screenshots-from-web.mdx +++ b/src/content/partials/browser-rendering/example-workers-binding-screenshots-from-web.mdx @@ -45,7 +45,7 @@ Take note of the IDs for the next step. ## 4. Configure the Wrangler configuration file -Configure your `browser-worker` project's [Wrangler configuration file](/workers/wrangler/configuration/) by adding a browser [binding](/workers/runtime-apis/bindings/) and a [Node.js compatibility flag](/workers/configuration/compatibility-flags/#nodejs-compatibility-flag). Bindings allow your Workers to interact with resources on the Cloudflare developer platform. Your browser `binding` name is set by you, this guide uses the name `MYBROWSER`. Browser bindings allow for communication between a Worker and a headless browser which allows you to do actions such as taking a screenshot, generating a PDF and more. +Configure your `browser-worker` project's [Wrangler configuration file](/workers/wrangler/configuration/) by adding a browser [binding](/workers/runtime-apis/bindings/) and a [Node.js compatibility flag](/workers/configuration/compatibility-flags/#nodejs-compatibility-flag). Bindings allow your Workers to interact with resources on the Cloudflare developer platform. Your browser `binding` name is set by you, this guide uses the name `MYBROWSER`. Browser bindings allow for communication between a Worker and a headless browser which allows you to do actions such as taking a screenshot, generating a PDF, and more. Update your [Wrangler configuration file](/workers/wrangler/configuration/) with the Browser Rendering API binding and the KV namespaces you created: From 6f18eb7e1c8d049d847273884394c7feb4922881 Mon Sep 17 00:00:00 2001 From: Kathy <153706637+kathayl@users.noreply.github.com> Date: Tue, 23 Sep 2025 11:29:47 +0100 Subject: [PATCH 15/20] Update src/content/partials/browser-rendering/example-workers-binding-screenshots-from-web.mdx Co-authored-by: ToriLindsay --- .../example-workers-binding-screenshots-from-web.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/partials/browser-rendering/example-workers-binding-screenshots-from-web.mdx b/src/content/partials/browser-rendering/example-workers-binding-screenshots-from-web.mdx index a6e43d63b111db..a010acffabce28 100644 --- a/src/content/partials/browser-rendering/example-workers-binding-screenshots-from-web.mdx +++ b/src/content/partials/browser-rendering/example-workers-binding-screenshots-from-web.mdx @@ -32,7 +32,7 @@ In your `browser-worker` directory, install Cloudflare’s [fork of Puppeteer](/ Browser Rendering can be used with other developer products. You might need a [relational database](/d1/), an [R2 bucket](/r2/) to archive your crawled pages and assets, a [Durable Object](/durable-objects/) to keep your browser instance alive and share it with multiple requests, or [Queues](/queues/) to handle your jobs asynchronously. -For the purpose of this guide, you are going to use a [KV store](/kv/concepts/kv-namespaces/) to cache your screenshots. +For the purpose of this example, we will use a [KV store](/kv/concepts/kv-namespaces/) to cache your screenshots. Create two namespaces, one for production and one for development. From 37ecc0861892b9801fa508a055de44c61b75b6fd Mon Sep 17 00:00:00 2001 From: Kathy <153706637+kathayl@users.noreply.github.com> Date: Tue, 23 Sep 2025 11:30:01 +0100 Subject: [PATCH 16/20] Update src/content/partials/browser-rendering/example-workers-binding-screenshots-from-web.mdx Co-authored-by: ToriLindsay --- .../example-workers-binding-screenshots-from-web.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/partials/browser-rendering/example-workers-binding-screenshots-from-web.mdx b/src/content/partials/browser-rendering/example-workers-binding-screenshots-from-web.mdx index a010acffabce28..c56e257f42a2b7 100644 --- a/src/content/partials/browser-rendering/example-workers-binding-screenshots-from-web.mdx +++ b/src/content/partials/browser-rendering/example-workers-binding-screenshots-from-web.mdx @@ -150,7 +150,7 @@ This Worker instantiates a browser using Puppeteer, opens a new page, navigates If your Worker is running in production, it will store the screenshot to the production KV namespace. If you are running `wrangler dev`, it will store the screenshot to the dev KV namespace. -If the same `"url"` is requested again, it will use the cached version in KV instead, unless it expired. +If the same `url` is requested again, it will use the cached version in KV instead, unless it expired. ## 6. Test From 5cef12aed7e3d6721c7ca839f1321543cd4998d5 Mon Sep 17 00:00:00 2001 From: Kathy <153706637+kathayl@users.noreply.github.com> Date: Tue, 23 Sep 2025 11:34:42 +0100 Subject: [PATCH 17/20] Update example-workers-binding-screenshots-from-web.mdx update wording + header levels --- ...mple-workers-binding-screenshots-from-web.mdx | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/content/partials/browser-rendering/example-workers-binding-screenshots-from-web.mdx b/src/content/partials/browser-rendering/example-workers-binding-screenshots-from-web.mdx index c56e257f42a2b7..408e045ca8806f 100644 --- a/src/content/partials/browser-rendering/example-workers-binding-screenshots-from-web.mdx +++ b/src/content/partials/browser-rendering/example-workers-binding-screenshots-from-web.mdx @@ -1,6 +1,6 @@ import { Render, PackageManagers, WranglerConfig, Tabs, TabItem } from "~/components"; -## 1. Create a Worker project +### 1. Create a Worker project [Cloudflare Workers](/workers/) provides a serverless execution environment that allows you to create new applications or augment existing ones without configuring or maintaining infrastructure. Your Worker application is a container to interact with a headless browser to do actions, such as taking screenshots. @@ -22,13 +22,13 @@ Create a new Worker project named `browser-worker` by running: }} /> -## 2. Install Puppeteer +### 2. Install Puppeteer In your `browser-worker` directory, install Cloudflare’s [fork of Puppeteer](/browser-rendering/platform/puppeteer/): -## 3. Create a KV namespace +### 3. Create a KV namespace Browser Rendering can be used with other developer products. You might need a [relational database](/d1/), an [R2 bucket](/r2/) to archive your crawled pages and assets, a [Durable Object](/durable-objects/) to keep your browser instance alive and share it with multiple requests, or [Queues](/queues/) to handle your jobs asynchronously. @@ -43,7 +43,7 @@ npx wrangler kv namespace create BROWSER_KV_DEMO --preview Take note of the IDs for the next step. -## 4. Configure the Wrangler configuration file +### 4. Configure the Wrangler configuration file Configure your `browser-worker` project's [Wrangler configuration file](/workers/wrangler/configuration/) by adding a browser [binding](/workers/runtime-apis/bindings/) and a [Node.js compatibility flag](/workers/configuration/compatibility-flags/#nodejs-compatibility-flag). Bindings allow your Workers to interact with resources on the Cloudflare developer platform. Your browser `binding` name is set by you, this guide uses the name `MYBROWSER`. Browser bindings allow for communication between a Worker and a headless browser which allows you to do actions such as taking a screenshot, generating a PDF, and more. @@ -65,7 +65,7 @@ kv_namespaces = [ -## 5. Code +### 5. Code Update `src/index.js` with your Worker code: @@ -146,13 +146,13 @@ export default { -This Worker instantiates a browser using Puppeteer, opens a new page, navigates to what you put in the `"url"` parameter, takes a screenshot of the page, stores the screenshot in KV, closes the browser, and responds with the JPEG image of the screenshot. +This Worker instantiates a browser using Puppeteer, opens a new page, navigates to the location of the 'url' parameter, takes a screenshot of the page, stores the screenshot in KV, closes the browser, and responds with the JPEG image of the screenshot. If your Worker is running in production, it will store the screenshot to the production KV namespace. If you are running `wrangler dev`, it will store the screenshot to the dev KV namespace. If the same `url` is requested again, it will use the cached version in KV instead, unless it expired. -## 6. Test +### 6. Test Run `npx wrangler dev` to test your Worker locally or run [`npx wrangler dev --remote`](/workers/wrangler/commands/#dev) to test your Worker remotely before deploying to Cloudflare's global network. @@ -160,7 +160,7 @@ To test taking your first screenshot, go to the following URL: `/?url=https://example.com` -## 7. Deploy +### 7. Deploy Run `npx wrangler deploy` to deploy your Worker to the Cloudflare global network. From 102b471984fd0c31205e20087ee1d21c06612048 Mon Sep 17 00:00:00 2001 From: Kathy <153706637+kathayl@users.noreply.github.com> Date: Tue, 23 Sep 2025 11:35:29 +0100 Subject: [PATCH 18/20] Update get-started.mdx change header levels --- src/content/docs/browser-rendering/get-started.mdx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/content/docs/browser-rendering/get-started.mdx b/src/content/docs/browser-rendering/get-started.mdx index 487c063e35f331..d0a958e7f7cf7b 100644 --- a/src/content/docs/browser-rendering/get-started.mdx +++ b/src/content/docs/browser-rendering/get-started.mdx @@ -14,15 +14,15 @@ There are two ways to use Browser Rendering: This guide will help you choose the right path for your needs and get you started with your first Browser Rendering project. -## REST API +# REST API The REST API is best for situations where you have an existing application and want to perform simple, stateless browser actions. -### Prerequisites +## Prerequisites - Sign up for a [Cloudflare account](https://dash.cloudflare.com/sign-up/workers-and-pages). - Create a [Cloudflare API Token](/fundamentals/api/get-started/create-token/) with `Browser Rendering - Edit` permissions. -### Example: Take a screenshot of the Cloudflare homepage +## Example: Take a screenshot of the Cloudflare homepage -### Example: Navigate to a URL, take a screenshot, and store in KV +## Example: Navigate to a URL, take a screenshot, and store in KV -## Next Steps +# Next Steps If you have any feature requests or notice any bugs, share your feedback directly with the Cloudflare team by joining the [Cloudflare Developers community on Discord](https://discord.cloudflare.com/). - Check out all the [REST API endpoints](/browser-rendering/rest-api/) From be2675c7a8aedc226e4789d0c44b213959dd6a09 Mon Sep 17 00:00:00 2001 From: Kathy <153706637+kathayl@users.noreply.github.com> Date: Tue, 23 Sep 2025 11:55:58 +0100 Subject: [PATCH 19/20] Update get-started.mdx retry header fix part 1 --- src/content/docs/browser-rendering/get-started.mdx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/content/docs/browser-rendering/get-started.mdx b/src/content/docs/browser-rendering/get-started.mdx index d0a958e7f7cf7b..487c063e35f331 100644 --- a/src/content/docs/browser-rendering/get-started.mdx +++ b/src/content/docs/browser-rendering/get-started.mdx @@ -14,15 +14,15 @@ There are two ways to use Browser Rendering: This guide will help you choose the right path for your needs and get you started with your first Browser Rendering project. -# REST API +## REST API The REST API is best for situations where you have an existing application and want to perform simple, stateless browser actions. -## Prerequisites +### Prerequisites - Sign up for a [Cloudflare account](https://dash.cloudflare.com/sign-up/workers-and-pages). - Create a [Cloudflare API Token](/fundamentals/api/get-started/create-token/) with `Browser Rendering - Edit` permissions. -## Example: Take a screenshot of the Cloudflare homepage +### Example: Take a screenshot of the Cloudflare homepage -## Example: Navigate to a URL, take a screenshot, and store in KV +### Example: Navigate to a URL, take a screenshot, and store in KV -# Next Steps +## Next Steps If you have any feature requests or notice any bugs, share your feedback directly with the Cloudflare team by joining the [Cloudflare Developers community on Discord](https://discord.cloudflare.com/). - Check out all the [REST API endpoints](/browser-rendering/rest-api/) From ed269881180eb2886fa59a27bccf1099903971cc Mon Sep 17 00:00:00 2001 From: Kathy <153706637+kathayl@users.noreply.github.com> Date: Tue, 23 Sep 2025 11:58:21 +0100 Subject: [PATCH 20/20] Update example-workers-binding-screenshots-from-web.mdx fix header levels part 2 --- ...xample-workers-binding-screenshots-from-web.mdx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/content/partials/browser-rendering/example-workers-binding-screenshots-from-web.mdx b/src/content/partials/browser-rendering/example-workers-binding-screenshots-from-web.mdx index 408e045ca8806f..f1e16db47da665 100644 --- a/src/content/partials/browser-rendering/example-workers-binding-screenshots-from-web.mdx +++ b/src/content/partials/browser-rendering/example-workers-binding-screenshots-from-web.mdx @@ -1,6 +1,6 @@ import { Render, PackageManagers, WranglerConfig, Tabs, TabItem } from "~/components"; -### 1. Create a Worker project +#### 1. Create a Worker project [Cloudflare Workers](/workers/) provides a serverless execution environment that allows you to create new applications or augment existing ones without configuring or maintaining infrastructure. Your Worker application is a container to interact with a headless browser to do actions, such as taking screenshots. @@ -22,13 +22,13 @@ Create a new Worker project named `browser-worker` by running: }} /> -### 2. Install Puppeteer +#### 2. Install Puppeteer In your `browser-worker` directory, install Cloudflare’s [fork of Puppeteer](/browser-rendering/platform/puppeteer/): -### 3. Create a KV namespace +#### 3. Create a KV namespace Browser Rendering can be used with other developer products. You might need a [relational database](/d1/), an [R2 bucket](/r2/) to archive your crawled pages and assets, a [Durable Object](/durable-objects/) to keep your browser instance alive and share it with multiple requests, or [Queues](/queues/) to handle your jobs asynchronously. @@ -43,7 +43,7 @@ npx wrangler kv namespace create BROWSER_KV_DEMO --preview Take note of the IDs for the next step. -### 4. Configure the Wrangler configuration file +#### 4. Configure the Wrangler configuration file Configure your `browser-worker` project's [Wrangler configuration file](/workers/wrangler/configuration/) by adding a browser [binding](/workers/runtime-apis/bindings/) and a [Node.js compatibility flag](/workers/configuration/compatibility-flags/#nodejs-compatibility-flag). Bindings allow your Workers to interact with resources on the Cloudflare developer platform. Your browser `binding` name is set by you, this guide uses the name `MYBROWSER`. Browser bindings allow for communication between a Worker and a headless browser which allows you to do actions such as taking a screenshot, generating a PDF, and more. @@ -65,7 +65,7 @@ kv_namespaces = [ -### 5. Code +#### 5. Code Update `src/index.js` with your Worker code: @@ -152,7 +152,7 @@ If your Worker is running in production, it will store the screenshot to the pro If the same `url` is requested again, it will use the cached version in KV instead, unless it expired. -### 6. Test +#### 6. Test Run `npx wrangler dev` to test your Worker locally or run [`npx wrangler dev --remote`](/workers/wrangler/commands/#dev) to test your Worker remotely before deploying to Cloudflare's global network. @@ -160,7 +160,7 @@ To test taking your first screenshot, go to the following URL: `/?url=https://example.com` -### 7. Deploy +#### 7. Deploy Run `npx wrangler deploy` to deploy your Worker to the Cloudflare global network.