viteshot
    TypeScript icon, indicating that this package has built-in type declarations

    0.3.1 • Public • Published

    logo


    npm license


    ViteShot 📸

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

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

    Gif preview

    Installation

    # 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 for more information.

    Examples

    All you need is to export UI components from files with the .screenshot.jsx/tsx/vue/svelte extension.

    See examples:

    Then, generate screenshots with:

    # 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

    Keywords

    none

    Install

    npm i viteshot

    DownloadsWeekly Downloads

    897

    Version

    0.3.1

    License

    MIT

    Unpacked Size

    47.2 kB

    Total Files

    64

    Last publish

    Collaborators

    • fwouts