Devices and page checks

Render one page on several devices in a single call, and optionally get what's wrong on each: sideways scrolling and its cause, missing viewport tag, tiny text, JavaScript errors, failed requests and broken images.

Several devices at once

Send url (or html), devices (1–8, e.g. ["desktop","iphone","ipad"]) and any screenshot option. You get a hosted link per device. 1 credit per device; failed devices are refunded.

curl -X POST https://shotlane.dev/v1/screenshots -H "X-API-Key: $SHOTLANE_API_KEY" -H "Content-Type: application/json" \
  -d '{"url":"https://stripe.com","devices":["desktop","iphone","ipad"],"hide_cookie_banners":true}'

Check a page

Renders the page on phone, tablet and desktop (or your devices) and reports what went wrong on each, next to the screenshot. Built for checking a deploy or a preview URL, by you or by an agent. 1 credit per device; failed and blocked devices are refunded.

curl "https://shotlane.dev/v1/check?url=https://my-app-git-feature.vercel.app" -H "X-API-Key: $SHOTLANE_API_KEY"

{"url": "https://my-app-git-feature.vercel.app", "issues": 1, "credits_used": 3, "shots": [
  {"device": "iphone", "ok": true, "url": "https://shotlane.dev/r/….jpg", "status": 200,
   "issues": ["Scrolls sideways: the page is 612px wide in a 393px viewport; caused by table.pricing (580px wide, ends at 596px)."],
   "diagnostics": {"console_errors": [], "page_errors": [], "failed_requests": [],
                   "layout": {"viewport_width": 393, "page_width": 612, "horizontal_overflow": true, "overflowing_elements": [...],
                              "broken_images": [], "has_viewport_meta": true, "small_text_pct": 3}}},
  {"device": "ipad", …}, {"device": "desktop", …}]}

What it checks

• Sideways scrolling: the page is wider than the screen and a person can pan to it, with the outermost elements that stick out. Content clipped by overflow: hidden on html and body, or on a wrapper, doesn't count.
• Viewport tag missing on phones, which makes them render the desktop layout shrunk.
• Small text: more than 40% of the text under 12px on a phone (small_text_pct).
• JavaScript: uncaught errors and console errors while loading.
• Failed requests (4xx, 5xx, network errors) and broken images a person would see; tracking pixels and hidden images don't count.

On every preview deploy

The Shotlane Visual Check action runs the check whenever a Vercel or Netlify preview (or anything that reports GitHub deployment statuses) goes live, and posts the screenshots and problems as one pull request comment, updated on every deploy. Add the secret SHOTLANE_API_KEY and this workflow:

name: Shotlane visual check
on: deployment_status
permissions:
  contents: read
  pull-requests: write
jobs:
  check:
    if: github.event.deployment_status.state == 'success' && !contains(github.event.deployment.environment, 'roduction')
    runs-on: ubuntu-latest
    steps:
      - uses: shotlane/visual-check@v1
        with:
          api-key: ${{ secrets.SHOTLANE_API_KEY }}
          pages: "/ /pricing"

Inputs: pages (paths to check, 1 credit per page and device), devices, url (a fixed URL instead of the deployment's), fail-on-issues, comment. For Vercel previews behind Deployment Protection, add vercel-bypass-secret; it's sent only to the preview's own host and never stored. Prefer no third-party action? Use the self-contained workflow file.

Device catalog

Any of these works as device on every endpoint, alone or in devices lists, and viewport_landscape=true turns one sideways. The same list as JSON: GET /v1/devices (no key needed).