How to Build a Screenshots API With Express.js and Puppeteer

26 Mar 2025

By

Blog Team

We will be building a Screenshot API Server, where you can pass URL as query parameter and a screenshot will be rendered in response to the API request.

To build a Screenshot API with Express we need two packages, express and puppeteer. After going through this tutorial you will have a working Screenshot API, ready to use. If you are a little impatient like me, find the GitHub link to all the code mentioned in this post, on the bottom of the page, you can clone the repo and get started immediately.

Express screenshot API setup

Before we begin make sure you have nodejs installed, after that we need to initialize a project folder, create package.json and install all the require dependencies lets look at the commands we need to run to get started.

mkdir express-puppeteer-screenshot-server
cd express-puppeteer-screenshot-server
npm init -y
npm install express puppeteer

Now we will create a file server.js , this will be our main file which will start our Screenshot API. If you choose to write code in ESM style you can create a file server.mjs . Create which ever file you want to, copy relevant code as mentioned below.

const express = require("express")
const puppeteer = require("puppeteer")

const app = express()

app.get("/screenshot", async (req, res) => {
  let browser
  try {
    // Launch a Chromium browser instance
    browser = await puppeteer.launch({
      headless: true, // running with headless mode
      args: ["--no-sandbox", "--disable-setuid-sandbox"], // minimal arguments required to start headless browser
    })

    // Create a new page in the browser
    const page = await browser.newPage()

    // Navigate to the specified URL
    await page.goto(req.query.url)

    // Take a screenshot of the current page you can set type 'png' | 'jpeg' | 'webp'
    const buffer = await page.screenshot({ type: "png" })

    // Set the content type for the response set correct header based on type you set above
    res.setHeader("Content-Type", "image/png")

    // Send the screenshot as a response
    res.send(Buffer.from(buffer))
  } catch (error) {
    console.error("Error taking screenshot:", error)
    res.status(500).send("Internal Server Error")
  } finally {
    // Close the browser instance
    await browser.close()
  }
})

const PORT = process.env.PORT || 3000
app.listen(PORT, () => {
  console.log(`Server is running on http://localhost:${PORT}`)
})

The last step is to save the file copying the code and that is it, in just ~40 lines we created a Screenshot API using express and puppeteer.

Express js Screenshot API code explanation

In the above file we have imported express and puppeteer , created an express app , created an API endpoint /screenshot which accepts a url query params, whatever URL we will provide in url param, our server will create a headless browser instance, open the url in a new page and will generate a screenshot, return the screenshot image and then finally close the browser.

Screenshot API test

To test our API we need to start the express server. To start our server run this command in the terminal.

node server.js

or

node server.mjs

After executing the above command you will see a log in terminal, confirming that our Screenshot API Server is live and running on PORT 3000

Server is running on http://localhost:3000

Now its time to test our API. we can test our API directly in our browser, to test our API we have to add a url query parameter to our API Endpoint we created. Here are some example you can test with any URL.

# copy paste these URL in you browser you will get a screenshot in a few seconds
http://localhost:3000/screenshot?url=https://www.wikipedia.org/
http://localhost:3000/screenshot?url=https://www.apple.com/
http://localhost:3000/screenshot?url=add-any-url-here-to-test

There is lot we can do to enhance our API, to mention a few

set custom viewport
create a full page screenshot
set dark mode before creating a screenshot
use a proxy server
hide/ click cookie banners before screenshot
resize screenshot to a custom size
many more check puppeteer doc here .

Some of these features can be directly implemented by adding puppeteer options. For other options we provide an Affordable Easy to use Screenshot API. You can use our API directly with Express or any other JavaScript backend or frontend and start creating screenshot in next 5 minutes.

Check our previous article which will show how to create a Screenshot API endpoint in express using ScreenshotBuddy.com API

Here is GitHub repo link with all code express puppeteer screenshot server

About us

ScreenShotBuddy.com provides The Most Affordable Screenshot API, that can be used to take large number screenshots, with multiple advance screenshot options. We offer a very generous free tier which gives up to 3000 Screenshots free per month. Create an account to try our service. Feel free to test our API by visiting Screenshot API Playground.

Share