We're releasing ScreenshotMaker — a self-hosted web app for generating App Store Connect–ready screenshots. One project per app, one page that hosts the visual design, the screenshots, and the export, all on the same canvas.
Why ScreenshotMaker?
Every App Store update means rebuilding the same screenshot set across iPhone 6.7, 6.5, and iPad 13 — the same hero shots, the same headlines, the same device frames, just at different pixel dimensions. The existing tools either lock you into a SaaS subscription, want a Sketch or Figma file, or hand you a generic "hero image" workflow that doesn't match how App Store Connect actually slices its tiles.
ScreenshotMaker is the opposite: it's a single Docker container that models the App Store Connect layout directly. One project = one app. One wide canvas = N tiles separated by the same white gutter App Store Connect uses for its preview. Each tile exports as one PNG, at native pixel dimensions, ready to drag and drop into the upload form.
What It Does
Continuous wide canvas
Instead of laying out each tile in isolation, you design across a single canvas split by visible white gutters. Background images cover-fit once across the full canvas and slice contiguously, so adjacent tiles' backgrounds match exactly at the gap (no source pixels disappear behind the gutter).
Free-form elements
Text boxes, icons, and device frames are all first-class draggable, rotatable, resizable elements — paint-program style. Add as many as you want, position them anywhere. Each element gets corner-resize and rotation handles when selected; double-click text to edit in place with an overlay that matches the rendered font, size, and rotation.
3D-tilted device frames
Devices are modeled as rounded-rect prisms with both X and Y axis perspective rotation, plus Z-axis spin. The bezel color, corner radius (0–200 px, from sharp rectangle to pill shape), and side ribbon shade are all configurable. Each device is tile-assigned — drag it across the gutter and it reassigns to the new tile on drop.
Shared screenshot pool
Upload screenshots to the project once; attach any of them to any device by clicking a thumbnail in the device inspector. Multiple devices can share one screenshot, and swapping a screenshot across all devices is one click.
Built-in and custom icons
Twelve monoline icons ship with the editor, recolored from the inspector. You can also upload your own SVG files per project for brand-specific assets.
ZIP export
Export renders every (tile × device-size) combination at native App Store pixel dimensions and packs them into a single ZIP:
<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 ...
The same render code path drives both the live editor preview and the final PNG, so what you see is what you ship.
Architecture
ScreenshotMaker runs as a single Docker container:
- Framework: Next.js 16 (App Router, TypeScript) + Tailwind 4
- Canvas editor: React Konva for the interactive surface; vanilla Konva for off-DOM export rendering
- Perspective renderer: custom canvas2D rounded-rect prism with triangle-subdivision warping (no Three.js)
- Persistence: Prisma 6 + SQLite, single
./datavolume for the database and all uploaded screenshots - Export: JSZip for client-side ZIP bundling
- Port: 3000
A two-line docker compose up -d --build boots the whole stack, with Prisma migrations applied automatically on first start.
Security
This is a deliberate, important caveat: ScreenshotMaker has no security model. No authentication, no authorization, no rate limiting, no CSRF protection, and minimal upload validation. It's a single-user tool intended for localhost, a trusted LAN, or behind a private overlay network like Tailscale, ZeroTier, or WireGuard. Anyone who can reach the HTTP port can read, edit, and delete every project on the instance and upload arbitrary files into the host's upload tree. Do not expose it directly to the public internet — sit a reverse proxy with real authentication in front of it if you need remote access.
Status
ScreenshotMaker is under active development and not production-ready. The core editor, export pipeline, and Docker deployment are functional and used internally for SSETCO app releases, but expect rough edges, breaking schema migrations, and gaps in iPad-specific tooling.
Getting Started
Requirements:
- Docker and Docker Compose
- Port 3000 available
- A trusted network (localhost, LAN, or Tailscale)
Clone, build, and run:
git clone https://github.com/midyear66/screenshotmaker
cd screenshotmaker
docker compose up -d --build
# → http://localhost:3000
Everything stateful lives in ./data/ — the SQLite database plus every uploaded screenshot. Back that directory up and you've backed up the entire instance.
GitHub: github.com/midyear66/screenshotmaker
See the ScreenshotMaker app page for the full feature breakdown and technical details.
The SSETCO Team