# @previewjs/screenshot

> This library leverages the power of Preview.js foundations in conjunction with [Playwright](https://playwright.dev) to generate screenshots of any components and stories that [Preview.js](https://previewjs.com) can render.

Latest version **1.0.1** (published 2024-12-16) · AGPL-3.0 license · 0 weekly downloads

## Install

```sh
npm install @previewjs/screenshot
pnpm add @previewjs/screenshot
yarn add @previewjs/screenshot
bun add @previewjs/screenshot
```

## Health

**Score 45/100 (D)** — status: stable.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2024-12-16 |
| First published | 2023-04-09 |
| Weekly downloads | 0 |
| License | AGPL-3.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=18.20.3 |
| Dependencies | 6 |
| Unpacked size | 57.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1935 |
| Author | François Wouts |
| Maintainers | fwouts |

## Links

- npm: https://www.npmjs.com/package/@previewjs/screenshot
- Repository: https://github.com/fwouts/previewjs
- Homepage: https://previewjs.com
- Issues: https://github.com/fwouts/previewjs/issues
- npm.io page: https://npm.io/package/@previewjs/screenshot

## Dependencies (6)

- [globby](https://npm.io/package/globby.md) ^14.0.2
- [playwright](https://npm.io/package/playwright.md) ^1.49.1
- [@previewjs/core](https://npm.io/package/@previewjs/core.md) ^30.1.0
- [@previewjs/chromeless](https://npm.io/package/@previewjs/chromeless.md) ^14.0.1
- [@previewjs/analyzer-api](https://npm.io/package/@previewjs/analyzer-api.md) ^0.1.8
- [@previewjs/plugin-react](https://npm.io/package/@previewjs/plugin-react.md) ^17.0.1

## Recent versions

- 1.0.1 (latest) — 2024-12-16
- 1.0.0 — 2024-12-10
- 0.3.2 — 2024-11-11
- 0.3.1 — 2024-02-21
- 0.3.0 — 2024-02-01
- 0.2.13 — 2023-11-30
- 0.2.12 — 2023-11-06
- 0.2.11 — 2023-11-04
- 0.2.10 — 2023-10-29
- 0.2.9 — 2023-09-26
- 0.2.8 — 2023-09-23
- 0.2.7 — 2023-09-12
- 0.2.6 — 2023-09-12
- 0.2.5 — 2023-09-10
- 0.2.4 — 2023-08-04
- … 16 more at https://npm.io/package/@previewjs/screenshot/versions

## README

# Generate screenshots with `@previewjs/screenshot`

This library leverages the power of Preview.js foundations in conjunction with [Playwright](https://playwright.dev) to generate screenshots of any components and stories that [Preview.js](https://previewjs.com) can render.

## Example with React

```js
// generate-screenshots.js

import reactPlugin from "@previewjs/plugin-react";
import { generateScreenshots } from "@previewjs/screenshot";
import playwright from "playwright";

const browser = await playwright.chromium.launch();
const page = await browser.newPage();
await generateScreenshots({
  page,
  frameworkPlugins: [reactPlugin],
  filePathPattern: "**/*.stories.{js,jsx,ts,tsx}",
  generateScreenshotPath({ filePath, name }) {
    return `${filePath}-${name}.png`;
  },
  onScreenshotGenerated({ filePath, name }) {
    console.log(`${filePath} 📸 ${name}`);
  },
});
await browser.close();
```

See [test-app/generate-screenshots.js](https://github.com/fwouts/previewjs/blob/main/screenshot/test-app/generate-screenshots.js) for a simple example.

See the [Hungry example app](https://github.com/fwouts/hungry/blob/main/generate-screenshots.mjs) for a more elaborate example along with a [GitHub Actions workflow](https://github.com/fwouts/hungry/blob/main/.github/workflows/screenshot.yml) that updates screenshots automatically in PRs.

## Setup

Install `playwright`, `@previewjs/screenshot` and the appropriate framework plugin as dev dependencies:

```sh
# NPM
$ npm install -D playwright @previewjs/screenshot @previewjs/plugin-[your-framework]

# PNPM
$ pnpm add -D playwright @previewjs/screenshot @previewjs/plugin-[your-framework]

# Yarn
$ yarn add -D playwright @previewjs/screenshot @previewjs/plugin-[your-framework]
```

Here are the available framework plugins at the time of writing:

- `@previewjs/plugin-preact`
- `@previewjs/plugin-react`
- `@previewjs/plugin-solid`
- `@previewjs/plugin-svelte`
- `@previewjs/plugin-vue2`
- `@previewjs/plugin-vue3`

Then write a Node.js script (like the example above) to generate your screenshots.

## Configuration

Given the brevity of the implementation (~60 LOC), you are encouraged to [read the source](https://github.com/fwouts/previewjs/blob/main/screenshot/src/index.ts) to understand the options that are available to you.

PRs welcome!

## License

This package is distributed under the AGPL-3.0 license, which is a [strong copyleft license](https://snyk.io/learn/agpl-license/).

Make sure that `@previewjs/screenshot` is in your `devDependencies` and that you do not redistribute it in your own packages and applications, unless you comply with the license requirements or obtain a separate commercial license.

---
_Source: https://npm.io/package/@previewjs/screenshot · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._