Chromium Screenshot in Node.js (2026)

Why Chromium for Screenshots?

Chromium is the rendering engine behind Chrome, Edge, and Brave. When you need pixel-accurate screenshots of modern websites — SPAs, CSS Grid layouts, WebGL, custom fonts — Chromium is the only reliable choice. Node.js gives you three main paths:

• Playwright — Microsoft-maintained, cross-browser, excellent API, best for 2026
• Puppeteer — Google-maintained, Chrome-specific, slightly more battle-tested for PDF
• @sparticuz/chromium — Statically compiled Chromium for AWS Lambda / serverless

Each solves different deployment constraints. This guide covers all three, plus a managed API option for when you want zero infrastructure.

Option 1: Playwright (Recommended)

Playwright auto-downloads Chromium, Firefox, and WebKit. For screenshots you'll mainly use Chromium, but the API is consistent across all three browsers.

Install

npm install playwright
npx playwright install chromium   # ~150 MB Chromium binary

Basic screenshot

import { chromium } from 'playwright';

const browser = await chromium.launch({ headless: true });
const page = await browser.newPage();

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

await browser.close();

Full-page screenshot

await page.screenshot({
  path: 'full-page.png',
  fullPage: true          // captures the entire scrollable document
});

Viewport & device emulation

import { chromium, devices } from 'playwright';

const browser = await chromium.launch();
const context = await browser.newContext({
  ...devices['iPhone 15 Pro'],   // 393x852, 3x DPR
});
const page = await context.newPage();
await page.goto('https://example.com');
await page.screenshot({ path: 'mobile.png' });
await browser.close();

Screenshot a specific element

const el = page.locator('#hero-section');
await el.screenshot({ path: 'hero.png' });

Reuse browser context (high-throughput batch)

const browser = await chromium.launch();
const urls = ['https://a.com', 'https://b.com', 'https://c.com'];

// Reuse one browser, open parallel pages
await Promise.all(
  urls.map(async (url, i) => {
    const context = await browser.newContext();
    const page = await context.newPage();
    try {
      await page.goto(url, { waitUntil: 'networkidle', timeout: 15000 });
      await page.screenshot({ path: `out-${i}.png` });
    } finally {
      await context.close();
    }
  })
);
await browser.close();