Popshot

About

Popshot turns a raw screenshot into something you can put on a landing page, a changelog or a launch post. Paste or drop an image, pick a mockup and a background, annotate it, export. It runs entirely in the browser, needs no account to use, and the free tier is genuinely usable rather than a trial.

Why I built this

Every product I ship needs the same thing and none of it is the interesting work: a screenshot that doesn’t look like a screenshot. A window frame, a background that isn’t grey, an arrow pointing at the thing you’re supposed to look at, and an export that isn’t 4MB.

The existing tools solve this, but most want an account before you can see the output, and several put the good backgrounds behind a subscription you have to commit to before you know whether the tool fits. That’s a lot of friction for a task that takes forty seconds.

So I built the version I wanted: open it, paste, export. Decide later whether you care enough to pay.

The problem

A screenshot is evidence, not a visual. Straight out of the OS it carries the wrong aspect ratio, a distracting desktop behind it, whatever notification arrived at the wrong moment, and none of the framing that tells a reader where to look.

Fixing that by hand means a design tool, a mockup file, a manual crop, a shadow you eyeball, and an export preset you re-derive every time. It is a five-minute job you do repeatedly and never get faster at, because nothing about it is reusable.

How I built it

React 18, TypeScript, Vite, Tailwind and shadcn/ui, with Zustand for editor state. The canvas is Konva, which is what makes multi-image composition, device frames and zoom behave like a real editor rather than a stack of CSS transforms. Supabase handles auth and entitlements, Stripe handles billing, Vike renders the marketing pages as static HTML for search, PostHog covers analytics, and the whole thing deploys on Vercel.

Export is the part that had to be exact. Everything composites on canvas and downloads locally, so nothing you paste is ever uploaded anywhere.

What shipped

Everything below is live at popshot.app:

• Paste, drop or upload, then copy the result straight back to the clipboard
• Browser and OS mockups: macOS, Dark, Safari, Arc, Card and Stack
• Device frames for phone, tablet, laptop, monitor and watch
• Backgrounds: solid, gradient, mesh and image, with match-to-image sampling the screenshot’s own palette
• Styles: Minimal, Glass, Soft Shadow, Gradient, Dark and Borderless
• Annotation: arrows, boxes, text, blur for redacting, and a before/after compare
• Multi-image layouts and zoom
• Transparent PNG export
• Full Spanish, with an in-app language switcher
• Free tier with no signup; Pro on Stripe

Where it stands

The product is built and running. The honest gap is distribution, not features. Analytics show the wall is traffic rather than conversion, so the current work is findability: static rendering for search, directory listings, and a browser extension to move capture and beautify into one step.

That is the part of shipping solo that nobody puts in the case study. Building it was the easy half.