Let’s be honest, sometimes you just need a quick screenshot of a webpage without having to manually click on 'PRTSC' or paying for a 3rd party tool. Maybe you’re generating previews for a newsletter, checking competitor designs, or throwing together an SEO report.

I didn’t want to rely on another third-party tool or bloated screenshot SaaS. So I built my own mini screenshot API using Node.js and Puppeteer. It’s about 50 lines of code and it just works.

For this implementation, you only need three things: Node.js, Express, and Puppeteer. That’s it. No API keys, no dashboards, no weird limitations.

The idea is simple: you hit an endpoint with a URL and it returns a PNG screenshot of that page.

Install Express and Puppeteer

To get started, you'll need a Node project with express and puppeteer installed:

npm install express puppeteer

Code Implementation

const express = require('express');
const puppeteer = require('puppeteer');
const app = express();

app.get('/screenshot', async (req, res) => {
  const { url } = req.query;
  if (!url) return res.status(400).send('Missing URL');

  const browser = await puppeteer.launch({ headless: 'new' });
  const page = await browser.newPage();
  await page.goto(url, { waitUntil: 'networkidle2' });
  const screenshot = await page.screenshot();

  await browser.close();
  res.set('Content-Type', 'image/png');
  res.send(screenshot);
});

app.listen(3000, () => {
  console.log('Server running on http://localhost:3000');
});

To try it out:

node index.js

Then visit:
http://localhost:3000/screenshot?url=https://example.com

You’ll get a screenshot served directly in your browser.

I use this for generating quick preview thumbnails, monitoring layout changes, and debugging weird rendering issues. You can customize the viewport, delay rendering, or add auth headers if needed. It’s just JavaScript, so tweak away.

The funny part? I built this faster than I could write this post. Sometimes the smallest tools are the most useful.