Skip to main content

Getting Started

Overview#

ViteShot (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.

Installation#

With NPM:

$ npm install viteshot playwright

With Yarn:

$ yarn add viteshot playwright

With PNPM:

$ pnpm add viteshot playwright

First Time Setup#

To 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 screenshot#

Select your framework below for an example.

/src/components/example.screenshot.jsx
import React from "react";
export const MyScreenshot = () => <div>Hello, World!</div>;

Generate screenshots#

To generate screenshots, run:

$ viteshot

You should see an output similar to:

Capturing: src/components/__screenshots__/darwin/example-MyScreenshot.pngAll done.

That's it!