How to Annotate Screenshots on Mac

Why annotate screenshots

A raw screenshot shows everything on screen. An annotated screenshot shows what matters. When you add an arrow pointing to a misaligned button, or a red rectangle around a console error, you turn a picture into a message.

For developers, annotations are essential for:

• Bug reports. Circle the broken element, draw an arrow to the wrong spacing, highlight the error message. Your teammates see the problem instantly instead of scanning a full-screen capture.
• AI coding. When you paste a screenshot into Claude, Cursor, or ChatGPT, annotations tell the model exactly where to look. “Fix the element I circled” is far more precise than “fix the layout.”
• Code reviews. Annotated screenshots in PR comments show what changed visually. One marked-up screenshot replaces paragraphs of description.
• Documentation. Step-by-step guides with numbered callouts and arrows help users follow along without guessing which button to click.

The question is not whether to annotate — it is which tool to use.

macOS Preview markup

Every Mac ships with Preview, which includes a basic Markup toolbar. Here is how to use it:

1. Take a screenshot with Cmd+Shift+4 (or any shortcut).
2. Double-click the screenshot file to open it in Preview.
3. Click the Markup button (pencil icon) in the toolbar, or press Cmd+Shift+A.
4. Use the shape tools to add rectangles, circles, lines, and text.
5. Save the file with Cmd+S.

What Preview can do

• Rectangles, circles, and lines in various colors
• Text boxes with font and size controls
• Freehand drawing with the Sketch tool
• Speech bubbles and star shapes
• Signature insertion

What Preview cannot do

• No arrow tool. Preview has lines but no arrowheads. You have to fake arrows with the line tool and a separate shape, which looks amateurish.
• No blur or pixelation. You cannot redact sensitive information. If your screenshot contains API keys or personal data, Preview cannot help.
• No numbered markers. There is no quick way to drop numbered callouts. You have to create text boxes one by one and manually type numbers.
• Clunky workflow. You must save the file, open it, annotate, save again, then paste. That is four extra steps every time.
• No dimension measurements. You cannot measure pixel distances between elements, which is critical for CSS debugging.

Preview works for occasional annotations. For developers who screenshot multiple times a day, it creates too much friction.

Third-party annotation tools

Several Mac screenshot tools include annotation features. Here is a quick comparison:

CleanShot X ($29 one-time)

Solid annotation toolkit with arrows, shapes, text, blur, and numbering. Requires a separate capture step and does not auto-paste to AI tools. A popular choice for general-purpose screenshot workflows.

Shottr (free / $12)

Lightweight and fast. Includes arrows, shapes, text, and a pixel ruler. No AI editing or auto-paste to AI assistants. Good for quick annotations but limited for AI coding workflows.

Snagit ($63/year)

Enterprise-focused with templates, step numbering, and a built-in editor. Powerful but expensive with an annual subscription. Overkill for most developer workflows.

All of these tools require you to capture, annotate, then manually paste into your AI tool or chat. None of them integrate the annotation step directly into an AI-first workflow.

LazyScreenshots annotations

LazyScreenshots includes a complete annotation toolkit built into the screenshot workflow. After capturing with Cmd+Shift+2, you can annotate before auto-pasting to your AI tool.

Annotation tools included

• Arrows. Click and drag to draw arrows pointing at specific elements. Adjustable color and thickness.
• Rectangles and circles. Highlight areas of interest with outlined or filled shapes.
• Text notes. Add text labels directly on the screenshot for context.
• Numbered markers. Drop sequentially numbered markers so you can reference “element #1” and “element #2” in your prompt.
• Pixelation. Select a region and blur it to hide sensitive information before sharing.
• Dimension measurements. Measure pixel distances between elements for CSS debugging and design QA.

The workflow

1. Press Cmd+Shift+2 to capture a region.
2. The annotation editor opens automatically.
3. Add your annotations — arrows, shapes, numbers, text.
4. Press Enter and the annotated screenshot auto-pastes into Claude, Cursor, or ChatGPT.

No saving files, no switching apps, no manual paste. Capture, annotate, and deliver in one continuous flow.

Best practices for annotating developer screenshots

Good annotations are concise. Follow these rules to keep your screenshots clear:

The 1–3 rule

Use one to three annotations per screenshot. More than that and the image becomes cluttered. If you need to highlight many elements, take multiple focused screenshots instead.

Use arrows for direction, shapes for areas

Arrows point at a specific element: “this button.” Rectangles highlight a region: “this section.” Do not use arrows when a rectangle would be clearer, and vice versa.

Crop tight

Capture only the relevant part of the screen. A full-screen screenshot with one tiny arrow in the corner is hard to read. Crop to the area that matters, then annotate.

Use numbered markers for AI prompts

When pasting annotated screenshots into AI tools, numbered markers let you write prompts like “Move element #1 below element #2” or “Fix the spacing around #3.” This is more precise than describing elements by their appearance.

Always blur sensitive data

Before sharing any screenshot, check for API keys, passwords, email addresses, personal information, and access tokens. Blur first, share second.