Let's Build a Screenshot API server with Bun and Puppeteer

01 Apr 2025

Blog Team

In this tutorial we will create a Website Screenshot API server with Bun.js and Puppeteer, Bun is a Fast all-in-one JavaScript runtime. Bun performs really well among all available JavaScript runtimes.

Before we begin make sure you have google chrome browser & bun installed on your system, to install Bun refer to Bun Installation docs.

Our screenshot API will respond to a get request and will serve rendered screenshot image. First we need to create an empty package.json file in our project folder, if you want to write typescript you can use bun init command to create all required files to start building. In this tutorial we are not using typescript we will be using JavaScript only. You can find GitHub link in the end of the post to check the final code of this tutorial.

Bun Screenshot API Requirements

The only dependency we need for this screenshot server is puppeteer which we can install with this command bun install puppeteer. That's all that we need to do, after installing puppeteer we need to make a server.js file you can name it anything you like. Lets look at the code we need to write in server.js. Check the code block below.

import puppeteer from "puppeteer"
const server = Bun.serve({
  port: 3000,
  routes: {
    // creating a bun server endpoint
    "/screenshot": {
      GET: async (req) => {
        // parsing request URL
        const { searchParams } = new URL(req.url)

        if (searchParams.get("url")) {
          // geting url query param from request URL
          const url = searchParams.get("url")

          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(url)

            // Take a screenshot of the current page you can set type 'png' | 'jpeg' | 'webp'
            // you wil need to change Content-Type if you change screenshot type here accordingly
            const buffer = await page.screenshot({ type: "png" })

            // Seting the content type for the response
            // set correct header based on screenshot type you set above
            const headers = new Headers()
            headers.append("Content-Type", "image/png")
            headers.append("Access-Control-Allow-Origin", "*")

            // Send the screenshot as a response
            return new Response(buffer, { headers })
          } catch (error) {
            console.error("Error taking screenshot:", error)
            return new Response("Internal Server Error", { status: 500 })
          } finally {
            // Close the browser instance
            await browser.close()
          }
        } else {
          return new Response("Invalid request", { status: 500 })
        }
      },
    },
  },
})

console.log(`Listening on ${server.url}`)

Bun Puppeteer Server Explanation

The code is fairly simple, I will give you a brief rundown on what we are doing here, almost all lines are commented to make you understand what we are doing. Let see a higher level overview of what we are doing.

Our API receives a request with url query param.
We start a headless browser session using puppeteer.
puppeteer opens url in a new page.
puppeteer creates a screenshot using.
We send the screenshot in response to the user.
Then we close the browser to free any resources for next request.

Screenshot Endpoint Test

To use our screenshot API, we have to send request in this format, find sample URL's below. if the

http://localhost:3000/screenshot?url=https://www.apple.com
http://localhost:3000/screenshot?url=https://www.wikipedia.org
http://localhost:3000/screenshot?url=<add-any-url-here>

Here is the GitHub link for all the codes mentioned in this tutorial. Bun Screenshot API. Clone the repo, install dependencies and run bun dev command to start the 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