From eb5589e6f0be92203bbda7c4e2361d07635b6dd2 Mon Sep 17 00:00:00 2001 From: daisyfaithauma Date: Mon, 7 Apr 2025 19:17:10 +0100 Subject: [PATCH 1/9] typescript api --- .../rest-api/content-endpoint.mdx | 23 ++++++++++++++ .../rest-api/pdf-endpoint.mdx | 26 ++++++++++++++++ .../rest-api/scrape-endpoint.mdx | 24 ++++++++++++++ .../rest-api/screenshot-endpoint.mdx | 23 ++++++++++++++ .../browser-rendering/rest-api/snapshot.mdx | 31 +++++++++++++++---- 5 files changed, 121 insertions(+), 6 deletions(-) diff --git a/src/content/docs/browser-rendering/rest-api/content-endpoint.mdx b/src/content/docs/browser-rendering/rest-api/content-endpoint.mdx index 7cd2942f0eb55d3..7ad5193c7c9b4ef 100644 --- a/src/content/docs/browser-rendering/rest-api/content-endpoint.mdx +++ b/src/content/docs/browser-rendering/rest-api/content-endpoint.mdx @@ -5,10 +5,14 @@ sidebar: order: 2 --- +import { Tabs, TabItem } from "~/components"; + The `/content` endpoint instructs the browser to navigate to a website and capture the fully rendered HTML of a page, including the `head` section, after JavaScript execution. This is ideal for capturing content from JavaScript-heavy or interactive websites. ## Basic usage + + Go to `https://example.com` and return the rendered HTML. ```bash @@ -18,6 +22,25 @@ curl -X 'POST' 'https://api.cloudflare.com/client/v4/accounts//browse -d '{"url": "https://example.com"}' ``` + + +```typescript +import Cloudflare from "cloudflare"; + +const client = new Cloudflare({ + apiEmail: process.env["CLOUDFLARE_EMAIL"], // This is the default and can be omitted + apiKey: process.env["CLOUDFLARE_API_KEY"], // This is the default and can be omitted +}); + +const content = await client.browserRendering.content.create({ + account_id: "account_id", +}); + +console.log(content); +``` + + + ## Advanced usage Navigate to `https://cloudflare.com/` but block images and stylesheets from loading. Undesired requests can be blocked by resource type (`rejectResourceTypes`) or by using a regex pattern (`rejectRequestPattern`). The opposite can also be done, only allow requests that match `allowRequestPattern` or `allowResourceTypes`. diff --git a/src/content/docs/browser-rendering/rest-api/pdf-endpoint.mdx b/src/content/docs/browser-rendering/rest-api/pdf-endpoint.mdx index a08c009ab1895fe..632d5534ddbdc4e 100644 --- a/src/content/docs/browser-rendering/rest-api/pdf-endpoint.mdx +++ b/src/content/docs/browser-rendering/rest-api/pdf-endpoint.mdx @@ -5,10 +5,14 @@ sidebar: order: 5 --- +import { Tabs, TabItem } from "~/components"; + The `/pdf` endpoint instructs the browser to render the webpage as a PDF document. ## Basic usage + + Navigate to `https://example.com/` and inject custom CSS and an external stylesheet. Then return the rendered page as a PDF. ```bash @@ -25,6 +29,28 @@ curl -X POST 'https://api.cloudflare.com/client/v4/accounts//browser- --output "output.pdf" ``` + + +```typescript +import Cloudflare from "cloudflare"; + +const client = new Cloudflare({ + apiEmail: process.env["CLOUDFLARE_EMAIL"], // This is the default and can be omitted + apiKey: process.env["CLOUDFLARE_API_KEY"], // This is the default and can be omitted +}); + +const pdf = await client.browserRendering.pdf.create({ + account_id: "account_id", +}); + +console.log(pdf); + +const content = await pdf.blob(); +console.log(content); +``` + + + ## Advanced usage Navigate to `https://example.com`, first setting an additional HTTP request header and configuring the page size (`viewport`). Then, wait until there are no more than 2 network connections for at least 500 ms, or until the maximum timeout of 4500 ms is reached, before considering the page loaded and returning the rendered PDF document. diff --git a/src/content/docs/browser-rendering/rest-api/scrape-endpoint.mdx b/src/content/docs/browser-rendering/rest-api/scrape-endpoint.mdx index d47765b119bef0a..2bd6cdd5e7c59fb 100644 --- a/src/content/docs/browser-rendering/rest-api/scrape-endpoint.mdx +++ b/src/content/docs/browser-rendering/rest-api/scrape-endpoint.mdx @@ -5,10 +5,14 @@ sidebar: order: 7 --- +import { Tabs, TabItem } from "~/components"; + The `/scrape` endpoint extracts structured data from specific elements on a webpage, returning details such as element dimensions and inner HTML. ## Basic usage + + Go to `https://example.com` and extract metadata from all `h1` and `a` elements in the DOM. ```bash @@ -64,6 +68,26 @@ curl -X POST 'https://api.cloudflare.com/client/v4/accounts//browser- } ``` + + +```javascript +import Cloudflare from "cloudflare"; + +const client = new Cloudflare({ + apiEmail: process.env["CLOUDFLARE_EMAIL"], // This is the default and can be omitted + apiKey: process.env["CLOUDFLARE_API_KEY"], // This is the default and can be omitted +}); + +const scrapes = await client.browserRendering.scrape.create({ + account_id: "account_id", + elements: [{ selector: "selector" }], +}); + +console.log(scrapes); +``` + + + Many more options exist, like setting HTTP credentials using `authenticate`, setting `cookies`, and using `gotoOptions` to control page load behaviour - check the endpoint [reference](/api/resources/browser_rendering/subresources/scrape/methods/create/) for all available parameters. ### Response fields diff --git a/src/content/docs/browser-rendering/rest-api/screenshot-endpoint.mdx b/src/content/docs/browser-rendering/rest-api/screenshot-endpoint.mdx index 8002c210fef34f8..baaf7188d2ec0cc 100644 --- a/src/content/docs/browser-rendering/rest-api/screenshot-endpoint.mdx +++ b/src/content/docs/browser-rendering/rest-api/screenshot-endpoint.mdx @@ -5,10 +5,14 @@ sidebar: order: 3 --- +import { Tabs, TabItem } from "~/components"; + The `/screenshot` endpoint renders the webpage by processing its HTML and JavaScript, then captures a screenshot of the fully rendered page. ## Basic usage + + Sets the HTML content of the page to `Hello World!` and then takes a screenshot. The option `omitBackground` hides the default white background and allows capturing screenshots with transparency. ```bash @@ -24,6 +28,25 @@ curl -X POST 'https://api.cloudflare.com/client/v4/accounts//browser- --output "screenshot.png" ``` + + +```typescript +import Cloudflare from "cloudflare"; + +const client = new Cloudflare({ + apiEmail: process.env["CLOUDFLARE_EMAIL"], // This is the default and can be omitted + apiKey: process.env["CLOUDFLARE_API_KEY"], // This is the default and can be omitted +}); + +const screenshot = await client.browserRendering.screenshot.create({ + account_id: "account_id", +}); + +console.log(screenshot.status); +``` + + + For more options to control the final screenshot, like `clip`, `captureBeyondViewport`, `fullPage` and others, check the endpoint [reference](/api/resources/browser_rendering/subresources/screenshot/methods/create/). ## Advanced usage diff --git a/src/content/docs/browser-rendering/rest-api/snapshot.mdx b/src/content/docs/browser-rendering/rest-api/snapshot.mdx index 165a1312c143874..d51be4a34d6e82f 100644 --- a/src/content/docs/browser-rendering/rest-api/snapshot.mdx +++ b/src/content/docs/browser-rendering/rest-api/snapshot.mdx @@ -5,10 +5,14 @@ sidebar: order: 6 --- +import { Tabs, TabItem } from "~/components"; + The `/snapshot` endpoint captures both the HTML content and a screenshot of the webpage in one request. It returns the HTML as a text string and the screenshot as a Base64-encoded image. ## Basic usage + + 1. Go to `https://example.com/`. 2. Inject custom JavaScript. 3. Capture the rendered HTML. @@ -26,9 +30,7 @@ curl -X POST 'https://api.cloudflare.com/client/v4/accounts//browser- }' ``` -### JSON response - -```json title="json response" +```json output { "success": true, "result": { @@ -38,6 +40,25 @@ curl -X POST 'https://api.cloudflare.com/client/v4/accounts//browser- } ``` + + +```javascript +import Cloudflare from "cloudflare"; + +const client = new Cloudflare({ + apiEmail: process.env["CLOUDFLARE_EMAIL"], // This is the default and can be omitted + apiKey: process.env["CLOUDFLARE_API_KEY"], // This is the default and can be omitted +}); + +const snapshot = await client.browserRendering.snapshot.create({ + account_id: "account_id", +}); + +console.log(snapshot.content); +``` + + + ## Advanced usage The `html` property in the JSON payload, it sets the html to `Advanced Snapshot` then does the following steps: @@ -69,9 +90,7 @@ curl -X POST 'https://api.cloudflare.com/client/v4/accounts//browser- }' ``` -### JSON response - -```json title="json response" +```json output { "success": true, "result": { From 55540e0976fe6655cf32132256dcc6e372e5aa7d Mon Sep 17 00:00:00 2001 From: daisyfaithauma Date: Mon, 7 Apr 2025 19:44:16 +0100 Subject: [PATCH 2/9] more sdk --- .../rest-api/links-endpoint.mdx | 22 ++++++++++++ .../rest-api/markdown-endpoint.mdx | 35 ++++++++++++++----- 2 files changed, 48 insertions(+), 9 deletions(-) diff --git a/src/content/docs/browser-rendering/rest-api/links-endpoint.mdx b/src/content/docs/browser-rendering/rest-api/links-endpoint.mdx index 2a863bff91a9377..425b95e431116bc 100644 --- a/src/content/docs/browser-rendering/rest-api/links-endpoint.mdx +++ b/src/content/docs/browser-rendering/rest-api/links-endpoint.mdx @@ -5,10 +5,14 @@ sidebar: order: 10 --- +import { Tabs, TabItem } from "~/components"; + The `/links` endpoint retrieves all links from a webpage. It can be used to extract all links from a page, including those that are hidden. ## Basic usage + + This example grabs all links from the Cloudflare Developers homepage. The response will be a JSON array containing the links found on the page. @@ -100,6 +104,24 @@ curl -X POST 'https://api.cloudflare.com/client/v4/accounts//browser- } ``` + + +```javascript +import Cloudflare from "cloudflare"; + +const client = new Cloudflare({ + apiEmail: process.env["CLOUDFLARE_EMAIL"], // This is the default and can be omitted + apiKey: process.env["CLOUDFLARE_API_KEY"], // This is the default and can be omitted +}); + +const links = await client.browserRendering.links.create({ + account_id: "account_id", +}); + +console.log(links); +``` + + ## Advanced usage In this example we can pass a `visibleLinksOnly` parameter to only return links that are visible on the page. diff --git a/src/content/docs/browser-rendering/rest-api/markdown-endpoint.mdx b/src/content/docs/browser-rendering/rest-api/markdown-endpoint.mdx index 1596cef316848f6..a53879df7887b7b 100644 --- a/src/content/docs/browser-rendering/rest-api/markdown-endpoint.mdx +++ b/src/content/docs/browser-rendering/rest-api/markdown-endpoint.mdx @@ -5,12 +5,16 @@ sidebar: order: 10 --- +import { Tabs, TabItem } from "~/components"; + The `/markdown` endpoint retrieves a webpage's content and converts it into Markdown format. You can specify a URL and optional parameters to refine the extraction process. ## Basic usage ### Using a URL + + This example fetches the Markdown representation of a webpage. ```bash @@ -22,15 +26,32 @@ curl -X 'POST' 'https://api.cloudflare.com/client/v4/accounts//browse }' ``` -### JSON response +```json output -```json title="json response" -{ "success": true, "result": "# Example Domain\n\nThis domain is for use in illustrative examples in documents. You may use this domain in literature without prior coordination or asking for permission.\n\n[More information...](https://www.iana.org/domains/example)" } ``` + + +```javascript +import Cloudflare from "cloudflare"; + +const client = new Cloudflare({ + apiEmail: process.env["CLOUDFLARE_EMAIL"], // This is the default and can be omitted + apiKey: process.env["CLOUDFLARE_API_KEY"], // This is the default and can be omitted +}); + +const markdown = await client.browserRendering.markdown.create({ + account_id: "account_id", +}); + +console.log(markdown); +``` + + + ### Use raw HTML Instead of fetching the content by specifying the URL, you can provide raw HTML content directly. @@ -44,9 +65,7 @@ curl -X 'POST' 'https://api.cloudflare.com/client/v4/accounts//browse }' ``` -### JSON response - -```json title="json response" +```json output { "success": true, "result": "Hello World" @@ -67,9 +86,7 @@ curl -X 'POST' 'https://api.cloudflare.com/client/v4/accounts//browse }' ``` -### JSON response - -```json title="json response" +```json output { "success": true, "result": "# Example Domain\n\nThis domain is for use in illustrative examples in documents. You may use this domain in literature without prior coordination or asking for permission.\n\n[More information...](https://www.iana.org/domains/example)" From d1df98d9715936e7eb1ad21be98ce12a3e110461 Mon Sep 17 00:00:00 2001 From: daisyfaithauma Date: Wed, 9 Apr 2025 12:37:52 +0100 Subject: [PATCH 3/9] json typescript --- .../rest-api/json-endpoint.mdx | 21 ++++++++++++++++--- 1 file changed, 18 insertions(+), 3 deletions(-) diff --git a/src/content/docs/browser-rendering/rest-api/json-endpoint.mdx b/src/content/docs/browser-rendering/rest-api/json-endpoint.mdx index b9b484eb19d39c2..55e7f8b64b1d446 100644 --- a/src/content/docs/browser-rendering/rest-api/json-endpoint.mdx +++ b/src/content/docs/browser-rendering/rest-api/json-endpoint.mdx @@ -54,7 +54,6 @@ curl --request POST 'https://api.cloudflare.com/client/v4/accounts/CF_ACCOUNT_ID }' ``` - ```json output collapse={15-48} { "success": true, @@ -100,7 +99,6 @@ curl --request POST 'https://api.cloudflare.com/client/v4/accounts/CF_ACCOUNT_ID }' ``` - ```json output "success": true, @@ -151,7 +149,6 @@ curl --request POST 'https://api.cloudflare.com/client/v4/accounts/CF_ACCOUNT_ID }' ``` - ```json output collapse={13-68} { "success": true, @@ -221,3 +218,21 @@ curl --request POST 'https://api.cloudflare.com/client/v4/accounts/CF_ACCOUNT_ID } } ``` + +## Using TypeScript SDK + +Below is an example using the TypeScript SDK: + +````typescript +import Cloudflare from 'cloudflare'; + +const client = new Cloudflare({ + apiEmail: process.env['CLOUDFLARE_EMAIL'], // This is the default and can be omitted + apiKey: process.env['CLOUDFLARE_API_KEY'], // This is the default and can be omitted +}); + +const json = await client.browserRendering.json.create({ account_id: 'account_id' }); + +console.log(json); +```s +```` From a747728c80028ef6433336d22e072d66f553b165 Mon Sep 17 00:00:00 2001 From: daisyfaithauma Date: Wed, 9 Apr 2025 12:56:51 +0100 Subject: [PATCH 4/9] Update json-endpoint.mdx --- src/content/docs/browser-rendering/rest-api/json-endpoint.mdx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/content/docs/browser-rendering/rest-api/json-endpoint.mdx b/src/content/docs/browser-rendering/rest-api/json-endpoint.mdx index 55e7f8b64b1d446..f90b6cc93ad9250 100644 --- a/src/content/docs/browser-rendering/rest-api/json-endpoint.mdx +++ b/src/content/docs/browser-rendering/rest-api/json-endpoint.mdx @@ -234,5 +234,4 @@ const client = new Cloudflare({ const json = await client.browserRendering.json.create({ account_id: 'account_id' }); console.log(json); -```s -```` +``` From 69ae77928246c52b8d612a398957376e36152d3a Mon Sep 17 00:00:00 2001 From: daisyfaithauma Date: Wed, 9 Apr 2025 12:58:35 +0100 Subject: [PATCH 5/9] update --- src/content/docs/browser-rendering/rest-api/json-endpoint.mdx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/content/docs/browser-rendering/rest-api/json-endpoint.mdx b/src/content/docs/browser-rendering/rest-api/json-endpoint.mdx index f90b6cc93ad9250..3d396db61f1b8d1 100644 --- a/src/content/docs/browser-rendering/rest-api/json-endpoint.mdx +++ b/src/content/docs/browser-rendering/rest-api/json-endpoint.mdx @@ -235,3 +235,4 @@ const json = await client.browserRendering.json.create({ account_id: 'account_id console.log(json); ``` +```` From f7ea2b4dc82b235cc839f8356e7b5c518883e8b9 Mon Sep 17 00:00:00 2001 From: daisyfaithauma Date: Wed, 9 Apr 2025 13:00:20 +0100 Subject: [PATCH 6/9] Update json-endpoint.mdx --- src/content/docs/browser-rendering/rest-api/json-endpoint.mdx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/content/docs/browser-rendering/rest-api/json-endpoint.mdx b/src/content/docs/browser-rendering/rest-api/json-endpoint.mdx index 3d396db61f1b8d1..f90b6cc93ad9250 100644 --- a/src/content/docs/browser-rendering/rest-api/json-endpoint.mdx +++ b/src/content/docs/browser-rendering/rest-api/json-endpoint.mdx @@ -235,4 +235,3 @@ const json = await client.browserRendering.json.create({ account_id: 'account_id console.log(json); ``` -```` From f8cefeb4a9acf0c76ef39d95dd2eb2c0e1171941 Mon Sep 17 00:00:00 2001 From: daisyfaithauma Date: Mon, 14 Apr 2025 15:23:31 +0100 Subject: [PATCH 7/9] removed json --- .../rest-api/json-endpoint.mdx | 17 ----------------- 1 file changed, 17 deletions(-) diff --git a/src/content/docs/browser-rendering/rest-api/json-endpoint.mdx b/src/content/docs/browser-rendering/rest-api/json-endpoint.mdx index f90b6cc93ad9250..7633073b11f9b9f 100644 --- a/src/content/docs/browser-rendering/rest-api/json-endpoint.mdx +++ b/src/content/docs/browser-rendering/rest-api/json-endpoint.mdx @@ -218,20 +218,3 @@ curl --request POST 'https://api.cloudflare.com/client/v4/accounts/CF_ACCOUNT_ID } } ``` - -## Using TypeScript SDK - -Below is an example using the TypeScript SDK: - -````typescript -import Cloudflare from 'cloudflare'; - -const client = new Cloudflare({ - apiEmail: process.env['CLOUDFLARE_EMAIL'], // This is the default and can be omitted - apiKey: process.env['CLOUDFLARE_API_KEY'], // This is the default and can be omitted -}); - -const json = await client.browserRendering.json.create({ account_id: 'account_id' }); - -console.log(json); -``` From 7ece23f792e13186f8fa20ce2af872bccb41fe9e Mon Sep 17 00:00:00 2001 From: daisyfaithauma Date: Thu, 17 Apr 2025 13:35:42 +0100 Subject: [PATCH 8/9] typescript SDK --- .../rest-api/json-endpoint.mdx | 25 +++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/src/content/docs/browser-rendering/rest-api/json-endpoint.mdx b/src/content/docs/browser-rendering/rest-api/json-endpoint.mdx index 7633073b11f9b9f..38761deaff803ed 100644 --- a/src/content/docs/browser-rendering/rest-api/json-endpoint.mdx +++ b/src/content/docs/browser-rendering/rest-api/json-endpoint.mdx @@ -5,6 +5,8 @@ sidebar: order: 9 --- +import { Tabs, TabItem } from "~/components"; + The `/json` endpoint extracts structured data from a webpage. You can specify the expected output using either a `prompt` or a `response_format` parameter which accepts a JSON schema. The endpoint returns the extracted data in JSON format. :::note[Note] @@ -15,6 +17,8 @@ The `/json` endpoint leverages [Workers AI](/workers-ai/) for data extraction. U ## Basic Usage + + ### With a Prompt and JSON schema This example captures webpage data by providing both a prompt and a JSON schema. The prompt guides the extraction process, while the JSON schema defines the expected structure of the output. @@ -218,3 +222,24 @@ curl --request POST 'https://api.cloudflare.com/client/v4/accounts/CF_ACCOUNT_ID } } ``` + + + +Below is an example using the TypeScript SDK: + +```typescript +import Cloudflare from "cloudflare"; + +const client = new Cloudflare({ + apiEmail: process.env["CLOUDFLARE_EMAIL"], // This is the default and can be omitted + apiKey: process.env["CLOUDFLARE_API_KEY"], // This is the default and can be omitted +}); + +const json = await client.browserRendering.json.create({ + account_id: "account_id", +}); + +console.log(json); +``` + + From 6beebef82d9cb37d15269c2fdc49c5ff3a874a7a Mon Sep 17 00:00:00 2001 From: daisyfaithauma Date: Thu, 17 Apr 2025 13:37:43 +0100 Subject: [PATCH 9/9] labelling --- src/content/docs/browser-rendering/rest-api/links-endpoint.mdx | 2 +- .../docs/browser-rendering/rest-api/markdown-endpoint.mdx | 2 +- src/content/docs/browser-rendering/rest-api/scrape-endpoint.mdx | 2 +- src/content/docs/browser-rendering/rest-api/snapshot.mdx | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/content/docs/browser-rendering/rest-api/links-endpoint.mdx b/src/content/docs/browser-rendering/rest-api/links-endpoint.mdx index 425b95e431116bc..24d4beb8b168c9b 100644 --- a/src/content/docs/browser-rendering/rest-api/links-endpoint.mdx +++ b/src/content/docs/browser-rendering/rest-api/links-endpoint.mdx @@ -106,7 +106,7 @@ curl -X POST 'https://api.cloudflare.com/client/v4/accounts//browser- -```javascript +```typescript import Cloudflare from "cloudflare"; const client = new Cloudflare({ diff --git a/src/content/docs/browser-rendering/rest-api/markdown-endpoint.mdx b/src/content/docs/browser-rendering/rest-api/markdown-endpoint.mdx index a53879df7887b7b..44ec9291d1f9421 100644 --- a/src/content/docs/browser-rendering/rest-api/markdown-endpoint.mdx +++ b/src/content/docs/browser-rendering/rest-api/markdown-endpoint.mdx @@ -35,7 +35,7 @@ curl -X 'POST' 'https://api.cloudflare.com/client/v4/accounts//browse -```javascript +```typescript import Cloudflare from "cloudflare"; const client = new Cloudflare({ diff --git a/src/content/docs/browser-rendering/rest-api/scrape-endpoint.mdx b/src/content/docs/browser-rendering/rest-api/scrape-endpoint.mdx index 2bd6cdd5e7c59fb..c437d77ad8d015c 100644 --- a/src/content/docs/browser-rendering/rest-api/scrape-endpoint.mdx +++ b/src/content/docs/browser-rendering/rest-api/scrape-endpoint.mdx @@ -70,7 +70,7 @@ curl -X POST 'https://api.cloudflare.com/client/v4/accounts//browser- -```javascript +```typescript import Cloudflare from "cloudflare"; const client = new Cloudflare({ diff --git a/src/content/docs/browser-rendering/rest-api/snapshot.mdx b/src/content/docs/browser-rendering/rest-api/snapshot.mdx index d51be4a34d6e82f..5d2eceafb6702ed 100644 --- a/src/content/docs/browser-rendering/rest-api/snapshot.mdx +++ b/src/content/docs/browser-rendering/rest-api/snapshot.mdx @@ -42,7 +42,7 @@ curl -X POST 'https://api.cloudflare.com/client/v4/accounts//browser- -```javascript +```typescript import Cloudflare from "cloudflare"; const client = new Cloudflare({