DEV Community

Custodia-Admin
Custodia-Admin

Posted on • Originally published at pagebolt.dev

Screenshot API — Complete Guide

#screenshot #api #guide #webdev

Screenshot API — Complete Guide

Website screenshots are everywhere. Monitoring. Testing. Documentation. Social previews. But how do you actually take them?

This guide covers every approach: from a single screenshot to 1,000 screenshots in a pipeline, on any device, with any tech stack.

Quick Navigation

Starting out? → How to Take a Screenshot in JavaScript
Using Python? → Screenshot in Python with requests
Automating screenshots? → Screenshots in Your CI/CD Pipeline
Need to monitor changes? → Monitor Website Changes Automatically
Comparing APIs? → PageBolt vs Competitors

Fundamentals

What Is a Screenshot API?

A screenshot API is an HTTP endpoint that captures a website and returns a PNG/PDF. No browser management. No JavaScript. One POST call.

curl -X POST https://api.pagebolt.dev/v1/screenshot \
  -H "Authorization: Bearer YOUR_KEY" \
  -H "Content-Type: application/json" \
  -d '{"url": "https://example.com"}' \
  --output screenshot.png
Enter fullscreen mode Exit fullscreen mode

Why Not Use Puppeteer / Selenium?

Puppeteer:

  • 300MB+ dependency
  • Browser startup: 2-5 seconds per screenshot
  • Memory intensive
  • Fails in serverless
  • Version conflicts with system Chrome

Screenshot API:

  • One HTTP call
  • 100ms response time
  • Works everywhere (Node.js, Python, serverless, CI/CD)
  • No infrastructure management

By Language

JavaScript

How to Take a Screenshot of a Website with JavaScript

  • Node.js with fetch
  • Browser with arrayBuffer() → base64
  • React component
  • Next.js API route
  • Batch screenshots with Promise.all()

How to Capture a Full-Page Screenshot with JavaScript

  • Full page rendering in one call
  • Device emulation (iPhone, iPad, desktop)
  • Batch full-page screenshots

Python

How to Take a Screenshot of a Website in Python with requests

  • Synchronous: requests library
  • Asynchronous: httpx for batch screenshots
  • Error handling (401, 429 status codes)
  • Web scraping verification
  • E-commerce testing

Other Languages

  • Go: http.Post() to API endpoint
  • Ruby: Net::HTTP.post_form()
  • PHP: file_get_contents() with stream context
  • Rust: reqwest crate

Real-World Use Cases

CI/CD Pipeline Screenshots

How to Automate Screenshots in Your CI/CD Pipeline

  • GitHub Actions workflow
  • Deployment verification
  • Before/after comparison
  • Commit screenshot to PR

Website Monitoring

How to Monitor Website Changes Automatically

  • Screenshot on a cron
  • Compare with ImageMagick
  • Detect visual changes
  • Competitor tracking
  • Uptime monitoring

Social Media & OG Images

  • Generate preview images for links
  • Capture product pages
  • Create dynamic social cards
  • Screenshot user-generated content

Testing & QA

  • Visual regression testing
  • Screenshot of pages after JavaScript renders
  • Verify responsive design across devices
  • Accessibility audits with /inspect endpoint

API Reference

Core Parameters 

{
  "url": "https://example.com",           // Required: website to capture
  "format": "png",                        // Optional: png, jpeg, webp (default: png)
  "width": 1280,                          // Optional: viewport width (default: 1280)
  "height": 720,                          // Optional: viewport height (default: 720)
  "fullPage": true,                       // Optional: capture entire scrollable page
  "viewportDevice": "iphone_14_pro"       // Optional: device preset (25+ options)
}
Enter fullscreen mode Exit fullscreen mode

Device Presets

Desktop: macbook_pro_16, macbook_pro_14, macbook_air_13
Tablet: ipad_air, ipad_pro_12_9, ipad_mini
Mobile: iphone_14_pro, iphone_15_plus, pixel_8, galaxy_s24

Response Format

Success (200):

Binary PNG/JPEG/WebP image data
Enter fullscreen mode Exit fullscreen mode

Error (400, 401, 429, 500):

{
  "error": "Invalid URL or API error",
  "status": 400
}
Enter fullscreen mode Exit fullscreen mode

Pricing

Plan Requests/Month Cost Use Case
Free 100 $0 Testing & prototyping
Starter 5,000 $29/mo Small projects (5-10 screenshots/day)
Growth 25,000 $79/mo Production apps (500+ screenshots/day)
Scale 100,000 $199/mo Enterprise (3,000+ screenshots/day)

FAQ

Q: How fast are screenshots?
A: 100-500ms per capture, depending on page complexity.

Q: Can I screenshot pages behind auth?
A: Pass cookies in the API call or use proxy headers.

Q: Do you support PDF?
A: Yes. Use /v1/pdf endpoint instead.

Q: Full-page vs. viewport screenshot?
A: Set fullPage: true to capture the entire scrollable page.

Q: Can I record video?
A: Yes. Use /v1/record for multi-step browser automation with optional AI narration.

Next Steps

  1. Get started: Try PageBolt free — 100 requests/month →
  2. Read language-specific tutorials: Pick your language above
  3. Explore advanced use cases: CI/CD, monitoring, testing
  4. Join the community: r/webdev, r/node, r/python discussions

Last updated: 2026-03-22
Author: Federico Brooks

Top comments (0)