A Free Screenshot Editor That Never Uploads Your Image

A free screenshot and image editor that runs entirely in your browser. Keeping every edit reversible and handling big phone photos, in plain TypeScript and Canvas2D.

title: "A Free Screenshot Editor That Never Uploads Your Image" published: true description: "A free screenshot and image editor that runs entirely in your browser. Keeping every edit reversible and handling big phone photos, in plain TypeScript and Canvas2D." tags: typescript, editor, canvas, images

A few times a week I take a screenshot, circle something on it, sometimes cover up an email or a token, and send it on. I wanted to do that without the image ever leaving my machine, especially when it holds something private.

So I built edit-image.eu. It runs entirely in the browser. Paste a screenshot with Ctrl+V, drop a file, or pick one from your device, then mark it up with text, arrows, shapes, and freehand drawing. Crop it, then copy it back to the clipboard or download it as PNG, JPEG, or WebP. Nothing is sent anywhere, because there's no server behind it.

There's an undo stack and a history panel that removes any single edit you made earlier and leaves the rest. That panel shaped the design.

Keeping edits editable

The easy way to build a canvas editor is to draw each shape straight onto the bitmap. That works until someone wants to remove one arrow they drew five arrows back. Once the pixels are merged, it's gone.

So the picture isn't a bitmap with drawings baked in. It's a base image plus an ordered list of annotation objects, each one knowing its own position and style. Rendering replays that list over the base whenever something changes.

Undo and redo become snapshots of the list. The history panel drops object number three and redraws the rest as if it was never there. Moving a label nudges one object's coordinates. Crop swaps the base image and shifts everything else, so it undoes like any other edit.

Big photos on phones

Loading photos from a phone takes some care. The obvious way to turn that file into something drawable is createImageBitmap(blob), which is fine on a laptop. On a phone, a 12 megapixel photo decodes to a full resolution bitmap in memory, enough on some devices to kill the tab before anything reaches the screen.

So large images decode through a plain <img> and draw into a canvas capped at 4096 pixels on the longest edge. createImageBitmap only sees the small result, and the huge intermediate never exists. Files already under the cap keep their original bytes, so nothing is re-encoded needlessly.

No framework

There's no React or Vue here. The interesting state lives in the canvas, not the DOM, so a framework would mostly stand around watching. The visible UI is a couple of toolbars and a few popovers.

So it's plain TypeScript with a small pub/sub store, Canvas2D, rsbuild for bundling, and Biome for lint and formatting. The shipped JavaScript is about 48 KB, or 16 gzipped. No analytics or backend calls, so the network tab stays quiet after the page loads.

Try it

It's free, at edit-image.eu. Paste a screenshot and start marking it up. It's still a work in progress, so if something breaks, especially on a browser or device I haven't tried, I'd like to hear about it.