A browser-based editor for designing App Store–style marketing screenshots. Compose text and images over gradient / mesh backgrounds, preview at native device resolutions, and export pixel-perfect PNGs — all client-side, no backend.
- Layer-based editor — text and image layers with drag, resize, rotate, corner radius, alignment, and z-order
- Multi-platform presets — iPhone (1242×2688), iPad (2064×2752), macOS (2560×1600), tvOS / visionOS (3840×2160), plus a custom workspace size
- Portrait ↔ landscape toggle per workspace
- Rich backgrounds — linear, radial, solid, and multi-blob mesh gradients with a preset gallery (Ocean, Sunset, Aurora, Spotlight, Glass…)
- Workspaces & frames — group multiple screenshots together and switch between them in the sidebar
- Snap guides — center-line snapping while dragging, hold Shift to disable
- Zoom-to-cursor — trackpad pinch or Cmd/Ctrl + wheel
- Undo / redo — powered by
zundo - JSON import / export — save and share your work
- PNG export — rendered at the true device resolution, not the viewport
- React 19 + TypeScript
- Vite 8
- Tailwind CSS v4
- Zustand + Zundo for state and history
- html-to-image for PNG export
The project uses Bun as its package manager.
# install dependencies
bun install
# start the dev server
bun run dev
# type-check and build for production
bun run build
# preview the production build
bun run preview
# lint
bun run lintOpen http://localhost:5173 and start designing.
| Action | Shortcut |
|---|---|
| Undo | Cmd/Ctrl + Z |
| Redo | Cmd/Ctrl + Shift + Z |
| Delete layer | Delete / Backspace |
| Disable snap | Hold Shift while dragging |
| Zoom | Cmd/Ctrl + scroll, or trackpad pinch |