ANNOTATIONS

Annotations

An annotation is a precise, in-context bug report attached to a specific element, region, console error, or network failure in your live preview.

ANNOTATION TYPES

Point

Click any element. Captures CSS selector, position, page URL, screenshot, and all console/network logs from the session.

Area

Click and drag a rectangle. Highlights a region of the page — ideal for layout and spacing bugs.

Element

Select a specific DOM element directly. Perfect for isolating component-level issues.

Collab Tools

Spotlight

Draw attention to a specific area during live review sessions. Others' viewports will follow.

Marker

Draw freehand on the screen to circle or point to issues during a live session.

Every annotation automatically captures a pixel-perfect screenshot of the viewport at the exact moment of creation.

Critical Bug

Dashboard_Analytics_View.png (1440x900, macOS Chrome)

What's automatically captured

Every annotation captures: screenshot, CSS selector, browser info (OS, version, viewport), page URL, navigation breadcrumbs, and the last 30 seconds of console / network logs.

Console capture: Recent logs are attached with level + timestamp for debugging context.
Network capture: Recent requests include method, URL, status code, and duration.
Use cases: Best for API failures, auth/session errors, and JS runtime regressions.

CREATING AN ANNOTATION

1Click the annotation tool in the toolbar (or press the keyboard shortcut)

2Click on the element you want to annotate (or drag a rectangle for area annotation)

3Fill in the annotation form: Title, Comment (describe the issue), Severity

4Click Submit — BugDrop captures the screenshot and metadata automatically

REVIEW SESSION TOOLBAR

Point tool: Create a point annotation on an element
Area tool: Create an area annotation by dragging
Console: View and annotate console errors
Network: View and annotate failed network requests
Annotations list: Open the sidebar showing all annotations for this session
Invite Guest: Generate and copy a guest review link (no account needed)
Guided Mode: Take control and guide all participants' viewports
End Session: End the current review session

STATUS LIFECYCLE

Open→

In Review→

Resolved/

Won't Fix|

Reopened

Open: New annotation, needs attention
In Review: Being investigated or fixed
Resolved: Fix has been applied
Won't Fix: Acknowledged but not going to be fixed (must provide reason)
Reopened: Was resolved but the issue recurred

SEVERITY LEVELS

Critical: Blocks key functionality — fix immediately
High: Significant impact — fix this sprint
Normal: Standard bug — add to backlog
Low: Minor cosmetic issue

Set SLA rules per-severity in Project → Annotations → SLA Settings to trigger breach alerts automatically.

VIEWS & LAYOUTS

Cycle views withV

highOpen

Navbar misaligned on mobile

The menu overlaps the logo on iPhone width.

point

Sarah Connor

Apr 22

criticalIn Review

Checkout error blocks submit

500 from gateway when confirming order.

area

John Doe

Apr 21

normalResolved

Button spacing inconsistent

Padding is tighter than other primary actions.

point

Sarah Connor

Apr 20

lowWon't Fix

Footer link order request

Requested reordering is intentional per brand guidelines.

point

John Doe

Apr 19

highReopened

Regression: modal close icon

Close icon disappeared after latest release.

point

Sarah Connor

Apr 18

FILTERS & SEARCH

Status

Severity

Assigned To

Tag

Page URL

Has AI Fix

Build

COMMENTS, REACTIONS & TAGS

Comments & Mentions

Threaded comments inside each annotation. Use @username to mention team members. Internal-only comments visible only to developers/owners.

Reactions

React to any annotation with an emoji — like GitHub reactions. Signal agreement, urgency, or acknowledgement without leaving a comment.

Tags

Custom labels like auth, mobile, critical-path. Filter by tag in the toolbar.

Subscriptions — you are automatically subscribed to annotations you create or are assigned to. For any other annotation: open it and click the bell icon → Subscribe to receive alerts for status changes, new comments, and SLA breaches.

LINKING ANNOTATIONS

To link: open an annotation → Links section → Add Link → search for the other annotation → choose the relationship type.

CUSTOM FIELDS

Add project-specific metadata fields to annotations beyond the built-in fields. Go to Project → Settings → Custom Fields → Add Field.

Text: Reproduction steps, notes
Number: Reproduction rate (%), story points
Select: Affected platform (iOS, Android, Desktop)
Boolean: Regression? (Yes/No)
Date: Target fix date

Changes to field definitions affect future edits immediately. If a field is removed, existing historical annotation values remain visible in exported records.

SLA CONFIGURATION

Set resolution time limits per severity. Breached annotations trigger in-app and email alerts. Go to Project → Annotations → SLA Settings.

Critical: e.g. 4 hours
High: e.g. 24 hours
Normal: e.g. 72 hours
Low: e.g. 168 hours (1 week)

View all breached annotations in Annotations → SLA Breaches.

Breach alerts are emitted as in-app + email notifications and can be forwarded to Slack/Teams/Discord if those channels are connected.

BULK ACTIONS

Select multiple annotations using checkboxes (or Select All). The bulk action bar appears at the bottom of the screen.

Change status

Assign to member

Change severity

Add / remove tags

Delete

Bulk actions are intended for list/board triage workflows and should be used by developer/owner roles to avoid accidental mass updates.

EXPORTING ANNOTATIONS

export.json

json

1[
2  {
3    "id": "ann_01HZ...",
4    "title": "Button not clickable on mobile",
5    "status": "open",
6    "severity": "high",
7    "pageUrl": "/checkout",
8    "selector": "button<punct>[</punct>data-action='submit'<punct>]</punct>",
9    "assignee": "dev@example.com",
10    "createdAt": "2025-03-26T00: <lit>00</lit>: <lit>00</lit>Z"
11  }
12]