# pageres > Capture website screenshots Latest version **9.0.0** (published 2025-09-09) · MIT license · 0 weekly downloads ## Install ```sh npm install pageres pnpm add pageres yarn add pageres bun add pageres ``` ## Health **Score 30/100 (F)** — status: maintenance-mode. Positive: esm support; no vulnerabilities. Warnings: low downloads; no types. Negative: stale; low maintenance score. ## Facts | | | |---|---| | Version | 9.0.0 | | Published | 2025-09-09 | | First published | 2014-02-07 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | ESM | | Node | >=20 | | Dependencies | 13 | | Unpacked size | 26.4 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 9729 | | Author | Sindre Sorhus | | Maintainers | sindresorhus, kevva | | Keywords | page, website, site, web, url, resolution, size, screenshot, screenshots, screengrab, screen, snapshot, shot, responsive, gulpfriendly, puppeteer, chrome, image, svg, render, html, headless, capture, pic, picture, png, jpg, jpeg | ## Links - npm: https://www.npmjs.com/package/pageres - Repository: https://github.com/sindresorhus/pageres - Homepage: https://github.com/sindresorhus/pageres#readme - Issues: https://github.com/sindresorhus/pageres/issues - Funding: https://github.com/sponsors/sindresorhus - npm.io page: https://npm.io/package/pageres ## Dependencies (13) - [plur](https://npm.io/package/plur.md) ^5.1.0 - [p-map](https://npm.io/package/p-map.md) ^7.0.3 - [lodash](https://npm.io/package/lodash.md) ^4.17.21 - [date-fns](https://npm.io/package/date-fns.md) ^4.1.0 - [make-dir](https://npm.io/package/make-dir.md) ^5.0.0 - [type-fest](https://npm.io/package/type-fest.md) ^4.41.0 - [array-uniq](https://npm.io/package/array-uniq.md) ^3.0.0 - [filenamify](https://npm.io/package/filenamify.md) ^6.0.0 - [log-symbols](https://npm.io/package/log-symbols.md) ^7.0.1 - [array-differ](https://npm.io/package/array-differ.md) ^4.0.0 - [filenamify-url](https://npm.io/package/filenamify-url.md) ^3.1.0 - [capture-website](https://npm.io/package/capture-website.md) ^5.0.0 - [unused-filename](https://npm.io/package/unused-filename.md) ^4.0.1 ## Alternatives - [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads - [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads - [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads - [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads - [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads ## Recent versions - 9.0.0 (latest) — 2025-09-09 - 8.1.0 — 2024-07-26 - 8.0.0 — 2023-11-06 - 7.1.0 — 2022-10-27 - 7.0.0 — 2022-08-30 - 6.3.1 — 2022-03-11 - 6.3.0 — 2022-01-23 - 6.2.4 — 2022-01-16 - 6.2.3 — 2021-06-20 - 6.2.2 — 2021-05-31 - 6.2.1 — 2021-03-09 - 6.2.0 — 2021-03-08 - 6.1.0 — 2020-12-28 - 6.0.0 — 2020-12-15 - 5.2.1 — 2020-08-16 - … 38 more at https://npm.io/package/pageres/versions ## README # ![pageres](media/promo.png) [![Coverage Status](https://codecov.io/gh/sindresorhus/pageres/branch/main/graph/badge.svg)](https://codecov.io/gh/sindresorhus/pageres) [![XO code style](https://img.shields.io/badge/code_style-XO-5ed9c7.svg)](https://github.com/xojs/xo) Capture screenshots of websites in various resolutions. A good way to make sure your websites are responsive. It's speedy and generates 100 screenshots from 10 different websites in just over a minute. It can also be used to render SVG images. *See [pageres-cli](https://github.com/sindresorhus/pageres-cli) for the command-line tool.* ## Install ```sh npm install pageres ``` Note to Linux users: If you get a "No usable sandbox!" error, you need to enable [system sandboxing](https://github.com/GoogleChrome/puppeteer/blob/master/docs/troubleshooting.md#setting-up-chrome-linux-sandbox). ## Usage ```js import Pageres from 'pageres'; await new Pageres({delay: 2}) .source('https://github.com/sindresorhus/pageres', ['480x320', '1024x768'], {crop: true}) .source('https://sindresorhus.com', ['1280x1024', '1920x1080']) .source('data:text/html,

Awesome!

', ['1024x768']) .sourceHtml('

Direct HTML!

