URL Rendering
Capture complete pages with deterministic viewport, wait behavior, cleanup controls, and output dimensions.
Use URL rendering when the whole page or viewport is the subject.
json{ "url": "https://example.com/pricing", "viewport": { "width": 1440, "height": 900 }, "wait_for": "networkidle", "device": "browser-macos", "background_preset": "ocean", "shadow": "soft"}
Viewport
If you do not pass viewport, ScreenFramed uses a sensible desktop viewport. Device frames can override that default with a matching device-sized viewport.
json{ "url": "https://example.com", "viewport": { "width": 1440, "height": 900 }}
json{ "url": "https://example.com", "device": "iphone-16-pro"}
json{ "url": "https://example.com/docs", "full_page": true, "output": { "format": "png" }}
Wait behavior
| Value | Use when |
|---|---|
load | The page renders completely on the load event. |
domcontentloaded | You need a fast capture and do not rely on late network requests. |
networkidle | SPAs and dashboards need a quiet network before capture. |
| Number | You want a fixed delay in milliseconds, such as 1500. |
Clean up distracting UI
json{ "url": "https://example.com", "block": ["cookie-banners", "chat-widgets"], "hide_selectors": [".newsletter-modal", "[data-testid='debug-toolbar']"], "inject_css": ".promo-bar { display: none !important; }"}
Use block for common categories. Use hide_selectors when you control the target page or know exactly what should be hidden.
Raw screenshot vs styled render
| Endpoint | Output | Best for |
|---|---|---|
/v1/raw | Unstyled PNG browser screenshot | Internal debugging and baseline captures. |
/v1/capture | Styled composed image | Published docs, marketing pages, social images, app stores, and repeatable assets. |
Production guidance
For pages that hydrate slowly, prefer wait_for: "networkidle" or a numeric delay. For batch jobs, prefer async: true so your own job runner does not wait on a long HTTP response.