viteshot

Viteshot

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

Warning

This package is no longer actively maintained.

Check out @previewjs/screenshot for an alternative.

logo


npm license


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:

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

Top categories

Loading Svelte Themes