RenderScreenshot

Capture Options

Control what portion of the page to capture: just the viewport, the full scrollable page, or a specific element.

Capture Modes

Mode Description
viewport Capture visible viewport only (default)
full_page Capture entire scrollable page
element Capture a specific DOM element

Basic Usage

Viewport Capture (Default)

{
  "url": "https://example.com",
  "capture": {
    "mode": "viewport"
  }
}

Full Page Capture

{
  "url": "https://example.com",
  "capture": {
    "mode": "full_page"
  }
}

Element Capture

{
  "url": "https://example.com",
  "capture": {
    "mode": "element",
    "selector": "#main-content"
  }
}

Full Configuration

{
  "capture": {
    "mode": "full_page",
    "selector": "#main-content",
    "selector_required": false,
    "scroll": {
      "simulate": true,
      "delay": 400,
      "step": 800,
      "max_height": 16000
    },
    "clip": {
      "x": 0,
      "y": 0,
      "width": 800,
      "height": 600
    },
    "beyond_viewport": true
  }
}

Parameters

Parameter Type Default Description
mode string viewport Capture mode: viewport, full_page, element
selector string — CSS selector for element mode
selector_required boolean false Fail if selector not found
scroll.simulate boolean false Scroll to trigger lazy loading
scroll.delay integer 400 Milliseconds between scroll steps
scroll.step integer viewport height Pixels per scroll step
scroll.max_height integer 16000 Maximum capture height in pixels
clip object — Crop to specific region
beyond_viewport boolean true Capture content outside viewport bounds

Scroll Simulation for Lazy Loading

Many websites use lazy loading. Enable scroll simulation to load all content:

{
  "url": "https://example.com/feed",
  "capture": {
    "mode": "full_page",
    "scroll": {
      "simulate": true,
      "delay": 500
    }
  }
}

The browser will scroll through the page, waiting at each step for content to load.

Element Capture

Capture a specific element by CSS selector:

{
  "url": "https://example.com",
  "capture": {
    "mode": "element",
    "selector": ".article-content",
    "selector_required": true
  }
}

Set selector_required: true to fail if the element isn't found, rather than falling back to viewport capture.

Clip Region

Crop the output to a specific region:

{
  "url": "https://example.com",
  "capture": {
    "clip": {
      "x": 100,
      "y": 200,
      "width": 500,
      "height": 300
    }
  }
}

Maximum Height

For very long pages, limit the capture height:

{
  "url": "https://example.com/infinite-scroll",
  "capture": {
    "mode": "full_page",
    "scroll": {
      "max_height": 8000
    }
  }
}

GET Request Parameters

Query Param Maps to
full_page capture.mode = "full_page"
selector capture.selector (sets mode to element) 
GET /v1/screenshot?url=https://example.com&full_page=true
GET /v1/screenshot?url=https://example.com&selector=.main-content

Examples

Capture Product Card

curl -X POST https://api.renderscreenshot.com/v1/screenshot \
  -H "Authorization: Bearer rs_live_xxxxx" \
  -H "Content-Type: application/json" \
  -d '{
    "url": "https://store.example.com/product/123",
    "capture": {
      "mode": "element",
      "selector": ".product-card",
      "selector_required": true
    }
  }' \
  --output product.png

Full Blog Post with Lazy Images

curl -X POST https://api.renderscreenshot.com/v1/screenshot \
  -H "Authorization: Bearer rs_live_xxxxx" \
  -H "Content-Type: application/json" \
  -d '{
    "url": "https://blog.example.com/article",
    "capture": {
      "mode": "full_page",
      "scroll": {
        "simulate": true,
        "delay": 600
      }
    }
  }' \
  --output article.png

See Also

Was this page helpful?