Powerful Features
Everything you need to design and export App Store Connect screenshot sets
Continuous Wide Canvas
One project = one app. Design across N tiles separated by a visible white gutter — each tile exports as one App Store PNG.
Paint-Program Editor
Text, icons, and device frames are first-class draggable, rotatable, and resizable elements on a single free-form canvas.
3D-Tilted Device Frames
Rounded-rect prism perspective with both X and Y axis rotation. Configurable bezel color and corner radius (0–200 px).
Rich Text Elements
Per-element font picker (~20 system families), bold and italic toggles, weight 400–800, color, alignment, and rotation.
Built-in & Custom Icons
12 monoline icons included, or upload your own SVG files per project. Built-ins recolor uniformly via the inspector.
Panorama Backgrounds
Background image is cover-fit once across the full canvas and sliced contiguously — adjacent tiles match exactly at the gap.
Shared Screenshot Pool
Upload screenshots to the project pool and attach any of them to any device. Multiple devices can share one screenshot.
ZIP Export
Renders every (tile × device-size) combination at native App Store pixel dimensions and bundles them into a single ZIP.
Per-Tile Clipping
Tile-locked devices hard-crop at the gutter — drop one device per adjacent tile to recreate the App Store split-phone effect.
How It Works
A single editor surface that maps directly to App Store Connect's tile layout
- A project is the unit of work — it owns the visual recipe and the screenshots
- Toolbar popovers handle Project, Background, Screenshots, and Layers; selecting an element reveals a contextual inline bar
- Devices are tile-assigned — drag across the gutter to reassign, or pick a tile from the inspector dropdown
- Screenshots are a shared project pool, attached to any device by clicking a thumbnail
- Same render code path drives both the live editor preview and the final PNG export — WYSIWYG by construction
- Export renders every (tile × device-size) combination and packs them into a ZIP organized by device folder
- Autosaves every 600ms; SQLite + on-disk uploads persist in a single mounted ./data volume
Ready to Upload
Export produces a ZIP organized exactly the way App Store Connect expects
<ProjectName>/ iPhone-6.7/ 01.png 02.png 03.png ... iPhone-6.5/ 01.png 02.png 03.png ... iPad-13/ 01.png 02.png 03.png ...
Each PNG is exactly one tile of the canvas at native App Store pixel dimensions. Konva's stage bounds hard-clip any element that would have crossed a tile edge.
Technical Details
Built With
- Next.js 16 (App Router) + TypeScript
- Tailwind CSS 4
- React Konva for the canvas editor
- Custom canvas2D perspective renderer
- Prisma 6 + SQLite for persistence
- JSZip for client-side ZIP bundling
Requirements
- Docker and Docker Compose
- Port 3000 — web interface
- Volume for ./data (SQLite + uploads)
- Run on localhost, LAN, or Tailscale only
- Not production-ready — under active development
No Security Model — Trusted Networks Only
ScreenshotMaker is intentionally a single-user tool with no authentication, no authorization, no rate limiting, no CSRF protection, and minimal upload validation. Anyone who can reach the port can read, edit, and delete every project on the instance, and upload arbitrary files into the host's data/uploads/ tree.
Do not expose it to the public internet. Run it on localhost, on a trusted LAN, or behind a private overlay network like Tailscale, ZeroTier, or WireGuard. If you must reach it from outside, sit a reverse proxy with real authentication in front of it.