How to take website screenshots with Javascript/Typescript (Node.js)

Why Screenshots in code matter

Capturing website screenshots programmatically is essential for visual audits, regression tests, previews, and more. But doing it reliably,handling lazy loading, pop‑ups, consent banners, mobile layouts,can quickly become a time sink. Let’s contrast self‑hosted tooling with a turnkey API, so you can choose what frees you up to build.

Using Puppeteer

Using Puppeteer lets you wield complete control over headless Chrome (or Chromium), making it ideal for tasks like SPAs, form submissions, and custom workflows,all without incurring any tool-specific costs beyond your hosting environment . However, this power comes with trade-offs: you’ll need to maintain the entire browser infrastructure yourself,binaries, worker processes, scaling logic, retries,and manually handle overlays such as ads or cookie banners . Additionally, because Puppeteer is limited to Chrome/Chromium (with experimental Firefox support), you risk drifting away from true real‑world rendering that users experience on other browsers.

Example using Puppeteer:

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  await page.setViewport({ width: 1_280, height: 800 });
  await page.goto('https://example.com', { waitUntil: 'networkidle' });

  // Optional: await page.click('.cookie-accept');
  await page.screenshot({ path: 'puppeteer.png', fullPage: true });
  await browser.close();
})();

This works great locally, but scaling it to hundreds or thousands? Now it’s your cloud to manage.

Using Playwright

Using Playwright gives you a unified API to automate Chromium, Firefox, and WebKit, making it especially powerful for cross‑browser visual testing and reliable execution. It even supports mobile device emulation out of the box, so you can test how your app renders on mobile without extra tooling. However, these benefits come with the same overhead you’d face using Puppeteer: you must manage infrastructure, deal with cookie and ad banners, and navigate headless browser quirks yourself. Ultimately, you’re still responsible for orchestrating the entire process.

Example using Playwright:

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();

  await page.goto('https://example.com', { waitUntil: 'networkidle' });
  await page.screenshot({ path: 'playwright.png', fullPage: true });
  await browser.close();
})();

Playwright makes cross‑browser testing elegant, but you still own the stack.

Screenshot API as a service

Enter ScreenshotMAX: the screenshot service you don’t have to build or manage. We handle browser orchestration, scaling, banners, retries, infrastructure... so you can ship screen‑driven features fast.

Why ScreenshotMAX?

You don’t need to worry about managing browser versions or orchestrating clusters,ScreenshotMAX handles all that infrastructure for you. It intelligently detects and hides cookie banners, ads, and chat overlays so your snapshots are clean and professional. Whether you send a single request or millions, it scales instantly to meet your needs. Customize your screenshots with full‑page captures, viewport selection, device emulation, and even dark mode support. On top of that, you benefit from strong service-level agreements, built‑in monitoring, automated retries, and caching,everything needed for enterprise-grade reliability.

Standard HTTP example

curl https://api.screenshotmax.com/v1/screenshot \
-G --data-urlencode "url=https://example.com" \
-d format=webp \
-d access_key=YOUR_ACCESS_KEY \
-d full_page=true \
-d block_annoyance=cookies_banner \
-d device_scale_factor=2 \
-d viewport_width=1280 -d viewport_height=800 \
-o ScreenshotMAX.png

That’s it, one command, no infrastructure.

Javascript SDK example

Here’s how you can use the ScreenshotMAX SDK in a Node.js application:

import fs from "node:fs";
import { SDK } from "@screenshotmax/sdk";

(async () => {
  const client = new SDK("YOUR_ACCESS_KEY", "YOUR_SECRET_KEY");

  const result = await client
    .setOptions({
      url: 'https://example.com',
      full_page: true,
      format: 'webp',
      block_annoyance: 'cookies_banner',
      viewport_width: 1_280,
      viewport_height: 800,
      device_scale_factor: 2,
    })
    .fetch();

  console.log("Screenshot saved:", result.headers.get("Content-Type"));
  fs.writeFileSync("screenshot.png", Buffer.from(result.data, "binary"));
})();

SDKs also available in Python and PHP.

Comparison at a glance

Conclusion

Puppeteer and Playwright are powerful, but maintaining infrastructure, dealing with pop‑ups, and scaling can take more time than building features. If you’d rather focus on your app than managing browser farms, ScreenshotMAX abstracts the pain away.

If you need to automate complex browser interactions or generate screenshots in tightly controlled environments, Puppeteer or Playwright offers fine-grained control. It’s ideal for one-off screenshots, local development, or workflows where you need to manipulate the DOM or wait for dynamic content.

However, if your goal is to capture hundreds or thousands of screenshots reliably, especially in a production setting, a screenshot API like ScreenshotMAX is a better choice. It handles the infrastructure, parallel processing, and scaling for you, so you don’t have to worry about memory limits, browser crashes, or queueing jobs manually. You just call the API and get your result back quickly, with consistent rendering and high availability. It’s purpose-built for bulk screenshot tasks and large workloads.

Quickstart

Getting started with ScreenshotMAX is easy:

1. Sign up for a free account at ScreenshotMAX.
2. Get your API key from the dashboard.
3. Use one of the examples above to take your first screenshot.

If you’re ready to offload the complexity and speed past the screenshot busywork, let’s help you ship sooner.