Cover Studio
Turn your app screenshots into a cover for your README, Product Hunt or LinkedIn.
Free, open source and 100% client-side.
Try it · Report a bug · Contribute
The cover above was made with Cover Studio itself. Drop in your screenshots (or let Cover Studio
capture your site from its URL), pick a template and a brand colour, and export a PNG.
Features
- 27 templates (showcase, spotlight, bento, mobile-trio, aurora, editorial, three before / after layouts, testimonial…)
- Up to 5 screenshots, reordered by drag and drop
- Capture from a URL: the site is analysed, you pick the pages, and they are captured on desktop
and mobile (optional service, see docs/CAPTURE.md)
- One brand colour: the whole palette is derived from it
- Adjustable texts, app icon, typography and sizes
- PNG export in several formats (cover, Open Graph, GitHub, X, Product Hunt, square), in high
resolution
- Interface in English, French and Spanish, light and dark themes
- 100% client-side: no image is ever uploaded and no account is needed. The one optional
exception: capturing from a URL sends the address you type to the capture service
Quick start
Requirements: Node.js 20 or later and pnpm 10.
git clone https://github.com/roosveltkn/cover-studio.git
cd cover-studio
pnpm install
pnpm dev
Open http://localhost:3000.
Scripts
| Command | Purpose |
|---|
pnpm dev | development server |
pnpm build | production build (static export to out/) |
pnpm lint | ESLint |
pnpm typecheck | TypeScript check |
pnpm format | Prettier formatting |
pnpm i18n:check | translation consistency (keys, variables, hard-coded text) |
pnpm readme:visuals | regenerate the README cover and GIF (after pnpm build) |
pnpm test | unit tests (Vitest) |
pnpm test:e2e | build, then end-to-end tests (Playwright) |
pnpm capture:dev | local capture service (vercel dev) |
pnpm capture:test | capture service tests |
pnpm capture:typecheck | capture service TypeScript check |
Stack
Next.js (App Router, static export) · React 19 · TypeScript ·
Tailwind CSS 4 · shadcn/ui (Base UI) · Zustand · modern-screenshot · dnd-kit.
The optional capture service runs headless Chromium (puppeteer-core and @sparticuz/chromium)
on Vercel Functions.
Project structure
app/ pages (landing, editor) and SEO metadata
components/ editor, landing and UI components
templates/ one folder per cover template, plus the registry (registry.ts)
mockups/ browser and phone frames (SVG / CSS)
stores/ editor state (Zustand)
lib/ pure logic: colours, images, export, capture client
i18n/ home-made translator; texts live in messages/{fr,en,es}.json
capture/ URL capture service (separate Vercel project, headless Chrome)
docs/ specification (SPECS.md), internationalisation (I18N.md), capture (CAPTURE.md),
README visuals (assets/)
tests/ unit tests (tests/unit) and end-to-end tests (tests/e2e)
Contributing
Contributions are welcome: new templates, export formats, languages, fixes. Look for the
good first issues. Read
CONTRIBUTING.md, especially Adding a template,
and the code of conduct.
Found a security issue? See SECURITY.md.
License
MIT © Roosvelt Kenne
