Claron
Claron0%
Trace interactive boundaries

“Cannot reproduce.” Never again.

Review a hosted preview, annotate directly on the page, inspect captured context, and hand issues off through the same dashboard your team already uses.

bug
critical

Submit button unresponsive on mobile viewport

annotation detail with captured context and follow-up actions

DetailImagesConsoleNetworkAI Fix
Selectorform#checkout > button.submit
SourceCheckout.tsx:42:8
ConsoleTypeError: null is not an object
NetworkGET /api/user → 404
S
Sarah Chen · Guest · 375×667
Beta — Free to startPreview live

How it works

01

Connect your repo

Push code. Preview is live in seconds.

preview · main
Active
100:01 Cloning github.com/acme/web…
200:03 Detected framework: Next.js 14.2
300:08 npm install — 847 packages
400:12✔Build complete — 2.1s
500:13✔Injecting Claron overlay…
600:14✔✓ Preview live at acme-web.claron.dev
02

Client clicks the bug

No account needed. No script tags.

Point
Critical
#ann_8f4a2c
Submit button broken on mobile
The submit button text is invisible on dark mode — white text on white background.
DOM Selector
form#checkout > div.actions > button[type="submit"]
Screenshot1024×768
Submit
1
Console2
TypeError: null is not an object
Warning: Each child should have a unique key
Network1
GET /api/user404
S
Sarah (client)
just now
Guest
03

One-click PR opened

Ticket, branch, commit, and PR stay linked.

AI Fix Suggestion

A.I.
94% confidence

Submit button missing padding on mobile

The `px-4` class is overridden by a media query. Appending `sm:px-6` resolves spacing.

AddedRemoved
OldNew
Code
42
− <button className="bg-blue-500 py-2">
42
+ <button className="bg-blue-500 py-2 px-4 sm:px-6">

Submit button broken on mobile

LINEAR-842

highOpen

PR #128 · fix mobile submit padding

claron/fix-ann-8f4a2c · checks passed

open

The core infrastructure.
Built for modern scale.

Claron isn't just an overlay. It's a fully integrated infrastructure layer that handles security, environments, and AI fixes — so you don't have to.Zero script tags required.

01
Claron
acme-web
on
3
2
Viewport
Host
acme-web.claron.dev/checkout
button[type="submit"]
Capturing: selector · screenshot · console · network
Visual Context

Click any element to
report a bug.

No more “what button did you click?” Select the exact DOM element. We automatically capture the selector, network requests, console errors, and viewport state.

02
One-Click Fix

AI resolves bugs
before you read them.

DOM selectors perfectly map to your source code. We automatically extract the surrounding component context and output the exact code change needed.

AI Fix Suggestion

A.I.
94% confidence

Submit button missing padding on mobile

