Generating Open Graph page previews on the fly

We open sourced one of the most fun solutions we came up with as we built our new website @ Quartzo Studio.

The idea was to have our Open Graph images as snapshots of each page. But we didn’t want to screenshot every page, every time it changes. So instead, we put up a server that does that on the fly.

By providing a web page, the server accesses the page, screenshots it, and returns a PNG image. The URL used for the request also acts as the image address itself, so we just use that in our pages as the Open Graph image URL.

We named it telescope, and the source is available here: .

Given we were just focused on that website, and how simple the code is, I initially thought of having it in the same repository as the website, as a React Server Action or a Next.js Route Handler. But to screenshot the pages, we need puppeteer, and that downloads a headless Chrome browser (200MB+) when installing it, which would slow down our builds. For that reason, it made sense to have its own repository and be hosted as a single service for all of our products.