Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: about 1 month ago
JSON representation
Viteshot 📸 is a fast and simple component screenshot tool based on Vite.
- Host: GitHub
- URL: https://github.com/fwouts/viteshot
- Owner: fwouts
- License: mit
- Created: 2021-06-26T04:49:44.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-04-10T23:33:40.000Z (over 1 year ago)
- Last Synced: 2024-05-01T15:15:37.475Z (2 months ago)
- Topics: javascript, preact, react, screenshot, solid-js, svelte, vue
- Language: TypeScript
- Homepage: https://viteshot.com
- Size: 10.1 MB
- Stars: 211
- Watchers: 2
- Forks: 12
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Lists
- awesome-stars - fwouts/viteshot - Viteshot 📸 is a fast and simple component screenshot tool based on Vite. (TypeScript)
README
> **Warning**
>
> This package is no longer actively maintained.
>
> Check out [@previewjs/screenshot](https://github.com/fwouts/previewjs/tree/main/screenshot) for an alternative.
# 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.
## 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