Annotation Tools
The BugPin widget includes a full set of screenshot annotation tools for marking up captured screenshots before submitting a bug report. Annotations are saved with the report and included in any GitHub Issues created via the integration.
Available Tools
| Tool | Description |
|---|---|
| Select | Select, move, resize, and delete annotations |
| Pen | Freehand drawing for highlighting issues |
| Arrow | Point to specific elements |
| Rectangle | Draw rectangular shapes around areas |
| Circle | Draw circular/elliptical shapes |
| Text | Add text annotations |
| Blur | Mask sensitive information |
Tool Reference
Select
The select tool is used to manipulate annotations that have already been placed. Click any annotation to select it, then drag to reposition it or use the corner handles to resize it. Press Delete or Backspace to remove the selected annotation. Use this tool after placing marks to refine their position before submitting.
Pen
The pen tool enables freehand drawing directly on the screenshot. It is useful for circling irregular areas, adding free-form highlights, or drawing attention to patterns that a rectangular or circular shape cannot capture. Choose a stroke color and width before drawing for clearer markup.
Arrow
The arrow tool draws a straight arrow from a starting point to an endpoint. It is the most precise way to point to a specific element, for example to indicate a misaligned button, a missing label, or an incorrect value in a table row. Drag from the base of the arrow to its tip.
Rectangle
The rectangle tool draws an outlined rectangular region around an area of interest. It is the most commonly used annotation tool and works well for framing a specific form field, component, or section that contains the bug. Click and drag to set the bounds of the rectangle.
Circle
The circle tool draws an elliptical outline. It is useful for highlighting round elements such as icons, avatar images, status indicators, or radio buttons. Drag diagonally to control both width and height of the ellipse.
Text
The text tool places a text label at a chosen location on the screenshot. Use it for numbered call-outs (e.g., "1", "2", "3"), brief explanations next to an annotated element, or notes that add context the screenshot alone cannot convey. Click the screenshot to place the text input.
Blur
The blur tool applies a pixelation effect to the selected rectangular area, obscuring the content beneath it. Use this tool to mask personally identifiable information, passwords, internal URLs, API keys, or any sensitive data that should not be visible in the submitted bug report. The blur is applied at capture time and cannot be reversed by report recipients.
Toolbar Options
Colors
Choose from predefined colors for annotations:
| Color | Best used for |
|---|---|
| Red (default) | Errors, critical issues |
| Orange | Warnings, layout issues |
| Yellow | Highlights, notes |
| Green | Correct behavior reference |
| Blue | Informational marks |
| Purple | Secondary highlights |
Stroke Width
Adjust the line thickness for pen, arrow, rectangle, and circle tools:
| Setting | Thickness | Use case |
|---|---|---|
| Thin | 2px | Precise marks on dense UI |
| Medium | 4px | General purpose (default) |
| Thick | 6px | Emphasis, high visibility |
Actions
- Undo: Revert the last annotation action
- Redo: Restore the last undone action
- Delete: Remove the currently selected annotation
- Clear All: Remove all annotations from the screenshot