Opening the Annotation Editor
Click the Annotate button on any screenshot block that has an image. The annotation editor opens in a modal with your screenshot as the canvas background. When you finish, click Done to save your annotations or Cancel to discard changes.Annotation Tools
The toolbar at the top of the annotation editor provides these tools:Shape Tools
| Tool | Shortcut | Description |
|---|---|---|
| Arrow | A | Draw a straight arrow pointing from one spot to another. Great for indicating UI elements. |
| Curved Arrow | Shift+A | Draw an arrow that follows a curved path. Useful for flowing callouts. |
| Rectangle | R | Draw a rectangle outline or filled shape. Use to frame areas of interest. |
| Oval | O | Draw an ellipse outline or filled shape. Use for circular highlights. |
| Line | L | Draw a straight line. Useful for underlines or connections. |
Text Tool
| Tool | Shortcut | Description |
|---|---|---|
| Text | T | Click on the canvas to place a text box. Type your label, callout, or instruction. |
Drawing Tool
| Tool | Shortcut | Description |
|---|---|---|
| Freehand | D | Draw freely with your mouse or trackpad. Perfect for circling or underlining informally. |
Effect Tools
| Tool | Shortcut | Description |
|---|---|---|
| Highlight | H | Draw a semi-transparent rectangle to highlight an area. Similar to a marker pen effect. |
| Pixelate | P | Blur or pixelate an area to hide sensitive information (passwords, personal data, etc.). |
| Spotlight | S | Dims the entire image except the selected area, drawing attention to a specific spot. |
| Magnifier | M | Creates a magnified zoom bubble over a small area, making tiny details visible. |
Utility Tools
| Tool | Shortcut | Description |
|---|---|---|
| Step Counter | N | Places numbered circles (1, 2, 3…) to indicate sequential steps. Numbers auto-increment. |
| Crop | C | Crop the screenshot to a specific area, removing unnecessary edges. |
| Eraser | E | Remove individual annotation objects by clicking on them. Does not erase the background image. |
Customization Options
Each annotation tool supports customization via the property panel:| Property | Available for | Description |
|---|---|---|
| Color | All tools | Pick from 8 preset colors (red, orange, yellow, green, blue, purple, white, black) or choose a custom color |
| Stroke width | Shapes, arrows, lines, freehand | Adjust the line thickness (default: 2px) |
| Opacity | All tools | Control transparency from fully opaque to nearly invisible |
| Font size | Text tool | Adjust the text size (default: 16px) |
| Font family | Text tool | Text uses Inter font by default |
Undo and Redo
The annotation editor has its own undo/redo history, separate from the main document editor:| Action | Shortcut |
|---|---|
| Undo | Cmd+Z (macOS) / Ctrl+Z (Win) |
| Redo | Cmd+Shift+Z (macOS) / Ctrl+Shift+Z (Win) |
Saving Annotations
Click Done
Press the Done button (checkmark) in the toolbar. The annotations are composited onto the image.
Annotations are composited (flattened) onto the image when you save. This means the annotated version is a new image file. The original un-annotated screenshot remains stored and can be restored.
Tips for Effective Annotations
Use arrows for direction
Point arrows at the exact button or field the reader needs to interact with. Keep arrows short and close to the target.
Use step counters for sequences
When a screenshot shows multiple actions, place numbered step counters (1, 2, 3) in the order the reader should follow.
Blur sensitive data
Always use the Pixelate tool to obscure passwords, API keys, email addresses, or other personal information before sharing.
Can I edit annotations after saving?
Can I edit annotations after saving?
Once you click Done, annotations are composited onto the image. To change them, re-open the annotation editor — you will start with the composited image as a new base. For significant changes, consider replacing the screenshot and re-annotating.
Do annotations affect the image resolution?
Do annotations affect the image resolution?
Annotations are rendered at the same resolution as the original screenshot. The composited image maintains the original dimensions.
Can I use annotations on non-screenshot images?
Can I use annotations on non-screenshot images?
Yes. Any image uploaded to a screenshot block can be annotated, including photos, diagrams, and illustrations.
Are annotations visible in all export formats?
Are annotations visible in all export formats?
Yes. Since annotations are composited into the image file, they appear in PDF, HTML, Markdown, presentation, and AI video exports.
What is the difference between Eraser and Undo?
What is the difference between Eraser and Undo?
Undo reverses your last action (any tool). Eraser lets you click on specific annotation objects to remove them selectively, regardless of when they were added.