The \`px-4\` class is overridden by a media query. Appending \`sm:px-6\` resolves spacing.

AddedRemoved
OldNew
Code
42
− <button className="bg-claron-primary py-2">
42
+ <button className="bg-claron-primary py-2 px-4 sm:px-6">
03
terminal
bash
$ claron apply ann_8f4a2c
✓ Fix applied to src/components/Button.tsx
✓ Committed: fix(ui): resolve submit button padding
✓ Pushed to branch: claron/fix-ann-8f4a2c
$ claron status
  3 annotations · 2 fixed · 1 pending AI review
One-Click PRs

Turn feedback into
a ready pull request.

Claron maps the bug to code, prepares the patch, runs verification, and opens a review-ready PR from the annotation. Developers can still inspect every diff before it merges.

04
Session Replay

Watch exactly what
they did.

Full DOM-based session recording powered by rrweb. Scrub through the user journey, see every click, and open DevTools alongside with console logs and network requests.

Session Replaysession_8f4a2c
live
Submit
DevToolsConsole
▸ [info] Page loaded · 1.2s
▸ [info] React hydrated
▸ [warn] Each child should have unique key
▸ [error] TypeError: null is not an object
▸ [error] GET /api/user → 404 (12ms)
▸ [info] Click: button.submit
▸ [error] Unhandled rejection
▸ [info] POST /api/checkout → 201
00:18 / 00:42
rrweb

The Ecosystem

Everything else you need for a complete feedback-to-fix pipeline, built directly into the platform.

Zero-Touch Injection

We host your frontend and inject our overlay via Shadow DOM. No script tags.

Inject Overlay
Next.js14.2Vite— not detected

Console + Network

Every annotation attaches the last 30s of console errors and failed network requests.

Page loaded in hosted preview

00:00Completed

Claron listener injected at session start.

TypeError caught in console

00:04Completed

Cannot read properties of undefined (reading 'map')

Network request failed

00:04Completed

GET /api/products 503 — attached to annotation

Client drops annotation

00:09Active

Logs from last 30s auto-attached to report.

420MS

AI Diff Verification

AI analyzes git diffs against original feedback to verify fixes.

Intercept webhook

15ms

Extract git diff & context

85ms

Verify matches ticket

320ms

In-Annotation Commenting

Threaded conversations inside each annotation.

S

Sarah · just now

Submit button invisible on dark mode.

D

Dev · 2 min ago

Does this happen on checkout or everywhere?

Visual Before / After

Puppeteer screenshots the element before and after your fix lands.

After
Before
Before
After

Rebuild Notifications

Client gets notified when the fix is deployed and live.

Notifications2

Fix deployed — review ready

Sarah's reported issue may have been addressed.

just now

New annotation from Sarah

Submit button still misaligned on iPad.

3 min ago

AI fix verified ✓

Linear-842 fix confirmed via git diff analysis.

12 min ago

Tickets + One-Click PRs

Generate the ticket, branch, commit, and pull request from the same annotation.

claron/fix-ann-8f4a2c

3 files changed · 1 annotation resolved

ready
selector mapped
Button.tsx:42
visual diff checked
mobile viewport
tests passed
agentic verification
Open pull requestone click

Browser Extension

For authenticated pages and SSR apps, injects the same overlay.

Client installs Claron extension

00:00Completed

One click from Chrome Web Store.

Navigates to live authenticated URL

00:12Completed

Their own session, their own cookies.

Overlay injected into live page

00:13Completed

Same annotation layer as hosted preview.

Annotation sent to Claron API

00:14Active

DOM selector + screenshot + metadata captured.

Webhook Support

Push annotation events to any internal system.

annotation.created
json
{
  "event": "annotation.created",
  "payload": {
    "selector": "nav > ul > li",
    "comment": "Link is dead",
    "ai_fix": "Add href"
  }
}

Encrypted Vault

All env vars are encrypted at rest and injected securely at build time.

Essential database and caching connections.

Required
Server Only
Optional

Monorepo Support

Auto-detect Turborepo, Nx, and pnpm workspaces.

Integrations

Plug into your stack.
Not the other way around.

Claron connects to the tools your team already uses. Toggle integrations on or off per project, and we'll route annotations into the project-level providers configured in the dashboard.Ticket and notification integrations live on the dedicated Integrations page.

+
+

Ticket Trackers

5/6 ON
CORE

Connect issue trackers per project so annotation work can be routed into the tools your team already uses.

Linear

Native

File issues directly to your Linear workspace with priority and assignee pre-filled.

Jira

Create Jira issues in any project. Supports epics, sprints, and custom fields.

Trello

Pending

Add cards to any Trello board and list. Attachments are included automatically.

Asana

Create tasks in Asana projects with full annotation detail and screenshots.

ClickUp

Push tasks to any ClickUp Space, Folder, or List with custom field mapping.

Shortcut

Create stories in Shortcut with workflow state and iteration support.

Project Tools

1/2 ON
PM

Configure board-style destinations from the same integrations screen used for ticket and notification providers.

Notion

Beta

Create database entries in any Notion page. Tags and statuses are auto-mapped.

Monday.com

Pending

Add items to Monday boards with status columns and annotation metadata.

Notifications

2/3 ON
ALERTS

Send annotation and build activity into chat tools your team already watches.

Slack

Popular

Send rich notifications to any channel when a bug is reported or fixed.

Microsoft Teams

Post adaptive cards to Teams channels with one-click actions to review or close.

Discord

Pending

Route annotation events to Discord channels with embedded previews.

+
+
Frequently Asked Questions

Everything you need
to know before you start.

This FAQ now follows the shipped product surface: hosted review sessions, annotations, AI investigation, integrations, and role-based access.