> ## Documentation Index
> Fetch the complete documentation index at: https://docs.screenframed.com/llms.txt
> Use this file to discover all available pages before exploring further.

# URL Rendering

Capture complete pages with deterministic viewport, wait behavior, cleanup controls, and output dimensions.

URL rendering captures a page as the main subject. Use it for landing pages, dashboards, docs pages, changelog screens, and social images where the whole viewport matters.



## Basic request

```json
{
  "url": "https://example.com",
  "device": "browser-macos",
  "background_preset": "midnight",
  "shadow": "soft",
  "aspect_ratio": "16:9"
}
```

## Viewport

The default browser viewport is `1440x900`. Override it when the source page should render at a specific size:

```json
{
  "url": "https://example.com/dashboard",
  "viewport": {
    "width": 1280,
    "height": 800
  }
}
```

Physical device frames set matching viewport, DPR, user agent, mobile emulation, and touch emulation automatically.

## Wait behavior

Use `wait_for` to control when capture happens:

| Value | Behavior |
|---|---|
| `load` | Wait for the load event. |
| `domcontentloaded` | Capture earlier after DOM readiness. |
| `networkidle` | Wait for network to settle. |
| number | Wait that many milliseconds after navigation. |

```json
{
  "url": "https://example.com",
  "wait_for": "networkidle"
}
```

## Clean up distracting UI

Hide or block overlays before capture:

```json
{
  "url": "https://example.com",
  "block": ["cookie-banners", "ads", "chat-widgets", "popups"],
  "hide_selectors": [".cookie-banner", ".debug-toolbar"],
  "inject_css": ".intercom-lightweight-app { display: none !important; }"
}
```

## Full page capture

Use `full_page` when you need the entire scrollable document:

```json
{
  "url": "https://example.com/docs",
  "full_page": true,
  "background_style": "none",
  "output": { "format": "png" }
}
```

Full-page captures can be taller and slower. For published assets, a fixed viewport or specific element is usually easier to design around.

## Raw screenshot vs styled render

| Endpoint | Use for |
|---|---|
| `/v1/capture` | Styled output, device frames, backgrounds, text, caching, CDN URLs. |
| `/v1/raw` | Plain PNG browser screenshot for debugging or visual baselines. |

## Production guidance

**Repeatable URL captures**

**Pin the viewport**

Use a fixed `viewport` or `device` for repeatable layout.
  **Wait for the right condition**

Use `networkidle` or a numeric delay for pages that hydrate after load.
  **Remove unstable overlays**

Block cookie banners, ads, popups, and chat widgets before capture.
  **Use cache intentionally**

Set `cache_ttl` based on how often the source page changes.