JavaScript / TypeScript

export SCREENSHOTAPI_KEY="sk_live_your_key_here"

import { ScreenshotAPI } from 'screenshotapi-to'

const client = new ScreenshotAPI({
  apiKey: process.env.SCREENSHOTAPI_KEY!
})

interface ScreenshotResult {
  image: ArrayBuffer            // raw image (or PDF) bytes
  contentType: string           // "image/png", "image/webp", "application/pdf", …
  metadata: {
    creditsRemaining: number
    screenshotId: string        // include this when contacting support
    durationMs: number
  }
}

const result = await client.screenshot({
  url: 'https://example.com/dashboard',
  width: 1440,
  height: 1200,
  fullPage: true,
  type: 'webp',
  quality: 90,
  colorScheme: 'dark',
  waitUntil: 'networkidle0',
  waitForSelector: '[data-ready="true"]',
  delay: 500,
  blockAds: true,
  removeCookieBanners: true,
  devicePixelRatio: 2,
  timezone: 'America/New_York',
  locale: 'en-US',
  cacheTtl: 300,
  removeElements: ['.modal', '#promo'],
  geoLocation: { latitude: 40.7128, longitude: -74.006, accuracy: 25 }
})

const pdf = await client.screenshot({
  html: '<main><h1>Invoice #1024</h1><p>Thank you for your business.</p></main>',
  type: 'pdf',
  width: 1200
})

// pdf.image is an ArrayBuffer of the PDF bytes

import {
  ScreenshotAPI,
  AuthenticationError,
  InvalidAPIKeyError,
  InsufficientCreditsError,
  ScreenshotFailedError,
  ScreenshotTimeoutError,
  ScreenshotNetworkError
} from 'screenshotapi-to'

const client = new ScreenshotAPI({
  apiKey: process.env.SCREENSHOTAPI_KEY!,
  timeout: 30_000
})

try {
  await client.screenshot({ url: 'https://example.com' })
} catch (error) {
  if (error instanceof AuthenticationError) {
    console.error('Missing or malformed API key (401)')
  } else if (error instanceof InvalidAPIKeyError) {
    console.error('API key is revoked or invalid (403)')
  } else if (error instanceof InsufficientCreditsError) {
    console.error(`Out of credits (402). Balance: ${error.balance}`)
  } else if (error instanceof ScreenshotFailedError) {
    console.error(`Capture failed server-side (500): ${error.message}`)
  } else if (error instanceof ScreenshotTimeoutError) {
    console.error(`Timed out after ${error.timeoutMs}ms`)
  } else if (error instanceof ScreenshotNetworkError) {
    console.error('Could not reach ScreenshotAPI')
  } else {
    throw error
  }
}

// app/api/screenshot/route.ts
import { ScreenshotAPI } from 'screenshotapi-to'

const client = new ScreenshotAPI({ apiKey: process.env.SCREENSHOTAPI_KEY! })

export async function GET(request: Request) {
  const url = new URL(request.url).searchParams.get('url')
  if (!url) {
    return Response.json({ error: 'url is required' }, { status: 400 })
  }

  try {
    const { image, contentType } = await client.screenshot({ url, type: 'webp' })
    return new Response(image, {
      headers: {
        'Content-Type': contentType,
        'Cache-Control': 'public, max-age=3600'
      }
    })
  } catch {
    return Response.json({ error: 'Screenshot failed' }, { status: 500 })
  }
}

import express from 'express'
import { ScreenshotAPI } from 'screenshotapi-to'

const app = express()
const client = new ScreenshotAPI({ apiKey: process.env.SCREENSHOTAPI_KEY! })

app.get('/screenshot', async (req, res) => {
  const url = req.query.url as string
  if (!url) return res.status(400).json({ error: 'url is required' })

  try {
    const { image, contentType } = await client.screenshot({ url, type: 'webp', quality: 80 })
    res.set('Content-Type', contentType)
    res.set('Cache-Control', 'public, max-age=3600')
    res.send(Buffer.from(image))
  } catch {
    res.status(500).json({ error: 'Screenshot failed' })
  }
})

import { ScreenshotAPI } from 'screenshotapi-to'

export default {
  async fetch(request: Request, env: { SCREENSHOTAPI_KEY: string }): Promise<Response> {
    const client = new ScreenshotAPI({ apiKey: env.SCREENSHOTAPI_KEY })
    const url = new URL(request.url).searchParams.get('url') ?? 'https://example.com'

    const { image, contentType } = await client.screenshot({ url, type: 'webp' })
    return new Response(image, { headers: { 'Content-Type': contentType } })
  }
}

const urls = ['https://example.com', 'https://github.com', 'https://news.ycombinator.com']

const results = await Promise.allSettled(urls.map(url => client.save({ url, path: `./out/${new URL(url).hostname}.png` })))

results.forEach((result, i) => {
  if (result.status === 'fulfilled') console.log(`✓ ${urls[i]}`)
  else console.error(`✗ ${urls[i]}: ${result.reason.message}`)
})

// Frontend — calls your own proxy, not ScreenshotAPI
const response = await fetch(`/api/screenshot?url=${encodeURIComponent(url)}`)
const blob = await response.blob()
const imageUrl = URL.createObjectURL(blob)

const params = new URLSearchParams({ url: 'https://example.com' })
const response = await fetch(`https://screenshotapi.to/api/v1/screenshot?${params}`, {
  headers: { 'x-api-key': process.env.SCREENSHOTAPI_KEY! }
})

if (!response.ok) throw new Error((await response.json()).error)
const image = Buffer.from(await response.arrayBuffer())