Stand with Ukraine 🇺🇦
Eleventy
The possum is Eleventy’s mascot

Eleventy Documentation

Menu

Screenshots

Contents

Feed this runtime service a URL and it returns a fully rendered screenshot image from that page (using Puppeteer)

Source Code Jump to heading

Deploy to Netlify

Usage Jump to heading

Image URLs have the format:

https://v1.screenshot.11ty.dev/:url/
https://v1.screenshot.11ty.dev/:url/:size/
https://v1.screenshot.11ty.dev/:url/:size/:aspectratio/
https://v1.screenshot.11ty.dev/:url/:size/:aspectratio/:zoom/

Sample Jump to heading

Try it out on the Eleventy API Explorer.

Screenshot of 11ty.dev
<img src="https://v1.screenshot.11ty.dev/https%3A%2F%2Fwww.11ty.dev%2Fdocs%2F/small/9:16/bigger/" class="screenshot screenshot-first-example" width="375" height="667" loading="lazy" decoding="async" alt="Screenshot of 11ty.dev">

Advanced Options Jump to heading

Manual Cache Busting Jump to heading

If the screenshots aren’t updating at a high enough frequency you can pass in your own cache busting key using an underscore prefix _ after your URL.

This can be any arbitrary string tied to your unique build, here’s some examples that use today’s date:

/:url/_20210802/
/:url/:size/_20210802/
/:url/:size/:aspectratio/_20210802/
/:url/:size/:aspectratio/:zoom/_20210802/

Custom Wait Conditions Jump to heading

You can customize the conditions with which the headless browser will wait to take the screenshot. At a low level, this controls the waitUntil property in Puppeteer’s goto call. The options are:

/:url/_wait:0/
/:url/_wait:1/
/:url/_wait:2/
/:url/_wait:3/

Custom Timeout Jump to heading

Number of seconds to wait before the request times out. We will attempt to simulate the stop button and return the screenshot that exists up to that point. Worst case, a default Eleventy logo is returned.

/:url/_timeout:3/
/:url/_timeout:9/

Combine these options Jump to heading

You can use any of these advanced options together, like /:url/_20210802_wait:0_timeout:2/. Order only matters to the uniqueness of the URL caching on the CDN: /:url/_20210802_wait:0/ and /:url/_wait:0_20210802/ will be functionally equivalent but make two different screenshot requests.

Community Resources


Other pages in API Services: