Skip to content
Cloudflare Docs

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.

Basic usage

  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\";" }
    ]
  }'

JSON response

json response
{
  "success": true,
  "result": {
    "screenshot": "Base64EncodedScreenshotString",
    "content": "<html>...</html>"
  }
}

Advanced usage

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
    }
  }'

JSON response

json response
{
  "success": true,
  "result": {
    "screenshot": "AdvancedBase64Screenshot",
    "content": "<html><body>Advanced Snapshot</body></html>"
  }
}

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.