https://github.com/tool3/snapage
📸 snap a web page
https://github.com/tool3/snapage
Last synced: about 1 month ago
JSON representation
📸 snap a web page
- Host: GitHub
- URL: https://github.com/tool3/snapage
- Owner: tool3
- License: mit
- Created: 2021-02-05T20:27:55.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2025-10-03T15:38:42.000Z (9 months ago)
- Last Synced: 2025-10-03T17:51:17.244Z (9 months ago)
- Language: JavaScript
- Homepage:
- Size: 6.73 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# snapage
snap a page !
snapage allows to create high quality web page screenshots/pdfs,
for multiple viewports concurrently, with custom styles, element screeenshots, scripts and more!
# install
```bash
npm install snapage
```
# usage
```js
const snap = require('snapage');
(async () => {
await snap('https://apple.com', {
name: 'iPad Pro',
fullPage: true,
scroll: true,
viewports: ['iPad Pro'],
style: {
filter: 'grayscale(100%)'
}
});
})();
```
# features
✅ plug and play
✅ element & full page screenshots
✅ custom css styles
✅ custom script to run before snap
✅ supports pdf
✅ supports all chrome emulated devices and their orientation
✅ supports lazy loaded content by scrolling the page
✅ uses puppeteer-cluster for concurrenct screenshots
# api
```typescript
export type Style = Record;
// for string viewport, snapage will emulate the given device (e.g 'Nexus 4 landscape')
// see pptr devices: https://github.com/puppeteer/puppeteer/blob/main/src/common/DeviceDescriptors.ts
export type Viewport = string | {
width?: number;
height?: number;
}
export type SnapOptions = {
name?: string;
path?: string;
viewports?: Viewport[];
style?: Style;
script?: string;
fullPage?: boolean;
scroll?: boolean;
persist?: boolean;
printBackground?: boolean;
mode?: string;
wait?: number;
};
export type SnapMeta = {
name: string;
snapPath: string;
snapDir: string;
viewport: Viewport;
device: boolean;
opts: Record;
};
export type SnapResult = {
meta: SnapMeta[];
snaps: Buffer[];
}
export default function snap(url: string, options?: SnapOptions): Promise;
```
# examples
## pdf
snap a full page pdf of `apple.com`, in an iPhone X and desktop 800x600, scroll the page to get lazy loaded content.
```javascript
const snap = require('snapage');
(async () => {
await snap('https://apple.com', {
mode: 'pdf',
scroll: true,
viewports: ['iPhone X', {width: 800, height: 600}]
});
})()
```
## custom css style
snap a viewport screenshot of `apple.com`, on desktop 800x600, desaturate colors by 50%.
```javascript
const snap = require('snapage');
(async () => {
await snap('https://apple.com', {
style: {
filter: 'saturate(50%)'
},
viewports: [{width: 800, height: 600}, '']
});
})()
```
## custom script
snap a viewport screenshot of `npmjs.com`, on desktop 1200x1080, add a red border to every element on the page via a script.
```javascript
const snap = require('snapage');
(async () => {
await snap('https://www.npmjs.com', {
script: 'document.querySelectorAll("*").forEach(e => e.style.border = "1px solid red")',
viewports: [{width: 1200, height: 1080}]
});
})()
```
## don't persist
don't persist screenshots instead return screenshot per viewport provided in the `viewports` array.
by default, `snapage`saves the screenshots/pdfs to the `snapDir` provided in config.
```typescript
import snap, {SnapResult} from 'snapage';
const screenshots: SnapResult = await snap('https://google.com', {
persist: false,
viewports: ['iPad Pro', { width: 800, height: 600 }],
});
console.log(screenshots);
// {
// snaps: [
// ,
//
// ],
// meta: [
// {
// viewport: 'iPad Pro',
// name: 'snap_YCT5Qt5',
// snapPath: undefined,
// snapDir: '/workspaces/experiments/snapage/snaps',
// opts: [Object],
// device: true
// },
// {
// viewport: [Object],
// name: 'snap_aW3dz0g',
// snapPath: undefined,
// snapDir: '/workspaces/experiments/snapage/snaps',
// opts: [Object],
// device: false
// },
// ]
// }
```