A tool for automating website screenshots

NicolasBrondinBernard

Author
@NicolasBrondinBernard

A domain name, a list of routes, and Peek takes care of the rest!

Article published on 15/01/2021, last updated on 10/08/2026

One of the last steps when I publish a site or an application on the web is to add OpenGraph tags in order to have nice-looking shares on social networks for my clients and maximize the success of links to the site.

If you're not familiar with OpenGraph, I wrote an article about it that I invite you to read!

It's essential to have a visual attached to the shared link, otherwise the rendering of the posts is really dull and doesn't encourage people to click on it. Sometimes visuals are prepared specifically for the site with the design and social media team, but for the more modest projects, a simple screenshot of each page is enough.

The problem is that this operation can be time-consuming when the site in question is made up of dozens of pages and you have to take all the screenshots, add them to the site's resources, and then assign them to each page.

So I created a small tool to make my task easier and automate part of the process, it's called Peek!

What is Peek?

Peek is a small utility written in NodeJS and using the power of Puppeteer to automate taking screenshots of a website (or an application) from a few basic pieces of information:

  • A domain name (even localhost)
  • A list of routes (like /contact, /team, etc...)
  • A resolution (height and width)

If you don't know what Puppeteer is, here's an article on the subject.

Once all the information has been provided, Peek will load each specified page, take a screenshot at the desired resolution, and save it in its "screenshots" folder, simple and effective.

Currently the project works in the form of a fairly accessible CLI, but I'm thinking about adding a more user-friendly interface for people working in marketing and social media with Electron for example!

To use Peek, nothing could be simpler, just head straight to the Github project and follow the instructions!

If you have ideas for improvement, or want to contribute, feel free to add issues to the project's repository and to make pull requests, which I will review as soon as I have a moment.


C D-X sur Unsplash

Finished reading this article?
Our newsletter

No spam. Only free content, news, and ever more resources to level up your skills!

Join +1500 developers

Comments (0)

to leave a comment

No comments yet