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 initGetting 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:
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