Skip to content
Cloudflare Docs

/snapshot - Take a webpage snapshot

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.

Endpoint

https://api.cloudflare.com/client/v4/accounts/<accountId>/browser-rendering/snapshot

Required fields

You must provide either url or html:

  • url (string)
  • html (string)

Common use cases

  • Capture both the rendered HTML and a visual screenshot in a single API call
  • Archive pages with visual and structural data together
  • Build monitoring tools that compare visual and DOM differences over time

Basic usage

Capture a snapshot from a URL

  1. Go to https://example.com/.
  2. Inject custom JavaScript.
  3. Capture the rendered HTML.
  4. Take a screenshot.
Terminal window
curl -X POST 'https://api.cloudflare.com/client/v4/accounts/<accountId>/browser-rendering/snapshot' \
  -H 'Authorization: Bearer <apiToken>' \
  -H 'Content-Type: application/json' \
  -d '{
    "url": "https://example.com/",
    "addScriptTag": [
      { "content": "document.body.innerHTML = \"Snapshot Page\";" }
    ]
  }'
{
  "success": true,
  "result": {
    "screenshot": "Base64EncodedScreenshotString",
    "content": "<html>...</html>"
  }
}

Advanced usage

Create a snapshot from custom HTML

The html property in the JSON payload, it sets the html to <html><body>Advanced Snapshot</body></html> then does the following steps:

  1. Disable JavaScript.
  2. Sets the screenshot to fullPage.
  3. Changes the page size (viewport).
  4. Waits up to 30000ms or until the DOMContentLoaded event fires.
  5. Returns the rendered HTML content and a base-64 encoded screenshot of the page.
Terminal window
curl -X POST 'https://api.cloudflare.com/client/v4/accounts/<accountId>/browser-rendering/snapshot' \
  -H 'Authorization: Bearer <apiToken>' \
  -H 'Content-Type: application/json' \
  -d '{
    "html": "<html><body>Advanced Snapshot</body></html>",
    "setJavaScriptEnabled": false,
    "screenshotOptions": {
       "fullPage": true
    },
    "viewport": {
      "width": 1200,
      "height": 800
    },
    "gotoOptions": {
      "waitUntil": "domcontentloaded",
      "timeout": 30000
    }
  }'
{
  "success": true,
  "result": {
    "screenshot": "AdvancedBase64Screenshot",
    "content": "<html><body>Advanced Snapshot</body></html>"
  }
}

Set a custom user agent

You can change the user agent at the page level by passing userAgent as a top-level parameter in the JSON body. This is useful if the target website serves different content based on the user agent.

Many more options exist, like setting HTTP credentials using authenticate, setting cookies, and using gotoOptions to control page load behaviour - check the endpoint reference for all available parameters.