@previewjs/screenshot NPM

Generate screenshots with `@previewjs/screenshot`

This library leverages the power of Preview.js foundations in conjunction with Playwright to generate screenshots of any components and stories that Preview.js can render.

Example with React

// 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 for a simple example.

See the Hungry example app for a more elaborate example along with a GitHub Actions workflow that updates screenshots automatically in PRs.

Setup

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

# 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 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.

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.