Warning

This package is no longer actively maintained.

Check out @previewjs/screenshot for an alternative.

ViteShot 📸

ViteShot is a fast and simple component screenshot tool based on Vite.

It supports Preact, React, Solid, Svelte and Vue 3.

Installation

# Install ViteShot.
npm install --save-dev viteshot # NPM
yarn add -D viteshot # Yarn
pnpm add -D viteshot # PNPM

# Set up ViteShot configuration in your repository.
viteshot init

Getting Started

Please refer to the documentation for more information.

Examples

All you need is to export UI components from files with the .screenshot.jsx/tsx/vue/svelte extension.

See examples:

• Preact
• React
• Solid
• Svelte
• Vue

Then, generate screenshots with:

# Take screenshots.
viteshot
> Capturing: src/__screenshots__/darwin/pixel2/App-App.png
> Capturing: src/__screenshots__/darwin/laptop/App-App.png
> Capturing: src/__screenshots__/darwin/pixel2/App-Clicked.png
> Capturing: src/__screenshots__/darwin/laptop/App-Clicked.png
> Capturing: src/__screenshots__/darwin/pixel2/App-Greet.png
> Capturing: src/__screenshots__/darwin/laptop/App-Greet.png
> Capturing: src/__screenshots__/darwin/laptop/App-HelloWorld.png
> Capturing: src/__screenshots__/darwin/pixel2/App-HelloWorld.png
> All done.

License

MIT