Warning
This package is no longer actively maintained.
Check out @previewjs/screenshot for an alternative.
ViteShot is a fast and simple component screenshot tool based on Vite.
It supports Preact, React, Solid, Svelte and Vue 3.
# 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
Please refer to the documentation for more information.
All you need is to export UI components from files with the .screenshot.jsx/tsx/vue/svelte
extension.
See examples:
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.
MIT