Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/fwouts/viteshot

Viteshot 📸 is a fast and simple component screenshot tool based on Vite.
https://github.com/fwouts/viteshot

javascript preact react screenshot solid-js svelte vue

Last synced: 6 days ago
JSON representation

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

Awesome Lists containing this project

README

        

> **Warning**
>
> This package is no longer actively maintained.
>
> Check out [@previewjs/screenshot](https://github.com/fwouts/previewjs/tree/main/screenshot) for an alternative.


logo






npm


license



# ViteShot 📸

ViteShot is a fast and simple component screenshot tool based on [Vite](https://vitejs.dev).

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

![Gif preview](viteshot.gif)

## Installation

```sh

# 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](https://viteshot.com/docs/getting-started) 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](https://github.com/zenclabs/viteshot/blob/main/examples/preact/src/App.screenshot.tsx)
- [React](https://github.com/zenclabs/viteshot/blob/main/examples/react-tsx/src/App.screenshot.tsx)
- [Solid](https://github.com/zenclabs/viteshot/blob/main/examples/solid/src/App.screenshot.tsx)
- [Svelte](https://github.com/zenclabs/viteshot/blob/main/examples/svelte/src/lib/Counter.screenshot.svelte)
- [Vue](https://github.com/zenclabs/viteshot/blob/main/examples/vue/src/components/HelloWorld.screenshot.vue)

Then, generate screenshots with:

```sh
# 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