JavaScript Support

JavaScript behaves differently across the two endpoints. Pick the right one for your use case.

HTML versus Screenshot at a glance

Capability	HTML endpoint	Screenshot endpoint
Run inline scripts	Yes	No
Wait for selector	Yes	Yes
ms_delay	Yes	Yes
30 second budget	Yes	Yes

The HTML endpoint executes any <script> tags you include in your markup. The Screenshot endpoint loads the URL in Chrome, lets the page run its own scripts, and captures the result. You cannot inject custom JavaScript into a URL screenshot.

HTML and CSS API JavaScript

Inline <script> tags execute before capture, up to a 30 second budget.

Inline scripts

{
    "html": "<div id='content'>Loading...</div><script>document.getElementById('content').innerHTML = 'Hello ' + new Date().toLocaleString();</script>"
}

External scripts

{
    "html": "<div id='chart'></div><script src='https://cdn.jsdelivr.net/npm/chart.js'></script><script>new Chart(document.getElementById('chart'), { /* chart config */ });</script>"
}

Wait for content to render

Use wait_for_selector to capture only after a specific element exists. Pair with ms_delay for animations:

{
    "html": "<div id='root'></div>...",
    "wait_for_selector": "#root .ready"
}

See wait_for_selector docs and ms_delay docs.

Screenshot API behavior

The Screenshot endpoint cannot run user-supplied JavaScript. The page runs its own scripts, and we capture the rendered output.

Wait for an element on the target page

{
    "url": "https://example.com",
    "wait_for_selector": "#dynamic-content"
}

Handle iframes and embeds

wait_for_selector does not see inside iframes. Use a fixed ms_delay instead:

{
    "url": "https://example.com",
    "ms_delay": 5000
}

Security and CORS

• External scripts must be served over HTTPS from a public origin.
• Cross-origin fetches inside your script need the target server to send Access-Control-Allow-Origin.
• Critical scripts should be hosted on a CDN you trust. We do not block external scripts, but a CDN outage will time out your render.

Debugging tips

console.log output is not visible in the API response. Surface debug info into the DOM if you need it:

{
    "html": "<div id='out'></div><script>try { /* code */ } catch (e) { document.getElementById('out').textContent = 'Error: ' + e.message; }</script>"
}

Test the same HTML in your local browser at the same viewport before sending. The testing guide covers reproducing API renders locally.