{"id":17962985,"url":"https://github.com/marcincodes/scrshot","last_synced_at":"2026-05-06T22:05:14.867Z","repository":{"id":195015516,"uuid":"648196354","full_name":"marcincodes/scrshot","owner":"marcincodes","description":"Create up-to-date application screenshots","archived":false,"fork":false,"pushed_at":"2023-09-17T22:57:58.000Z","size":7236,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-31T00:54:17.004Z","etag":null,"topics":["cli","nextjs","react","screenshots","tools"],"latest_commit_sha":null,"homepage":"https://scrshot.dev","language":"Astro","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"agpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/marcincodes.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2023-06-01T12:22:22.000Z","updated_at":"2025-10-24T10:15:22.000Z","dependencies_parsed_at":"2023-10-16T10:58:02.553Z","dependency_job_id":null,"html_url":"https://github.com/marcincodes/scrshot","commit_stats":null,"previous_names":["perfect7m/scrshot","marcincodes/scrshot"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/marcincodes/scrshot","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcincodes%2Fscrshot","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcincodes%2Fscrshot/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcincodes%2Fscrshot/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcincodes%2Fscrshot/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/marcincodes","download_url":"https://codeload.github.com/marcincodes/scrshot/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcincodes%2Fscrshot/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32713832,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-06T19:35:05.142Z","status":"ssl_error","status_checked_at":"2026-05-06T19:35:03.996Z","response_time":117,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["cli","nextjs","react","screenshots","tools"],"created_at":"2024-10-29T11:21:58.603Z","updated_at":"2026-05-06T22:05:14.840Z","avatar_url":"https://github.com/marcincodes.png","language":"Astro","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Scrshot - create up-to-date application screenshots\n\n## Demo\n\nhttps://github.com/Perfect7M/scrshot/assets/5896181/695ee9ef-422f-40c3-8542-15c58e35139e\n\n## How does it works?\n\nA developer uses a Scrshot component called ScrshotArea on the page where we need a screenshot. This way it's marking an area for that screenshot.\n\nNext, it defines the config application URL, pages, background, rounded corners, etc.\nFinally, run the `scrshot dev` command that will take screenshots for all defined pages and save them in the destination folder.\n\nThen use them in your docs. When someone changes e.g., button text changes will be reflected on the screenshot automatically!\n\n\n## Usage\n\n0. Install dependency\n\nUsing npm:\n\n```bash\nnpm install  @scrshot/cli @scrshot/react @scrshot/build --save-dev\n```\n\nUsing yarn:\n\n```bash\nyarn add @scrshot/cli @scrshot/react @scrshot/build --dev\n```\n\n```bash\npnpm install  @scrshot/cli @scrshot/react @scrshot/build --save-dev\n```\n\n\n1. Add config file to project\nCreate a `.scrshotrc` config in root. Fill it with information about your project. \n\n```json\n{\n  \"url\": \"http://127.0.0.1:5173\",\n  \"dest\": \"src/assets\",\n  \"screenshots\": {\n    \"homepage\": {\n      \"path\": \"/\"\n    }\n  },\n}\n```\n\nFind more about [config](https://scrshot.dev/docs/cli/config/)\n\n2. Add a `ScrshotArea` component to the page. \nThis component marks a spot for the screenshot. Everything that is **visually** inside the component will be on a screenshot.\n\n```jsx\n\u003cdiv\u003e\n  This won't be on a screenshot\n  \u003cScrshotArea\u003e\n    \u003cdiv\u003eThis will be on screenshot\u003c/div\u003e\n  \u003c/ScrshotArea\u003e\n\u003c/div\u003e\n```\n\nFind more about [components](https://scrshot.dev/docs/components/)\n\n3. Run `scrshot dev`\n```bash\nnpm run scrshot dev\n```\n\nValidate and develop on your screenshots\n\nFind more about [CLI](https://scrshot.dev/docs/cli/dev/)\n\n4. Remove components form production build\n\nImport the proper plugin for your bundler system to get rid of scrshot components at build time\n\n```js\n// webpack.config.js\nimport Scrshot from '@scrshot/build/webpack'\n\nmodule.exports = {\n  plugins: [\n    Scrshot()\n  ],\n}\n```\n\nFind more about [build](https://scrshot.dev/docs/build/)\n\n## License\n\nYou can use it in your projects freely, even commercial ones. But every modifications must be disclosed at the same license.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarcincodes%2Fscrshot","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarcincodes%2Fscrshot","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarcincodes%2Fscrshot/lists"}