Annotations — comparison matrix
Internal development tracker for how @coframe/annotations compares to
the strongest tools in the space — including capabilities we have not
built yet. ❌ in our column is expected and useful: it is the roadmap.
Every ✅/🟡 in our column carries its supporting evidence inline — a
live demo, a docs section, or
the unit test that proves the behavior in
packages/coframe-annotations.
Legend: ✅ full support · 🟡 partial / with caveats · ❌ not supported. Competitor cells verified against their public source (agentation, react-grab) and Cursor’s announcement; Cursor is closed-source, so its cells reflect documented behavior only.
Injection & reach
Section titled “Injection & reach”| Capability | Coframe | Agentation | React Grab | Cursor |
|---|---|---|---|---|
| Framework-agnostic (any page, no source) | ✅ vanilla DOM (quick start) | ❌ React 18+ component | ❌ React only | 🟡 own browser |
| Injectable into third-party/prod pages (CDP, script tag, IIFE) | ✅ (quick start · install.test.ts) | ❌ npm install | ❌ npm install | ❌ |
| Zero runtime dependencies | ✅ single IIFE, no peer deps (package.json) | 🟡 React peer | 🟡 React peer | n/a |
| Closed shadow-DOM overlay (no page CSS bleed) | ✅ (playground — inspect: one closed #annotations-v1-host) | ❌ | ✅ | n/a |
| SPA navigation survival + re-anchoring | ✅ scored resolver (re-anchor demo) | ❌ static markers | 🟡 | 🟡 |
Selection
Section titled “Selection”| Capability | Coframe | Agentation | React Grab | Cursor |
|---|---|---|---|---|
| Element click selection | ✅ (selection demo) | ✅ | ✅ | ✅ |
| Text-range selection | ✅ (selection demo) | ✅ | ❌ | ❌ |
| Multi-element grouping | ✅ (selection demo · picker-selection.test.ts) | ✅ via drag | 🟡 | ❌ |
| Area / drag-rectangle selection | ✅ (selection demo · area-selection.test.ts) | ✅ | ✅ | ❌ |
| Keyboard hierarchy navigation (parent/child/sibling) | ✅ Alt+arrows (selection demo) | ❌ | ✅ arrows | 🟡 tree panel |
| Animation pause / freeze | ✅ CSS+WAAPI+video (selection demo · freeze.test.ts) | ✅ | ✅ incl. GSAP hook | ❌ |
| Shadow-DOM deep hit-testing (open roots) | ✅ (area-selection.test.ts) | ❌ | ✅ | n/a |
| Same-origin iframe selection | ❌ planned | ❌ | ✅ event forwarding | 🟡 |
| Freehand drawing / markup strokes | ❌ planned | ✅ linked to annotations | ❌ | ❌ |
Captured detail (forensics)
Section titled “Captured detail (forensics)”| Capability | Coframe | Agentation | React Grab | Cursor |
|---|---|---|---|---|
| Stable selector + full DOM path | ✅ (forensics demo) | ✅ | ✅ | ✅ |
| Bounding boxes (document + viewport) | ✅ (forensics demo) | ✅ | ✅ | ✅ |
| Grouped computed styles | ✅ 5 groups (forensics demo · forensics.test.ts) | 🟡 flat list | ✅ | ✅ inspector |
| Accessibility (role, name, ARIA, focus, disabled) | ✅ (forensics demo) | 🟡 string summary | ❌ | 🟡 |
| Ancestor + sibling context | ✅ (forensics demo) | 🟡 nearby text/elements | 🟡 | ✅ tree |
| React component stack | ✅ (forensics demo · source.test.ts) | ✅ | ✅ | ✅ |
| Source file:line (dev builds) | ✅ 3 channels + explicit unavailable reasons (forensics demo · source.test.ts) | ✅ | ✅ | ✅ |
| Page context (URL, viewport, scroll, DPR, UA) | ✅ (forensics demo) | ✅ | 🟡 | ✅ |
| Versioned JSON schema for app-layer reports | ✅ AnnotationForensics v1 (capabilities) | 🟡 markdown-first | 🟡 prompt-first | ❌ opaque |
| Screenshots | ✅ host-captured (screenshots demo) | 🟡 drawing capture via optional dep | ❌ | ✅ |
State, persistence & integration
Section titled “State, persistence & integration”| Capability | Coframe | Agentation | React Grab | Cursor |
|---|---|---|---|---|
| Controlled state (host owns collection, replace + subscribe) | ✅ (controlled demo · api-controlled.test.ts) | 🟡 callbacks only | ❌ | ❌ |
Fully headless (overlay: false, host renders UI) | ✅ (controlled demo · bundle.test.ts) | ❌ | 🟡 API | ❌ |
| Uncontrolled persistence (localStorage / custom adapter) | ✅ versioned + pluggable (capabilities · persistence.test.ts) | 🟡 7-day localStorage | ❌ | n/a |
| Structured event protocol (AFS envelopes, webhook) | ✅ v1.1 (agent demo · webhook) | ✅ v1.1 (origin) | ❌ | ❌ |
| Agent round-trip (threads, resolve, status) | ✅ (agent demo) | 🟡 server sync + threads + MCP | 🟡 | ✅ agents |
| Multi-actor live cursors | ✅ (agent demo · Cursors.ts) | ❌ | ❌ | ✅ |
| Composer customization (fields, severity, intents) | ✅ (severity demo) | ❌ | ❌ | ❌ |
| Host action slots | ✅ (actions demo) | ❌ | 🟡 toolbar | ❌ |
| Hydration & URL/variant scoping | ✅ (hydration demo) | 🟡 per-page storage | ❌ | n/a |
| MCP server | ❌ by design — integration is app-layer (editor-web/Jarvis) | ✅ | ❌ | n/a |
Visual design editing — phase one shipped
Section titled “Visual design editing — phase one shipped”The end-state is Cursor/Jarvis-class visual editing on top of this annotation/capture foundation. Phase one — live style + text editing with structured, revertible edit operations — is built; the remaining ❌s are the roadmap, not a gap we’re hiding.
| Capability | Coframe | Agentation | React Grab | Cursor |
|---|---|---|---|---|
| Component tree inspector panel | ❌ planned (data captured — forensics demo — no panel UI) | ❌ | 🟡 hierarchy picker | ✅ |
| Layout / position / spacing editing panels | ❌ planned | ❌ | ❌ | ✅ |
| Live style editing (colors, typography, tokens) | 🟡 colors + typography with live preview/revert (editing demo · EditPanel.ts); no design tokens | ❌ | 🟡 edit panel | ✅ token-aware |
| Inline text content editing | ✅ contentEditable with before/after ops (editing demo · edits.ts) | ❌ | ❌ | ✅ |
| Props editing on the live page | ❌ planned | ❌ | ❌ | ✅ |
| Drag-to-rearrange elements | ❌ planned (protocol has rearrange kind, no UI) | ✅ layout mode | ❌ | 🟡 |
| Component placement palette / wireframing | ❌ planned (protocol has placement kind, no UI) | ✅ 65+ components + wireframe mode | ❌ | ❌ |
| Breakpoint / responsive preview | ❌ planned | ❌ | ❌ | ✅ |
| Point-and-prompt: spawn agent from a selection | 🟡 via host apps (agent demo) | 🟡 via MCP | ✅ Claude Code handoff | ✅ parallel agents |
| Published head-to-head benchmark | ❌ planned | ❌ | ✅ 331-task suite | 🟡 measured in React Grab’s suite |
Where competitors still lead
Section titled “Where competitors still lead”Tracked in the roadmap, honestly stated:
- Cursor / Jarvis-class visual design editing — phase one (style + text editing with structured edit operations) shipped; layout / spacing panels, token-aware color, props editing, and responsive preview are still ahead.
- Agentation’s layout-mode component palette + freehand drawing — placement/rearrange kinds exist in our protocol; the palette and drawing UI do not.
- React Grab’s same-origin iframe forwarding and GSAP-aware freeze — our freeze covers CSS/WAAPI/video only; iframes are unsupported.
- React Grab’s published benchmark (React Grab 96%/20.7s vs Cursor 95%/30.7s vs Agentation 96%/31.5s over 331 tasks) — our unique angle is live production pages with no source access, where source-mapped tools score zero by construction.