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.

React

/src/components/example.screenshot.jsx

import React from "react";
export const MyScreenshot = () => <div>Hello, World!</div>;

Preact

/src/components/example.screenshot.jsx

import { h } from "preact";
export const MyScreenshot = () => <div>Hello, World!</div>;

Solid

/src/components/example.screenshot.jsx

export const MyScreenshot = () => <div>Hello, World!</div>;

Svelte

/src/components/example.screenshot.svelte

<div>Hello, World!</div>

Vue 3

/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 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!