Screenshot API for Node.js

Why use an API instead of Puppeteer?

Quick Start

Get your free API key from the dashboard, then:

// screenshot.js — zero dependencies, works with Node 18+

const url = 'https://grabshot.dev/v1/screenshot';
const params = new URLSearchParams({
  url: 'https://stripe.com',
  format: 'png',
  width: '1280',
  frame: 'macbook',
  key: 'YOUR_API_KEY'
});

const res = await fetch(`${url}?${params}`);
const buffer = Buffer.from(await res.arrayBuffer());

import { writeFileSync } from 'fs';
writeFileSync('screenshot.png', buffer);
console.log('Saved screenshot.png');

Express.js — Dynamic OG Images

Generate social preview images on-the-fly for your web app:

import express from 'express';
const app = express();

app.get('/og/:page', async (req, res) => {
  const pageUrl = `https://mysite.com/${req.params.page}`;
  const screenshot = await fetch(
    `https://grabshot.dev/v1/screenshot?url=${encodeURIComponent(pageUrl)}&width=1200&height=630&format=png&key=${API_KEY}`
  );
  res.set('Content-Type', 'image/png');
  res.set('Cache-Control', 'public, max-age=86400');
  res.send(Buffer.from(await screenshot.arrayBuffer()));
});

Next.js API Route

// app/api/screenshot/route.js
export async function GET(request) {
  const { searchParams } = new URL(request.url);
  const target = searchParams.get('url') || 'https://example.com';

  const res = await fetch(
    `https://grabshot.dev/v1/screenshot?url=${encodeURIComponent(target)}&format=webp&width=1280&key=${process.env.GRABSHOT_KEY}`
  );

  return new Response(await res.arrayBuffer(), {
    headers: {
      'Content-Type': 'image/webp',
      'Cache-Control': 'public, s-maxage=3600',
    },
  });
}

API Parameters