BYTETOOLS

Screenshot Annotator

Mark up a screenshot with arrows, boxes, ellipses, numbered step badges, highlighter blocks, text and pixelated regions, then export a flat PNG.

Drop a screenshot to annotateProcessed locally in your browser — never uploaded

What is the Screenshot Annotator?

Bug reports, how-to guides and design feedback all need the same handful of marks on a screenshot: an arrow pointing at the thing, a box around the area, numbered badges for a sequence of steps, and a pixelated rectangle over anything private.

  • Seven tools: arrow, rectangle, ellipse, numbered step badge, highlighter, text callout and pixelate
  • Numbered badges that renumber themselves as you add, undo and redo
  • Pixelate mode that really averages the pixels underneath, so hidden data is not recoverable
  • Full undo and redo across the whole shape stack, plus a listing of every shape you have added
  • Stroke widths scaled to the image, so a mark looks the same on a 4K screenshot as on a small one
  • Exports a flattened PNG at full resolution — nothing is uploaded

How to use the Screenshot Annotator

  1. 1

    Drop in the screenshot you want to mark up.

  2. 2

    Pick a tool, a colour and a stroke or block size — and type your text first if you are placing a text callout.

  3. 3

    Drag on the screenshot to draw, or click “Add … at centre” to drop a shape in the middle and go from there.

  4. 4

    Use Undo and Redo to walk back through the shape stack, or Clear all to start again.

  5. 5

    Click Download PNG to export the flattened annotated image at full resolution.

About the Screenshot Annotator

Bug reports, how-to guides and design feedback all need the same handful of marks on a screenshot: an arrow pointing at the thing, a box around the area, numbered badges for a sequence of steps, and a pixelated rectangle over anything private. This tool gives you those seven tools on a canvas and exports a flattened PNG.

Draw by dragging on the screenshot. Arrows run from where you press to where you release, boxes and highlighter blocks use the drag as their bounds, and badges and text are dropped at the point you press. Every shape is kept as a separate item in a stack you can undo and redo through, and the badge numbers renumber themselves automatically as you add and remove them.

The pixelate tool is the one that matters most for privacy, and it works properly: it genuinely averages the underlying pixels into blocks rather than drawing something over the top, so there is nothing recoverable underneath. Nothing is uploaded — the screenshot never leaves your browser.

Frequently asked questions

Is the pixelate tool safe for hiding personal data?

Yes, because it resamples the region down to blocks and back up, which destroys the original pixels rather than covering them. There is no hidden layer in the exported PNG, so nothing can be peeled back off. For absolute certainty on very sensitive data, draw a solid rectangle instead.

How do the numbered step badges work?

Each badge is numbered by its position in the shape stack, so the first one you place is 1, the next is 2 and so on. If you undo a badge in the middle, the ones after it renumber automatically — you never have to fix the sequence by hand.

Can I move or edit a shape after drawing it?

Not directly. The stack is add-and-undo rather than fully editable, so if a mark is in the wrong place, undo it and draw it again. The shape list under the canvas shows everything you have added in order.

Does the exported image match what I see on screen?

Yes. The canvas is a scaled-down view for editing, but every shape is stored as a fraction of the image, so the export redraws them at your screenshot's real resolution with proportionally scaled stroke widths.

Are my screenshots uploaded to a server?

No. The image is decoded, drawn on and exported entirely inside your browser, which matters because screenshots so often contain internal tools, customer data or unreleased work.

Related tools