ViteShot

Generate store screenshots and promo images with code, powered by Vite.

Why?

With AI, it's common for developers with less design experience to generate store screenshots and promo images. However, one shot image generation models aren't very good at this yet.

However, AI is really good at building simple UIs with HTML! ViteShot provides a simple way for agents in your preferred dev environment to create and export images in a structured, easy-to-iterate way.

Get Started

1. Add Vite and ViteShot as dev dependencies to your project:

   bun add -D @aklinker1/viteshot vite

2. Initialize the ./store directory:

   bun viteshot init store

3. Add the following scripts to your package.json:

   {
     "scripts": {
       "store:dev": "viteshot dev store",
       "store:export": "viteshot export store",
     }
   }

Then export your screenshots with bun store:export! Screenshots will be output to store/exports.

Design Files

Your screenshot designs go in store/designs/{name}@{width}x{height}.{ext}.

• {name}: The name of your screenshot, it can be anything (ex: "small-marquee", "screenshot-1", etc).
• {width}x{height}: The size your screenshot should be rendered at (ex: "1280x600", "640x400").
• {ext}: ViteShot supports a variety of file extensions, so you can build your designs using your preferred frontend framework!

HTML

1. Define an HTML fragment, this will be added to the body element automatically.
2. Translations can be accessed using the handlebars syntax

<!-- designs/[email protected]>
<p>{{path.to.message}}</p>

[!NOTE]

You don't need a frontend framework to build a simple static layout. Using HTML design files is recommended.

Vue

1. Add @vitejs/plugin-vue to store/viteshot.config.ts
2. Use the t prop to access translations for the current locale

<!-- store/designs/[email protected] -->
<script lang="ts" setup>
import "../assets/tailwind.css";

defineProps<{
  t: Record<string, any>;
}>();
</script>

<template>
  <p>{{ t.path.to.message }}</p>
</template>

Svelte

1. Add @sveltejs/vite-plugin-svelte to store/viteshot.config.ts
2. Use the t prop to access translations for the current locale

<!-- store/designs/[email protected] -->
<script lang="ts">
  export let t: Record<string, any>
</script>

<p>{t.path.to.message}</p>

React

1. Add @vitejs/plugin-react to store/viteshot.config.ts
2. You're component must be the default export
3. Use the t prop to access translations for the current locale

// store/designs/[email protected]
import React from "react";
import "../assets/tailwind.css";

export default function (props: { t: Record<string, any> }) {
  return <p>{t.path.to.message}</p>;
}

Styling

There are a few ways of adding CSS to your screenshots:

1. Add global, shared CSS to your viteshot.config.ts file:

   import { defineConfig } from "@aklinker1/viteshot";
   
   export default defineConfig({
     screenshots: {
       css: ["assets/tailwind.css"], // Supports SCSS, SASS, etc
     },
   });

2. Import your CSS files from inside your design file

   import "../assets/tailwind.css";
   
   export default function () {
     return <div>...</div>;
   }

3. Use inline <style> blocks

   <style>
     ...
   </style>
   
   <div>...</div>

| Method | HTML | Vue | Svelte | React | | ---------------- | :--: | :-: | :----: | :---: | | Add css config | ✅ | ✅ | ✅ | ✅ | | Import CSS file | ❌ | ✅ | ✅ | ✅ | | Inline <style> | ✅ | ✅ | ✅ | ❌ |

Assets

Vite allows you to put assets in two folders:

1. assets/
2. public/

For HTML designs, you need to put files in public/, but for the other supported frameworks, you can use assets/ and import them into your design file.

| Method | HTML | Vue | Svelte | React | | --------- | :--: | :-: | :----: | :---: | | assets/ | ❌ | ✅ | ✅ | ✅ | | public/` | ✅ | ✅ | ✅ | ✅ |

Review Vite's docs for how to import or use assets from each directory.