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/json-endpoint.mdx b/src/content/docs/browser-rendering/rest-api/json-endpoint.mdx index b9b484eb19d39c2..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. @@ -54,7 +58,6 @@ curl --request POST 'https://api.cloudflare.com/client/v4/accounts/CF_ACCOUNT_ID }' ``` - ```json output collapse={15-48} { "success": true, @@ -100,7 +103,6 @@ curl --request POST 'https://api.cloudflare.com/client/v4/accounts/CF_ACCOUNT_ID }' ``` - ```json output "success": true, @@ -151,7 +153,6 @@ curl --request POST 'https://api.cloudflare.com/client/v4/accounts/CF_ACCOUNT_ID }' ``` - ```json output collapse={13-68} { "success": true, @@ -221,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); +``` + + 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..24d4beb8b168c9b 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- } ``` + + +```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 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..44ec9291d1f9421 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)" } ``` + + +```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 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)" 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..c437d77ad8d015c 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- } ``` + + +```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 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..5d2eceafb6702ed 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- } ``` + + +```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 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": {