Framebolt
Sign in

Updated August 17, 2026

Annotate a Mac screenshot without flattening the original

Framebolt's editor keeps visual explanations close to the pixels they describe: draw a pointer, resize it later, and export only when the result is ready.

Check release status
Illustrative annotation exampleIllustrative UI
checkout.tsx · synthetic
target
This code-native visual is a synthetic bug card, not a customer screenshot or a live capture.

Point at the exact thing

An arrow and three words often explain a visual bug faster than a paragraph. The editor keeps those elements separate from the raw media.

Available elements

  • Freehand pen, rounded rectangle, ellipse, arrow, and text elements.
  • Eight resize handles and direct text editing on the canvas.
  • Variable stroke width, shape fill, text size, and installed Mac fonts.
  • Shift constrains shapes and angles; Option draws from the center; both modifiers work together.

An annotation workflow for AI coding

  1. 1

    Capture the smallest useful region

    Select the panel or display area that contains the state you want the assistant to inspect. Do not include unrelated desktop content or secrets.

  2. 2

    Mark the target

    Add an arrow or a short label such as “overflow begins here.” Keep the annotation close to the affected control so the visual relationship survives resizing.

  3. 3

    Paste the result

    The raw capture is already on the clipboard. Export a PNG when you need the rendered annotation, or keep the project editable for another pass.

Export choices

NeedRecommended pathSource preserved?
Fast unmarked pastePaste the raw clipboard captureYes
Annotated imageRender/export PNG from the editorYes
Later revisionKeep the JSON sidecar beside the PNGYes

Questions about editable screenshot annotation on mac

Keep exploring