Screenshot AnnotationMarkup a screenshot
right where you captured it
Markup a screenshot without leaving the page. Capture, then drop boxes, circles, arrows, text, numbered steps and more straight onto the image — every shape snaps to the real UI element you hover, so your annotations line up perfectly instead of looking hand-drawn.
What does “markup a screenshot” mean?
Marking up a screenshot means adding annotations on top of the image so a reader knows where to look and what to do: a box around the button to click, an arrow pointing at the error, a number on each step, text explaining the fix. It’s the difference between a raw screenshot and a screenshot that actually communicates.
The painful part was never the idea — it was execution. You capture, paste into an editor, draw a rectangle, realise it’s two pixels off the button, undo, redraw. Every shape, every screenshot. Markup that snaps to real page elements removes that entirely — hover the element, click, and the annotation is fitted to its exact bounds.
Why markup screenshots in place?
A separate editor means a context switch, a second file, and shapes that drift from the pixels they’re meant to point at. In-place markup keeps you on the page, keeps the source at full resolution, and keeps every annotation aligned. That matters most for:
- Bug reports — point engineers at the exact broken element with a fitted box and a numbered note, not a wobbly oval.
- Tutorials & docs — “click here” is unambiguous when “here” is a snapped rectangle around the real control.
- Customer support — annotate a customer’s screenshot to show the setting they need to change.
- Review & feedback — mark up a design or a draft with arrows and text without opening another app.
Twelve tools, all snapping to real elements
I built the markup toolset myself, so here’s exactly how annotations behave when you place them.
- Shapes snap to elements. Hover any button, card, image or text block and the extension reads its
getBoundingClientRect. Click — you get a rectangle, circle, arrow or underline fitted to those exact bounds. One click, pixel-perfect. - Twelve tools in one toolbar. Rectangle, ellipse, line, arrow, highlight marker, text, numbered steps, stamps, mosaic (pixelate / blur / black-bar) and zoom-in-place. Switch with a single key.
- Numbered steps auto-renumber. Drop step 1, 2, 3 in order and they stay sequential automatically as you add and rearrange.
- Everything exports at full resolution. Markup is rendered on the original capture (including high-DPI pixels), so boxes and text stay crisp, not blurry.
Two capabilities make the markup stronger when you need them:
- Highlight & redact — a highlight marker calls attention to text, while the mosaic tool blurs or pixelates passwords, API keys and faces. See blur screenshot and highlight screenshot.
- Zoom a detail — magnify a tiny region in place so a small icon or label is legible without losing the surrounding context. See screenshot zoom.
Markup lives on the page in an overlay editor — no new tab, no upload. When you close the editor, the finished image is already on your clipboard.
How to markup a screenshot
From capture to a fully annotated image in under a minute.
Capture
Press Alt+A (Win) or ⌘⇧S (Mac) to grab the visible area, Alt+C / ⌘⇧X to drag a region, or right-click the page and choose Free region. The editor opens on the page.
Add markup
Hover an element and click to snap a fitted shape, or press a tool key — R rectangle, O ellipse, A arrow, T text, N number, H highlight. Draw freely on empty space too.
Export
Close the editor — the annotated image is auto-copied to your clipboard. Or download as PNG / JPG / PDF.
Tips for cleaner screenshot markup
- Click, don’t drag, for precision. Hovering and clicking an element gives you its exact bounds in one shot — far tighter than a hand-drawn box.
- Number multi-step flows. Use the number tool (
N) so readers can follow ① → ② → ③ in order; they renumber automatically. - Redact before you share. Any screenshot with credentials, tokens or personal info should get the mosaic tool first — blur or pixelate, never just crop.
- Pick one accent colour. A single bold colour for boxes and arrows reads cleaner than a rainbow. The tool remembers your last colour and thickness.
Markup screenshot, answered
Is the markup free?
Yes. All twelve annotation tools are free — no paid tier, no watermark, no sign-up. The whole extension is free.
Do annotations stay sharp on high-DPI screens?
Yes. Markup is rendered on the full-resolution capture, including high-DPI pixels, so boxes, arrows and text stay crisp on Retina and 4 K displays.
Can I edit markup after placing it?
Yes. Select any annotation to move, resize, recolour or delete it. Numbered steps renumber automatically when you rearrange them.
Does it work offline / send data anywhere?
It works fully offline and makes zero network requests. Screenshots never leave your device — there is no backend.
Written by Virgil
I’m the independent developer who built the markup toolset on this page — the DOM-snapping, the twelve tools, the auto-renumbering steps. I built it because every screenshot editor I’d used made me hand-draw shapes that never lined up with the UI.
I read every email and ship updates regularly; the changelog lists what changed in each release. Questions about markup? Email virgil1126@gmail.com.
Markup your next screenshot in place
Free, no sign-up, no tracking. Twelve annotation tools that snap to real elements.
Add to Chrome — Free