Documentation Screenshots

Q: How do I integrate screenshot capture into my CI/CD pipeline?

Add a capture step after your deploy step. The API is a single POST request — any CI system that can make HTTP calls (GitHub Actions, GitLab CI, CircleCI, Jenkins) can run it.

Q: Can I capture authenticated pages?

Yes. Pass session cookies or custom headers in the API request. A short-lived read-only token is the recommended pattern for CI captures.

Q: What image format should I use?

PNG for lossless fidelity; WebP for a smaller file with comparable quality; PDF for archival docs where selectable text matters.

Overview

Outdated screenshots are one of the biggest pain points in technical documentation. When your UI evolves but your docs don't, users get confused and support tickets pile up.

Running a screenshot API as part of your CI/CD pipeline lets you trigger captures automatically whenever your application deploys. README files, API docs, user guides, and help articles stay visually accurate without manual work.

AI-powered element removal keeps the output clean and professional by hiding cookie banners, chat widgets, and promotional overlays that would otherwise leak into screenshots.

Docs-screenshot breakage tends to cluster in three places: a cookie banner lands on top of the hero, a support chat widget covers the primary action, or a user-specific badge leaks into a "generic" capture. An AI element-removal pass hides all three without requiring a hand-maintained CSS selector list.

For docs-as-code workflows (Docusaurus, MkDocs, Nextra, Mintlify), the practical pattern is to capture on merge to `main`, write PNGs into `/static/img/screens/`, and commit through a docs-bot. Viewport matrix of 1440 / 1024 / 390 covers desktop, tablet, and mobile in a single build step.

Key Benefits

Capture UI changes automatically on every deploy

Keep screenshots synchronized with releases

Generate consistent, professional images

Integrate with GitHub Actions, GitLab CI, and similar pipelines

Results You Can Expect

~3s

average capture time per page

<3%

reshoot rate with AI cleanup

CI/CD

runs on every deploy

How It Works

1

Add a screenshot-capture step to your CI/CD workflow

2

Define the pages and viewport sizes you want to capture

3

Call the screenshot API with your target URLs

4

Save the returned images into your docs repository

5

Commit and push the updated screenshots automatically

Code Example

// Capture a documentation screenshot
const response = await fetch('https://api.screenshotly.app/screenshot', {
  method: 'POST',
  headers: {
    Authorization: 'Bearer YOUR_API_KEY',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    url: 'https://your-app.example.com/dashboard',
    device: 'desktop',
    format: 'png',
    aiRemoval: { enabled: true, types: ['cookie-banner', 'chat-widget'] },
  }),
});

Documentation Capture Benchmarks

Metric	Value	Context
Average capture time	~3s	1440×900 viewport, networkidle wait
Full-page capture time	~4s	Scroll + lazy-load + stitch
AI element removal overhead	+0.6s	3–5 element types detected
Reshoot rate	<3%	With AI cleanup enabled
Viewport matrix	1440 / 1024 / 390	Desktop / tablet / mobile

Capture Reliability: 200-Page Docs Audit

Methodology: Captured 200 documentation pages across three representative docs-as-code sites over 30 days and logged first-attempt success, reshoot cause, and pipeline wall time.

~87% of pages captured cleanly on first attempt with AI cleanup enabled.
Without AI cleanup, first-attempt success dropped to ~63% — the delta is the real payoff of AI-pass vs. hand-maintained selectors.
Lazy-loaded images accounted for ~48% of reshoots. Setting waitUntil: "networkidle" eliminated ~90% of them.
A 200-page docs refresh completes in ~14 minutes with concurrency=5.

Frequently Asked Questions

How do I integrate screenshot capture into my CI/CD pipeline?

Add a capture step after your deploy step. The API is a single POST request — any CI system that can make HTTP calls (GitHub Actions, GitLab CI, CircleCI, Jenkins) can run it.

Can I capture authenticated pages?

Yes. Pass session cookies or custom headers in the API request. A short-lived read-only token is the recommended pattern for CI captures.

What image format should I use?

PNG for lossless fidelity; WebP for a smaller file with comparable quality; PDF for archival docs where selectable text matters.

When this isn't the right fit

Screenshotly is not ideal for every workflow. Consider a different approach if any of the following apply:

You need screenshots of localhost or VPN-only resources with no public tunnel — a locally-scripted Playwright runner is simpler.
Your docs live inside a native desktop app (Electron, Tauri). A web-screenshot API captures browsers, not native surfaces.
You need pixel-perfect visual-regression output. A dedicated VRT tool (Chromatic, Percy) is the better source of truth for diff gates.

Want a step-by-step walkthrough?

Read: Documentation Screenshot Automation Guide →