{"id":13403577,"url":"https://github.com/sindresorhus/capture-website","last_synced_at":"2025-05-13T18:08:56.612Z","repository":{"id":34082714,"uuid":"169625338","full_name":"sindresorhus/capture-website","owner":"sindresorhus","description":"Capture screenshots of websites","archived":false,"fork":false,"pushed_at":"2024-12-03T19:36:52.000Z","size":96,"stargazers_count":1968,"open_issues_count":31,"forks_count":139,"subscribers_count":13,"default_branch":"main","last_synced_at":"2025-05-10T03:33:03.437Z","etag":null,"topics":["capture-screenshots","nodejs","npm-package","puppeteer","screenshots","website-screenshot","website-screenshot-capturer"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sindresorhus.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"license","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":"sindresorhus","open_collective":"sindresorhus","buy_me_a_coffee":"sindresorhus","custom":"https://sindresorhus.com/donate"}},"created_at":"2019-02-07T19:01:12.000Z","updated_at":"2025-05-08T02:12:14.000Z","dependencies_parsed_at":"2024-03-02T03:09:52.034Z","dependency_job_id":"3f330b6d-284e-4a0d-857d-b770fa588dea","html_url":"https://github.com/sindresorhus/capture-website","commit_stats":{"total_commits":117,"total_committers":25,"mean_commits":4.68,"dds":"0.28205128205128205","last_synced_commit":"bd10c93cbb394d133a10daa74d694c9b41355981"},"previous_names":[],"tags_count":45,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sindresorhus%2Fcapture-website","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sindresorhus%2Fcapture-website/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sindresorhus%2Fcapture-website/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sindresorhus%2Fcapture-website/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sindresorhus","download_url":"https://codeload.github.com/sindresorhus/capture-website/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253625855,"owners_count":21938209,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["capture-screenshots","nodejs","npm-package","puppeteer","screenshots","website-screenshot","website-screenshot-capturer"],"created_at":"2024-07-30T19:01:31.872Z","updated_at":"2025-05-13T18:08:56.588Z","avatar_url":"https://github.com/sindresorhus.png","language":"JavaScript","readme":"# capture-website\n\n\u003e Capture screenshots of websites\n\nIt uses [Puppeteer](https://github.com/GoogleChrome/puppeteer) (Chrome) under the hood.\n\nSee [capture-website-cli](https://github.com/sindresorhus/capture-website-cli) for the command-line tool.\n\n## Install\n\n```sh\nnpm install capture-website\n```\n\nNote to Linux users: If you get a sandbox-related error, you need to enable [system sandboxing](#im-getting-a-sandbox-related-error).\n\n## Usage\n\n```js\nimport captureWebsite from 'capture-website';\n\nawait captureWebsite.file('https://sindresorhus.com', 'screenshot.png');\n```\n\n## API\n\n### captureWebsite.file(input, outputFilePath, options?)\n\nCapture a screenshot of the given `input` and save it to the given `outputFilePath`.\n\nIntermediate directories are created for you if they do not exist.\n\nReturns a `Promise\u003cvoid\u003e` that resolves when the screenshot is written.\n\n### captureWebsite.buffer(input, options?)\n\nCapture a screenshot of the given `input`.\n\nReturns a `Promise\u003cBuffer\u003e` with the screenshot as binary.\n\n### captureWebsite.base64(input, options?)\n\nCapture a screenshot of the given `input`.\n\nReturns a `Promise\u003cstring\u003e` with the screenshot as [Base64](https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/Base64_encoding_and_decoding).\n\n#### input\n\nType: `string`\n\nThe URL, file URL, data URL, local file path to the website, or HTML.\n\n```js\nimport captureWebsite from 'capture-website';\n\nawait captureWebsite.file('index.html', 'local-file.png');\n```\n\n#### options\n\nType: `object`\n\n##### inputType\n\nType: `string`\\\nDefault: `'url'`\\\nValues: `'url' | 'html'`\n\nSet it to `html` to treat `input` as HTML content.\n\n```js\nimport captureWebsite from 'capture-website';\n\nawait captureWebsite.file('\u003ch1\u003eAwesome!\u003c/h1\u003e', 'screenshot.png', {\n\tinputType: 'html'\n});\n```\n\n##### width\n\nType: `number`\\\nDefault: `1280`\n\nPage width.\n\n##### height\n\nType: `number`\\\nDefault: `800`\n\nPage height.\n\n##### type\n\nType: `string`\\\nValues: `'png' | 'jpeg' | 'webp'`\\\nDefault: `'png'`\n\nImage type.\n\n##### quality\n\nType: `number`\\\nValues: `0...1`\\\nDefault: `1`\n\nImage quality. Only for `{type: 'jpeg'}` and `{type: 'webp'}`.\n\n##### scaleFactor\n\nType: `number`\\\nDefault: `2`\n\nScale the webpage `n` times.\n\nThe default is what you would get if you captured a normal screenshot on a computer with a retina (High DPI) screen.\n\n##### emulateDevice\n\nType: `string`\\\nValues: [Devices](https://github.com/puppeteer/puppeteer/blob/main/packages/puppeteer-core/src/common/Device.ts) *(Use the `name` property)*\n\nMake it look like the screenshot was taken on the specified device.\n\nThis overrides the `width`, `height`, `scaleFactor`, and `userAgent` options.\n\n```js\nimport captureWebsite from 'capture-website';\n\nawait captureWebsite.file('https://sindresorhus.com', 'screenshot.png', {\n\temulateDevice: 'iPhone X'\n});\n```\n\n##### fullPage\n\nType: `boolean`\\\nDefault: `false`\n\nCapture the full scrollable page, not just the viewport.\n\n##### defaultBackground\n\nType: `boolean`\\\nDefault: `true`\n\nInclude the default white background.\n\nDisabling this lets you capture screenshots with transparency.\n\n##### timeout\n\nType: `number` *(seconds)*\\\nDefault: `60`\n\nThe number of seconds before giving up trying to load the page.\n\nSpecify `0` to disable the timeout.\n\n##### delay\n\nType: `number` *(seconds)*\\\nDefault: `0`\n\nThe number of seconds to wait after the page finished loading before capturing the screenshot.\n\nThis can be useful if you know the page has animations that you like it to finish before capturing the screenshot.\n\n##### waitForElement\n\nType: `string`\n\nWait for a DOM element matching the given [CSS selector](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors) to appear in the page and to be visible before capturing the screenshot. It times out after `options.timeout` seconds.\n\n##### element\n\nType: `string`\n\nCapture the DOM element matching the given [CSS selector](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors). It will wait for the element to appear in the page and to be visible. It times out after `options.timeout` seconds. Any actions performed as part of `options.beforeScreenshot` occur before this.\n\n##### hideElements\n\nType: `string[]`\n\nHide DOM elements matching the given [CSS selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors).\n\nCan be useful for cleaning up the page.\n\nThis sets [`visibility: hidden`](https://stackoverflow.com/a/133064/64949) on the matched elements.\n\n```js\nimport captureWebsite from 'capture-website';\n\nawait captureWebsite.file('https://sindresorhus.com', 'screenshot.png', {\n\thideElements: [\n\t\t'#sidebar',\n\t\t'img.ad'\n\t]\n});\n```\n\n##### removeElements\n\nType: `string[]`\n\nRemove DOM elements matching the given [CSS selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors).\n\nThis sets [`display: none`](https://stackoverflow.com/a/133064/64949) on the matched elements, so it could potentially break the website layout.\n\n##### clickElement\n\nType: `string`\n\nClick the DOM element matching the given [CSS selector](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors).\n\n##### scrollToElement\n\nType: `string | object`\n\nScroll to the DOM element matching the given [CSS selector](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors).\n\n###### element\n\nType: `string`\n\nA [CSS selector](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors).\n\n###### offsetFrom\n\nType: `string`\\\nValues: `'top' | 'right' | 'bottom' | 'left'`\n\nOffset origin.\n\n###### offset\n\nType: `number`\n\nOffset in pixels.\n\n##### disableAnimations\n\nType: `boolean`\\\nDefault: `false`\n\nDisable CSS [animations](https://developer.mozilla.org/en-US/docs/Web/CSS/animation) and [transitions](https://developer.mozilla.org/en-US/docs/Web/CSS/transition).\n\n##### blockAds\n\nType: `boolean`\\\nDefault: `true`\n\n[Ad blocking.](https://github.com/ghostery/adblocker/blob/master/packages/adblocker-puppeteer/README.md)\n\n##### isJavaScriptEnabled\n\nType: `boolean`\\\nDefault: `true`\n\nWhether JavaScript on the website should be executed.\n\nThis does not affect the `scripts` and `modules` options.\n\n##### modules\n\nType: `string[]`\n\nInject [JavaScript modules](https://developers.google.com/web/fundamentals/primers/modules) into the page.\n\nAccepts an array of inline code, absolute URLs, and local file paths (must have a `.js` extension).\n\n```js\nimport captureWebsite from 'capture-website';\n\nawait captureWebsite.file('https://sindresorhus.com', 'screenshot.png', {\n\tmodules: [\n\t\t'https://sindresorhus.com/remote-file.js',\n\t\t'local-file.js',\n\t\t`\n\t\tdocument.body.style.backgroundColor = 'red';\n\t\t`\n\t]\n});\n```\n\n##### scripts\n\nType: `string[]`\n\nSame as the `modules` option, but instead injects the code as [`\u003cscript\u003e` instead of `\u003cscript type=\"module\"\u003e`](https://developers.google.com/web/fundamentals/primers/modules). Prefer the `modules` option whenever possible.\n\n##### styles\n\nType: `string[]`\n\nInject CSS styles into the page.\n\nAccepts an array of inline code, absolute URLs, and local file paths (must have a `.css` extension).\n\n```js\nimport captureWebsite from 'capture-website';\n\nawait captureWebsite.file('https://sindresorhus.com', 'screenshot.png', {\n\tstyles: [\n\t\t'https://sindresorhus.com/remote-file.css',\n\t\t'local-file.css',\n\t\t`\n\t\tbody {\n\t\t\tbackground-color: red;\n\t\t}\n\t\t`\n\t]\n});\n```\n\n##### headers\n\nType: `object`\\\nDefault: `{}`\n\nSet custom [HTTP headers](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers).\n\n```js\nimport captureWebsite from 'capture-website';\n\nawait captureWebsite.file('https://sindresorhus.com', 'screenshot.png', {\n\theaders: {\n\t\t'x-powered-by': 'https://github.com/sindresorhus/capture-website'\n\t}\n});\n```\n\n##### userAgent\n\nType: `string`\n\nSet a custom [user agent](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/User-Agent).\n\n##### cookies\n\nType: `Array\u003cstring | object\u003e`\n\nSet cookies in [browser string format](https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies) or [object format](https://pptr.dev/api/puppeteer.page.setcookie).\n\nTip: Go to the website you want a cookie for and [copy-paste it from DevTools](https://stackoverflow.com/a/24961735/64949).\n\n```js\nimport captureWebsite from 'capture-website';\n\nawait captureWebsite.file('https://sindresorhus.com', 'screenshot.png', {\n\tcookies: [\n\t\t// This format is useful for when you copy it from the browser\n\t\t'id=unicorn; Expires=Wed, 21 Oct 2018 07:28:00 GMT;',\n\n\t\t// This format is useful for when you have to manually create a cookie\n\t\t{\n\t\t\tname: 'id',\n\t\t\tvalue: 'unicorn',\n\t\t\texpires: Math.round(new Date('2018-10-21').getTime() / 1000)\n\t\t}\n\t]\n});\n```\n\n##### authentication\n\nType: `object`\n\nCredentials for [HTTP authentication](https://developer.mozilla.org/en-US/docs/Web/HTTP/Authentication).\n\n###### username\n\nType: `string`\n\n###### password\n\nType: `string`\n\n##### beforeScreenshot\n\nType: `Function`\n\nThe 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://pptr.dev/api/puppeteer.page) as the first argument and the [`browser` instance](https://pptr.dev/api/puppeteer.browser) as the second argument. This gives you a lot of power to do custom stuff. The function can be async.\n\nNote: Make sure to not call `page.close()` or `browser.close()`.\n\n```js\nimport captureWebsite from 'capture-website';\nimport checkSomething from './check-something.js';\n\nawait captureWebsite.file('https://sindresorhus.com', 'screenshot.png', {\n\tbeforeScreenshot: async (page, browser) =\u003e {\n\t\tawait checkSomething();\n\t\tawait page.click('#activate-button');\n\t\tawait page.waitForSelector('.finished');\n\t}\n});\n```\n\n##### debug\n\nType: `boolean`\\\nDefault: `false`\n\nShow the browser window so you can see what it's doing, redirect page console output to the terminal, and slow down each Puppeteer operation.\n\nNote: This overrides `launchOptions` with `{headless: false, slowMo: 100}`.\n\n##### darkMode\n\nType: `boolean`\\\nDefault: `false`\n\nEmulate preference of dark color scheme ([`prefers-color-scheme`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme)).\n\n##### inset\n\nType: `object | number`\\\nDefault: `0`\n\nInset the bounding box of the screenshot.\n\nAccepts an object `{top?: number; right?: number; bottom?: number; left?: number}` or a `number` as a shorthand for all directions.\n\nPositive values, for example `inset: 10`, will decrease the size of the screenshot.\nNegative values, for example `inset: {left: -10}`, will increase the size of the screenshot.\n\nNote: This option is ignored if the `fullPage` option is set to `true`. Can be combined with the `element` option.\nNote: When the `width` or `height` of the screenshot is equal to `0` an error is thrown.\n\nExample: Include 10 pixels around the element.\n\n```js\nimport captureWebsite from 'capture-website';\n\nawait captureWebsite.file('index.html', 'screenshot.png', {\n\telement: '.logo',\n\tinset: -10\n});\n```\n\nExample: Ignore 15 pixels from the top of the viewport.\n\n```js\nimport captureWebsite from 'capture-website';\n\nawait captureWebsite.file('index.html', 'screenshot.png', {\n\tinset: {\n\t\ttop: 15\n\t}\n});\n```\n\n##### launchOptions\n\nType: `object`\\\nDefault: `{headless: 'new'}`\n\nOptions passed to [`puppeteer.launch()`](https://pptr.dev/api/puppeteer.puppeteernodelaunchoptions).\n\nNote: Some of the launch options are overridden by the `debug` option.\n\n##### overwrite\n\nType: `boolean`\\\nDefault: `false`\n\nOverwrite the destination file if it exists instead of throwing an error.\n\n*This option applies only to `captureWebsite.file()`.*\n\n##### preloadFunction\n\nType: `string | Function`\\\nDefault: `undefined`\n\nInject a function to be executed prior to navigation.\n\nThis can be useful for [altering the JavaScript environment](https://pptr.dev/api/puppeteer.page.evaluateonnewdocument). For example, you could define a global method on the `window`, overwrite `navigator.languages` to change the language presented by the browser, or mock `Math.random` to return a fixed value.\n\n##### clip\n\nType: `object`\n\nDefine the screenshot's position and size (clipping region).\n\nThe position can be specified through `x` and `y` coordinates which starts from the top-left.\n\nThis can be useful when you only need a part of the page.\n\nYou can also consider using `element` option when you have a [CSS selector](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors).\n\nNote that `clip` is mutually exclusive with the `element` and `fullPage` options.\n\n- **x** - X-coordinate where the screenshot starts.\nType: `number`\n- **y** - Y-coordinate where the screenshot starts.\nType: `number`\n- **width** - The width of the screenshot.\nType: `number`\n- **height** - The height of the screenshot.\nType: `number`\n\nFor example, define the screenshot's `width` and `height` to 400 at position (0, 0):\n\n```js\nimport captureWebsite from 'capture-website';\n\nawait captureWebsite.file('https://sindresorhus.com', 'screenshot.png', {\n\tclip: {\n\t\tx: 0,\n\t\ty: 0,\n\t\twidth: 400,\n\t\theight: 400\n\t}\n});\n```\n\n### captureWebsite.devices\n\nType: `string[]`\n\nDevices supported by the `emulateDevice` option.\n\n## Tips\n\n### Capturing multiple screenshots\n\n```js\nimport captureWebsite from 'capture-website';\n\nconst options = {\n\twidth: 1920,\n\theight: 1000\n};\n\nconst items = [\n\t['https://sindresorhus.com', 'sindresorhus'],\n\t['https://github.com', 'github'],\n\t// …\n];\n\nawait Promise.all(items.map(([url, filename]) =\u003e {\n\treturn captureWebsite.file(url, `${filename}.png`, options);\n}));\n```\n\n*Check out [`filenamify-url`](https://github.com/sindresorhus/filenamify-url) if you need to create a filename from the URL.*\n\n## FAQ\n\n### I'm getting a sandbox-related error\n\nIf you get an error like `No usable sandbox!` or `Running as root without --no-sandbox is not supported`, you need to properly [set up sandboxing](https://pptr.dev/troubleshooting#setting-up-chrome-linux-sandbox) on your Linux instance.\n\nAlternatively, if you completely trust the content, you can disable sandboxing (strongly discouraged):\n\n```js\nimport captureWebsite from 'capture-website';\n\nawait captureWebsite.file('…', '…', {\n\tlaunchOptions: {\n\t\targs: [\n\t\t\t'--no-sandbox',\n\t\t\t'--disable-setuid-sandbox'\n\t\t]\n\t}\n});\n```\n\n### How is this different from your [Pageres](https://github.com/sindresorhus/pageres) project?\n\nThe biggest difference is that Pageres supports capturing multiple screenshots in a single call and it automatically generates the filenames and writes the files. Also, when projects are popular and mature, like Pageres, it becomes harder to make drastic changes. There are many things I would change in Pageres today, but I don't want to risk making lots of breaking changes for such a large userbase before I know whether it will work out or not. So this package is a rethink of how I would have made Pageres had I started it today. I plan to bring some things back to Pageres over time.\n\n## Related\n\n- [capture-website-cli](https://github.com/sindresorhus/capture-website-cli) - CLI for this module\n- [pageres](https://github.com/sindresorhus/pageres) - A different take on screenshotting websites\n","funding_links":["https://github.com/sponsors/sindresorhus","https://opencollective.com/sindresorhus","https://buymeacoffee.com/sindresorhus","https://sindresorhus.com/donate"],"categories":["JavaScript","nodejs","Packages","Open Source Libraries"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsindresorhus%2Fcapture-website","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsindresorhus%2Fcapture-website","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsindresorhus%2Fcapture-website/lists"}