Getting Started
#
OverviewViteShot (named after Vite, pronounced /vit/
) is a command-line tool that renders screenshots from components.
You can learn more about the rationale behind ViteShot in the Why ViteShot section.
#
InstallationWith NPM:
$ npm install viteshot playwright
With Yarn:
$ yarn add viteshot playwright
With PNPM:
$ pnpm add viteshot playwright
#
First Time SetupTo set up ViteShot in your project, run:
$ viteshot init
ViteShot will automatically detect which framework you're using and set up the appropriate defaults for you.
#
Create your first screenshotSelect your framework below for an example.
- React
- Preact
- Solid
- Svelte
- Vue 3
/src/components/example.screenshot.jsx
import React from "react";
export const MyScreenshot = () => <div>Hello, World!</div>;
/src/components/example.screenshot.jsx
import { h } from "preact";
export const MyScreenshot = () => <div>Hello, World!</div>;
/src/components/example.screenshot.jsx
export const MyScreenshot = () => <div>Hello, World!</div>;
/src/components/example.screenshot.svelte
<div>Hello, World!</div>
/src/components/example.screenshot.vue
<template> <div>Hello, World!</div></template>
<script lang="ts">import { defineComponent } from "vue";
export default defineComponent({ name: "MyScreenshot",});</script>
#
Generate screenshotsTo generate screenshots, run:
$ viteshot
You should see an output similar to:
Capturing: src/components/__screenshots__/darwin/example-MyScreenshot.pngAll done.
That's it!