Claron
    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.

    Screenshot
    Critical Bug

    Dashboard_Analytics_View.png (1440x900, macOS Chrome)

    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 — Claron 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 Dashboard sidebar Annotations to trigger breach alerts automatically.

    VIEWS & LAYOUTS

    Cycle views withV

    Navbar misaligned on mobile

    The menu overlaps the logo on iPhone width.

    SC
    Sarah Connor
    Sep 18

    Checkout error blocks submit

    500 from gateway when confirming order.

    JD
    John Doe
    Sep 17

    Button spacing inconsistent

    Padding is tighter than other primary actions.

    SC
    Sarah Connor
    Sep 16

    Footer link order request

    Requested reordering is intentional per brand guidelines.

    JD
    John Doe
    Sep 15

    Regression: modal close icon

    Close icon disappeared after latest release.

    SC
    Sarah Connor
    Sep 14

    FILTERS & SEARCH

    Status
    Severity
    Assigned To
    Tag
    Page URL
    Has AI Fix
    Build

    MY WORK INBOX

    Use Dashboard → My Work as your cross-project action inbox. It gathers assignments, mentions and replies, unread subscribed updates, overdue deadlines, SLA breaches, and reopened issues, with category counts and a project filter. Open a row to jump directly to its annotation; select unread rows to mark them read in bulk. The notification bell remains a short event stream, while My Work keeps action items available after the original notification is gone.

    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 TRIAGE FIELDS

    Define project-specific text, number, select, yes/no, and date fields in Project Settings → Annotation Workflow. Choose whether each field is public (available to clients and guests) or internal (staff-only), and whether it is required. Values can be entered when reporting an annotation or edited from its detail panel.

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

    Values are validated against their field definition by the API. A client or guest can only read or complete public fields; hiding a field in the interface is not the access-control boundary.

    REUSABLE REPORT TEMPLATES

    Project owners and developers can create reusable annotation templates in Project Settings → Annotation Workflow. A template can prefill a literal title, comment, severity, tags, assignee, and custom-field values when a report is started. Reporters can change those values before submitting. Public templates and public field defaults are available to clients and guests; internal templates and internal field defaults remain staff-only.

    Template text is used as-is. Templates do not execute scripts or dynamically substitute values.

    SLA CONFIGURATION

    Set response-time thresholds per severity, manage shared tags, and define deadlines in Project Settings → Annotation Workflow. The Annotations toolbar provides server-side overdue, due-soon, no-deadline, and SLA-breach filters.

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

    Saved views can be personal or shared with project members. Filter selections use stable URL parameters, so refreshes and shared links retain the selected triage context.

    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[data-action='submit']",
    9    "assignee": "dev@example.com",
    10    "createdAt": "2025-03-26T00:00:00Z"
    11  }
    12]