', ['1024x768']) .destination('screenshots') .run(); console.log('Finished generating screenshots!'); ``` ## API ### Pageres(options?) #### options Type: `object` ##### delay Type: `number` *(Seconds)*\ Default: `0` Delay capturing the screenshot. Useful when the site does things after load that you want to capture. ##### timeout Type: `number` *(Seconds)*\ Default: `60` Number of seconds after which the request is aborted. ##### crop Type: `boolean`\ Default: `false` Crop to the set height. ##### css Type: `string` Apply custom CSS to the webpage. Specify some CSS or the path to a CSS file. ##### script Type: `string` Apply custom JavaScript to the webpage. Specify some JavaScript or the path to a file. ##### cookies Type: `Array` A string with the same format as a [browser cookie](https://developer.mozilla.org/docs/Web/HTTP/Cookies) or [an object](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pagesetcookiecookies). Tip: Go to the website you want a cookie for and [copy-paste it from DevTools](https://stackoverflow.com/a/24961735/64949). ##### filename Type: `string`\ Default: `'<%= url %>-<%= size %><%= crop %>'` Define a customized filename using [Lo-Dash templates](https://lodash.com/docs#template).\ For example: `<%= date %> - <%= url %>-<%= size %><%= crop %>`. Available variables: - `url`: The URL in [slugified](https://github.com/sindresorhus/filenamify-url) form, eg. `http://yeoman.io/blog/` becomes `yeoman.io!blog` - `size`: Specified size, eg. `1024x1000` - `width`: Width of the specified size, eg. `1024` - `height`: Height of the specified size, eg. `1000` - `crop`: Outputs `-cropped` when the crop option is true - `date`: The current date (YYYY-MM-DD), eg. 2015-05-18 - `time`: The current time (HH-mm-ss), eg. 21-15-11 ##### incrementalName Type: `boolean`\ Default: `false` When a file exists, append an incremental number. ##### selector Type: `string` Capture a specific DOM element matching a CSS selector. ##### hide Type: `string[]` Hide an array of DOM elements matching CSS selectors. ##### clickElement Type: `string` Click the DOM element matching the given CSS selector. ##### username Type: `string` Username for authenticating with HTTP auth. ##### password Type: `string` Password for authenticating with HTTP auth. ##### scale Type: `number`\ Default: `1` Scale webpage `n` times. ##### format Type: `string`\ Default: `png`\ Values: `'png' | 'jpg'` Image format. ##### userAgent Type: `string` Custom user agent. ##### headers Type: `object` Custom HTTP request headers. ##### transparent Type: `boolean`\ Default: `false` Set background color to `transparent` instead of `white` if no background is set. ##### darkMode Type: `boolean`\ Default: `false` Emulate preference of dark color scheme. ##### launchOptions Type: `object`\ Default: `{}` Options passed to [`puppeteer.launch()`](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#puppeteerlaunchoptions). ##### beforeScreenshot Type: `Function` The specified function is called right before the screenshot is captured, as well as before any bounding rectangle is calculated as part of `options.element`. It receives the Puppeteer [`Page` instance](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#class-page) as the first argument and the [`browser` instance](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#class-browser) as the second argument. This gives you a lot of power to do custom stuff. The function can be async. Note: Make sure to not call `page.close()` or `browser.close()`. ```js import Pageres from 'pageres'; await new Pageres({ delay: 2, beforeScreenshot: async (page, browser) => { await checkSomething(); await page.click('#activate-button'); await page.waitForSelector('.finished'); } }) .source('https://github.com/sindresorhus/pageres', ['480x320', '1024x768'], {crop: true}) .destination('screenshots') .run(); console.log('Finished generating screenshots!'); ``` ### pageres.source(url, sizes, options?) Add a page to screenshot. #### url *Required*\ Type: `string` URL or local path to the website you want to screenshot. You can also use a data URI. #### sizes *Required*\ Type: `string[]` Use a `x` notation. #### options Type: `object` Options set here will take precedence over the ones set in the constructor. ### pageres.sourceHtml(html, sizes, options?) Capture a screenshot of rendered HTML. #### html *Required*\ Type: `string` HTML string to render and screenshot. #### sizes *Required*\ Type: `string[]` Use a `x` notation. #### options Type: `object` Options set here will take precedence over the ones set in the constructor. ### pageres.destination(directory) Set the destination directory. #### directory Type: `string` ### pageres.run() Run pageres. Returns `Promise`. ## Task runners Check out [grunt-pageres](https://github.com/sindresorhus/grunt-pageres) if you're using Grunt. For Gulp and Broccoli, just use the API directly. No need for a wrapper plugin. ## Built with Pageres - [Break Shot](https://github.com/victorferraz/break-shot) - Desktop app for capturing screenshots of responsive websites. ## Related - [capture-website](https://github.com/sindresorhus/capture-website) - A different take on screenshotting websites --- _Source: https://npm.io/package/pageres · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._