Code Examples

Take Screenshots with TypeScript

Ready-to-copy TypeScript code for capturing website screenshots, generating PDFs, and processing pages at scale. Uses fetch (built-in).

Get free API key →Try in playground

Python Node.js TypeScript Go PHP Ruby Java C#Rust Swift Kotlin cURL R Elixir

Quick Start

Screenshot in TypeScript — minimal example

The simplest way to capture a screenshot. Just a URL and your API key.

TypeScriptquickstart

const params = new URLSearchParams({
  url: "https://example.com",
  access_key: "YOUR_ACCESS_KEY",
});
const resp = await fetch(`https://api.screenshotdev.com/v1/screenshot?${params}`);
const buffer = Buffer.from(await resp.arrayBuffer());
Bun.write("screenshot.png", buffer);

Full Example

Production-ready TypeScript script

Complete working script with options for viewport, format, full page capture, and error handling.

TypeScriptfull example

import fs from "node:fs/promises";

const API_KEY = "YOUR_ACCESS_KEY";
const BASE = "https://api.screenshotdev.com/v1/screenshot";

interface ScreenshotOptions {
  format?: "png" | "webp" | "jpeg";
  width?: number;
  fullPage?: boolean;
  darkMode?: boolean;
}

async function takeScreenshot(
  url: string,
  options: ScreenshotOptions = {}
): Promise<Buffer> {
  const params = new URLSearchParams({
    url,
    access_key: API_KEY,
    format: options.format ?? "webp",
    width: String(options.width ?? 1280),
    full_page: String(options.fullPage ?? false),
    dark_mode: String(options.darkMode ?? false),
  });

  const resp = await fetch(`${BASE}?${params}`);
  if (!resp.ok) {
    const body = await resp.text();
    throw new Error(`Screenshot failed (${resp.status}): ${body}`);
  }
  return Buffer.from(await resp.arrayBuffer());
}

const img = await takeScreenshot("https://example.com", {
  format: "webp",
  width: 1440,
  fullPage: true,
});
await fs.writeFile("screenshot.webp", img);
console.log(`Saved screenshot.webp (${img.length} bytes)`);

Advanced

More TypeScript examples

PDF generation, batch processing, webhooks, CSS/JS injection, and S3 upload.

PDF Generation

TypeScriptpdf

import fs from "node:fs/promises";

interface PdfOptions {
  format?: "a4" | "letter" | "legal";
  landscape?: boolean;
  margin?: string;
}

async function generatePdf(url: string, options: PdfOptions = {}): Promise<Buffer> {
  const params = new URLSearchParams({
    url,
    access_key: "YOUR_ACCESS_KEY",
    format: options.format ?? "a4",
    landscape: String(options.landscape ?? false),
    margin: options.margin ?? "20px",
  });
  const resp = await fetch(`https://api.screenshotdev.com/v1/pdf?${params}`);
  if (!resp.ok) throw new Error(`PDF failed: ${resp.status}`);
  return Buffer.from(await resp.arrayBuffer());
}

const pdf = await generatePdf("https://example.com", { format: "a4" });
await fs.writeFile("page.pdf", pdf);

Batch Screenshots

TypeScriptbatch

const API_KEY = "YOUR_ACCESS_KEY";

const urls: string[] = [
  "https://example.com",
  "https://github.com",
  "https://news.ycombinator.com",
];

interface CaptureResult {
  filename: string;
  size: number;
}

const results: CaptureResult[] = await Promise.all(
  urls.map(async (url): Promise<CaptureResult> => {
    const params = new URLSearchParams({
      url,
      access_key: API_KEY,
      format: "webp",
    });
    const resp = await fetch(
      `https://api.screenshotdev.com/v1/screenshot?${params}`
    );
    if (!resp.ok) throw new Error(`Failed for ${url}: ${resp.status}`);
    const buf = Buffer.from(await resp.arrayBuffer());
    const filename = new URL(url).hostname + ".webp";
    await Bun.write(filename, buf);
    return { filename, size: buf.length };
  })
);

for (const { filename, size } of results) {
  console.log(`  ${filename} (${size.toLocaleString()} bytes)`);
}

Async with Webhooks

TypeScriptwebhooks

interface WebhookJob {
  id: string;
  status: "queued" | "processing" | "done";
}

const resp = await fetch("https://api.screenshotdev.com/v1/screenshot", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({
    url: "https://example.com",
    access_key: "YOUR_ACCESS_KEY",
    webhook_url: "https://your-app.com/api/webhooks/screenshot",
    format: "webp",
    full_page: true,
  }),
});

const job: WebhookJob = await resp.json();
console.log(`Job queued: ${job.id}`);

Custom CSS/JS Injection

TypeScriptinject

const params = new URLSearchParams({
  url: "https://example.com",
  access_key: "YOUR_ACCESS_KEY",
  inject_css: `
    body { font-family: 'Inter', sans-serif; }
    .ad, .banner { display: none; }
  `,
  inject_js: `
    document.querySelectorAll('[data-cookie-banner]')
      .forEach(el => el.remove());
  `,
  block_ads: "true",
});

const resp = await fetch(
  `https://api.screenshotdev.com/v1/screenshot?${params}`
);
const buffer = Buffer.from(await resp.arrayBuffer());
await Bun.write("clean.webp", buffer);

S3 Upload

TypeScripts3

import { S3Client, PutObjectCommand } from "@aws-sdk/client-s3";

const params = new URLSearchParams({
  url: "https://example.com",
  access_key: "YOUR_ACCESS_KEY",
  format: "webp",
});
const resp = await fetch(
  `https://api.screenshotdev.com/v1/screenshot?${params}`
);
const buffer = Buffer.from(await resp.arrayBuffer());

const s3 = new S3Client({});
await s3.send(new PutObjectCommand({
  Bucket: "my-screenshots",
  Key: `captures/example-com.webp`,
  Body: buffer,
  ContentType: "image/webp",
}));