LeafMarker - Visual editor for Claude Code, Cursor & Codex

Tracking since May 5, 2026.

Changelog

• May 16, 2026
  description

  Stop describing bugs to your AI. Just point at them.
  
  LeafMarker turns a click on any webpage into a task your AI coder fixes for you. Click the broken thing, type what's wrong, run "leaf" in Claude Code, Cursor, or Codex — your AI finds the file, makes the fix, marks it done. The whole loop happens inside your repo, in plain markdown your AI already knows how to read.
  
  ━━━━━━━━━━━━━━━━━━━━
  HOW IT WORKS
  ━━━━━━━━━━━━━━━━━━━━
  
  1. Open your running app in Chrome — localhost, staging, a Vercel preview, or your live site.
  2. Press C. Click any element. Type a comment.
  3. In Claude Code, Cursor, or Codex, run "leaf". The AI reads the task, finds the element in your code, ships the fix, marks it done.
  
  Every task carries a CSS selector, a screenshot, the page URL, and your comment. Your AI gets exact context, not English descriptions of where to look.
  
  ━━━━━━━━━━━━━━━━━━━━
  WHY IT'S DIFFERENT
  ━━━━━━━━━━━━━━━━━━━━
  
  → Works on the app you've actually built — not a recreation of it. Other tools want you to rebuild the UI inside their environment first. LeafMarker reads what's in front of you in the browser, on whatever URL you're developing against.
  
  → Works with any AI coder. Claude Code, Cursor, and Codex are tested and supported. The output is plain markdown, JSON, and PNG files — anything that reads files plays well. You're not locked in.
  
  → Your work stays in your repo. Comments, selectors, screenshots — all written locally to a .leafmarker/ folder. Only Google sign-in and billing touch our servers. Your annotations never do.
  
  ━━━━━━━━━━━━━━━━━━━━
  WHAT LANDS IN YOUR REPO
  ━━━━━━━━━━━━━━━━━━━━
  
  A new .leafmarker/ folder, with:
  
  - leafmarker-tasks.md — human-readable checklist, regenerated on every change
  - leafmarker-tasks-detail.json — machine-readable task data (selector, URL, screenshot path, status, timestamps)
  - screenshots/ — one PNG per task
  - Workflow rules deployed automatically: leafmarker-workflow.mdc, leaf-command.md, vscode-task.json
  
  Anything that can read files can consume it.
  
  ━━━━━━━━━━━━━━━━━━━━
  THREE WAYS TO RUN IT
  ━━━━━━━━━━━━━━━━━━━━
  
  - step leaf — one task at a time, with approval between each (safest, default)
  - batch leaf — group related tasks, apply them together
  - yolo leaf — full queue, dependency-ordered, no prompts
  
  The bundled workflow rules detect dependencies between tasks (sequential cues, pronouns) so your AI works through the queue in a sensible order — not random.
  
  ━━━━━━━━━━━━━━━━━━━━
  KEYBOARD SHORTCUTS
  ━━━━━━━━━━━━━━━━━━━━
  
  C — toggle comment mode
  Esc — exit comment mode
  Enter — submit a comment
  Shift+Enter — newline in the comment box
  Cmd/Ctrl+Shift+P — pick or re-pick the project directory
  Cmd/Ctrl+R — manual refresh
  
  ━━━━━━━━━━━━━━━━━━━━
  WHAT YOU CAN DO WITH IT
  ━━━━━━━━━━━━━━━━━━━━
  
  - Fix UI bugs without ever leaving your browser
  - Turn a designer's review session into a queue your AI works through
  - Replace QA tickets with comments your AI can act on directly
  - Drop pointers on a page for a new contributor: "this lives in components/Header.tsx"
  - Audit accessibility — let the AI fix the obvious ones
  - Catch a bug in production, fix it in your local code, ship — without ever reproducing it locally first
  - Pair-program across timezones: leave comments by day, your overnight collaborator (human or AI) runs "leaf" and ships them by morning
  
  ━━━━━━━━━━━━━━━━━━━━
  WHAT YOU GET
  ━━━━━━━━━━━━━━━━━━━━
  
  A draggable sidebar that collapses into a floating button. A three-column task board (To Do, Doing, Done) with live counts and per-task actions. Hover any element on the page, see it outlined, click to attach a comment. Multi-line comment box. Annotated screenshot and CSS selector saved with every task.
  
  Dark and light themes that respect your system. In-popup settings — you never leave the page.
  
  A 3-second refresh loop so the sidebar reflects what your AI is doing in real time. Connection verifier that reconnects automatically if the browser drops your project. Deduplicated notifications — the same error never hits you eight times.
  
  The "leaf" command works in Claude Code, Cursor, and Codex out of the box. A VS Code task template ships with it. The bundled workflow rules teach your AI exactly how to read, group, prioritize, and complete tasks.
  
  Google sign-in via the Chrome identity API. No password forms.
  
  ━━━━━━━━━━━━━━━━━━━━
  FREE / PRO
  ━━━━━━━━━━━━━━━━━━━━
  
  Free
  - 6 tasks per project (lifetime)
  - 3 connected projects
  - Light theme
  
  Pro — $8.49 / 3 months or $24.99 / year
  - Unlimited tasks per project
  - Unlimited connected projects
  - Light + dark theme
  
  Less than a coffee. Saves you hours every week. All limits lift the moment payment goes through. Cancel any time — keep access for the period you paid for.
  
  ━━━━━━━━━━━━━━━━━━━━
  WHY IT EXISTS
  ━━━━━━━━━━━━━━━━━━━━
  
  Most feedback tools live outside your repo — a screenshot in Slack, a ticket in Jira, a comment in Figma. LeafMarker writes into the same folder your code lives in, in the same format your AI coder already reads. The hand-off between "I saw a bug" and "it's fixed" stops being a workflow. It becomes a single keystroke.
  
  Privacy: https://belikely.com/en/leafmarker/privacy
  Terms: https://belikely.com/en/leafmarker/terms

  Stop describing bugs to your AI. Just point at them.
  
  LeafMarker turns a click on any webpage into a task your AI coder fixes for you. Click the broken thing (or snip a region for canvases, video, and cross-origin embeds), type what's wrong, run /leaf in Claude Code, Cursor, or Codex — your AI finds the file, makes the fix, marks it done. The whole loop happens inside your repo, in plain JSON and PNG files your AI already knows how to read.
  
  ━━━━━━━━━━━━━━━━━━━━
  HOW IT WORKS
  ━━━━━━━━━━━━━━━━━━━━
  
  1. Open your running app in Chrome — localhost, staging, a Vercel preview, or your live site.
  2. Press C to click any element, or press S to drag a region (for canvases, video, cross-origin embeds where the DOM picker can't reach).
  3. Type a comment in the popup that appears.
  4. In Claude Code, Cursor, or Codex, run /leaf. The AI reads the task, finds the element in your code, ships the fix, marks it done.
  
  Every task carries a CSS selector (or a snipped screenshot region), a page URL, and your comment. Your AI gets exact context, not English descriptions of where to look.
  
  ━━━━━━━━━━━━━━━━━━━━
  WHY IT'S DIFFERENT
  ━━━━━━━━━━━━━━━━━━━━
  
  → Works on the app you've actually built — not a recreation of it. Other tools want you to rebuild the UI inside their environment first. LeafMarker reads what's in front of you in the browser, on whatever URL you're developing against.
  
  → Works with any AI coder. Claude Code, Cursor, and Codex are tested and supported. The output is plain JSON and PNG files — anything that reads files plays well. You're not locked in.
  
  → Your work stays in your repo. Comments, selectors, screenshots — all written locally to a .leafmarker/ folder inside your project. Only Google sign-in and billing touch our servers. Your annotations never do.
  
  → Built for brownfield. Inherited a React app you didn't write? Point at the bug anyway — the AI finds the file from the selector, screenshot, and URL. You don't have to know the codebase.
  
  ━━━━━━━━━━━━━━━━━━━━
  WHAT LANDS IN YOUR REPO
  ━━━━━━━━━━━━━━━━━━━━
  
  A new .leafmarker/ folder, with:
  
  - leafmarker-tasks-detail.json — the single source of truth for your task queue (selector, URL, screenshot path, status, timestamps, comment)
  - screenshots/ — one PNG per task
  - lm.js — bundled zero-dependency CLI your AI uses for atomic writes (merge-on-write, no clobbered fields, single-doing invariant)
  - Workflow rules deployed automatically: leafmarker-workflow.mdc (Cursor), leaf-command.md (Claude Code, Codex), vscode-task.json
  
  Anything that can read files can consume it.
  
  ━━━━━━━━━━━━━━━━━━━━
  THREE WAYS TO RUN IT
  ━━━━━━━━━━━━━━━━━━━━
  
  - /leaf (default, yolo) — full queue, dependency-ordered, no prompts. Run when you trust the queue and want to step away.
  - /leaf step — one task at a time, with approval between each. Use when you want to eyeball every change.
  - /leaf batch — group related tasks (same selector / same component) and apply them together with one approval.
  
  In Cursor, drop the slash: leaf, step leaf, batch leaf. Same dispatcher.
  
  The bundled workflow rules detect dependencies between tasks (sequential cues, pronouns) so your AI works through the queue in a sensible order — not random.
  
  ━━━━━━━━━━━━━━━━━━━━
  KEYBOARD SHORTCUTS
  ━━━━━━━━━━━━━━━━━━━━
  
  C — toggle comment mode (element picker)
  S — enter region-snip mode (drag a rectangle to capture)
  Esc — exit comment or snip mode
  Enter — submit a comment
  Shift+Enter — newline in the comment box
  Cmd/Ctrl+Shift+P — pick or re-pick the project directory
  Cmd/Ctrl+R — manual refresh
  
  ━━━━━━━━━━━━━━━━━━━━
  WHAT YOU CAN DO WITH IT
  ━━━━━━━━━━━━━━━━━━━━
  
  - Fix UI bugs without ever leaving your browser
  - Turn a designer's review session into a queue your AI works through
  - Capture bugs inside canvas charts, video players, or third-party iframes — anywhere the DOM picker can't reach (press S)
  - Replace QA tickets with comments your AI can act on directly
  - Drop pointers on a page for a new contributor: "this lives in components/Header.tsx"
  - Audit accessibility — let the AI fix the obvious ones
  - Catch a bug in production, fix it in your local code, ship — without ever reproducing it locally first
  - Pair-program across timezones: leave comments by day, your overnight collaborator (human or AI) runs /leaf and ships them by morning
  - Inherit a codebase you didn't write — point at the bug, the AI finds the file from the selector + screenshot + URL
  
  ━━━━━━━━━━━━━━━━━━━━
  WHAT YOU GET
  ━━━━━━━━━━━━━━━━━━━━
  
  A draggable sidebar that collapses into a floating button. A three-column task board (To Do, Doing, Done) with live counts and per-task actions. Hover any element on the page, see it outlined, click to attach a comment. Or press S to drag a region — works on canvases, videos, cross-origin embeds the element picker can't reach. Multi-line comment box. Selector or snipped screenshot saved with every task.
  
  Smart project-mismatch detection — captures the favicon of your project at connect time, warns you if you reload the same site tomorrow and it actually looks like a different repo. Per-origin auto-reconnect so the right project handle is restored on every reload.
  
  Dark and light themes that respect your system. In-popup settings — you never leave the page.
  
  A 3-second refresh loop so the sidebar reflects what your AI is doing in real time. Connection verifier that prompts reconnection automatically if the browser drops your project. Deduplicated notifications — the same error never hits you eight times.
  
  /leaf works in Claude Code, Cursor, and Codex out of the box. A VS Code task template ships with it. The bundled workflow rules teach your AI exactly how to read, group, prioritize, and complete tasks.
  
  Google sign-in via the Chrome identity API. No password forms.
  
  ━━━━━━━━━━━━━━━━━━━━
  FREE / PRO
  ━━━━━━━━━━━━━━━━━━━━
  
  Free
  - 6 tasks per project (lifetime, cumulative — across all 3 free projects, that's 18 annotations)
  - 3 connected projects
  - Light theme
  
  Pro — pick the tier that fits:
  - Quarterly · $18.99 every 3 months (~$6.33/month — lowest-commitment way to try Pro)
  - Yearly · $59.99 / year (~$5/month — saves ~$16 vs paying quarterly all year)
  - Lifetime · $199.99 one-time (never billed again — pays back vs Yearly in ~3.3 years)
  
  Pro unlocks identically across all three plans:
  - Unlimited tasks per project
  - Unlimited connected projects
  - Light + dark theme
  
  All limits lift the moment payment goes through. Subscriptions cancel any time — keep access for the period you paid for. Lifetime is a one-time payment, no further billing, ever.
  
  ━━━━━━━━━━━━━━━━━━━━
  WHY IT EXISTS
  ━━━━━━━━━━━━━━━━━━━━
  
  Most feedback tools live outside your repo — a screenshot in Slack, a ticket in Jira, a comment in Figma. LeafMarker writes into the same folder your code lives in, in the same format your AI coder already reads. The hand-off between "I saw a bug" and "it's fixed" stops being a workflow. It becomes a single keystroke.
  
  Privacy: https://belikely.com/en/leafmarker/privacy
  Terms: https://belikely.com/en/leafmarker/terms

• May 10, 2026
  description

  LeafMarker turns clicks on a running web app into structured tasks your AI coder (Claude Code, Cursor, CodeX, or any tool that reads markdown) can execute. Point at the bug, type the fix, get back to work.
  
  ━━━━━━━━━━━━━━━━━━━━
  HOW IT WORKS
  ━━━━━━━━━━━━━━━━━━━━
  
  1. Press C, hover any element on the page — see it outlined.
  2. Click and type a comment. LeafMarker captures the CSS selector, a screenshot, the URL, and your comment as a task.
  3. In Cursor or Claude Code, run "leaf". The AI reads the task, finds the element in your codebase, fixes it, marks it done.
  
  ━━━━━━━━━━━━━━━━━━━━
  EVERYTHING LIVES IN YOUR REPO
  ━━━━━━━━━━━━━━━━━━━━
  
  LeafMarker writes a .leafmarker/ folder inside your project:
  
  - leafmarker-tasks.md — human-readable checklist, regenerated on every change
  - leafmarker-tasks-detail.json — machine-readable tasks (id, selector, screenshot path, URL, comment, status, timestamps)
  - screenshots/ — one PNG per task
  - Workflow rules deployed automatically: leafmarker-workflow.mdc, leaf-command.md, vscode-task.json
  
  Because the output is just markdown + JSON + PNG inside your repo, any tool that can read files can consume it.
  
  ━━━━━━━━━━━━━━━━━━━━
  THREE EXECUTION MODES
  ━━━━━━━━━━━━━━━━━━━━
  
  - step leaf — one task at a time with approval between each (default, safest)
  - batch leaf — group related tasks and apply per-group
  - yolo leaf — process everything in dependency order, no prompts
  
  The bundled workflow rules tell your AI exactly how to read tasks, group them, attach screenshot context, detect dependencies, and flip them to "done" as it goes — and the sidebar reflects the status changes in real time.
  
  ━━━━━━━━━━━━━━━━━━━━
  KEYBOARD SHORTCUTS
  ━━━━━━━━━━━━━━━━━━━━
  
  C — toggle comment mode
  Esc — exit comment mode
  Enter — submit
  Shift+Enter — newline inside the comment box
  Cmd/Ctrl+Shift+P — pick the project directory
  Cmd/Ctrl+R — manual refresh
  
  ━━━━━━━━━━━━━━━━━━━━
  WHAT YOU GET
  ━━━━━━━━━━━━━━━━━━━━
  
  Annotation & Capture
  - Element picker with live highlight
  - CSS selector capture
  - Annotated screenshots saved locally
  - Page context (URL, bounding rect, element geometry) on every task
  - Multi-line comment composer
  
  Sidebar UI
  - Floating, draggable sidebar that collapses into a draggable FAB
  - Three-column task board: To Do, Doing, Done with live counts
  - Per-task actions: view, edit, remove
  - Project connection indicator with hover tooltip
  - Dark / light theme toggle (respects system preference)
  - In-popup settings panel — never leave the page
  
  Notifications & Reliability
  - Deduplicated notifications (no "same error 8 times")
  - Connection event manager keeps UI and content script in sync
  - 3-second auto-refresh loop catches AI-side changes
  - Connection verifier prompts reconnect if the browser drops the directory handle
  
  AI Workflow Integration
  - "leaf" command for Cursor / Claude Code
  - Dependency detection from comment text
  - VS Code task template included
  
  Authentication
  - Google sign-in via the Chrome identity API → Firebase Auth, no password forms
  
  ━━━━━━━━━━━━━━━━━━━━
  GREAT FOR
  ━━━━━━━━━━━━━━━━━━━━
  
  - Fixing bugs in brownfield front-ends — point, comment, ship
  - Design review → implementation — designer leaves 10 comments, batch leaf applies them
  - QA → task queue — every rough edge becomes a task, not a Jira ticket
  - Rapid prototyping with an AI pair — stay in the browser, the loop shrinks to seconds
  - Onboarding new contributors — annotate the header with "this lives in components/AppShell/Header.tsx"
  - Accessibility audits — drop comments on focus traps, missing labels, low-contrast elements
  - Client-visible UI fixes without a meeting — share localhost, they click the thing, you run leaf
  - Pair-programming across timezones — leave comments by day; overnight collaborator (human or AI) ships them by morning
  
  ━━━━━━━━━━━━━━━━━━━━
  FREE / PRO
  ━━━━━━━━━━━━━━━━━━━━
  
  Free
  - 6 tasks per project (lifetime)
  - 3 connected projects
  - Light theme
  
  Pro — $1.99/mo, $4.99/quarter, $14.99/year
  - Unlimited tasks per project
  - Unlimited connected projects
  - Light + dark theme
  
  All limits lift the moment payment is processed.
  
  ━━━━━━━━━━━━━━━━━━━━
  WHY IT EXISTS
  ━━━━━━━━━━━━━━━━━━━━
  
  Most "feedback" tools live outside your repo — a screenshot in Slack, a ticket in Jira, a comment in Figma. LeafMarker writes into the same folder your code lives in, in the same format your AI coder already reads. The hand-off between "I saw a bug" and "it's fixed" stops being a workflow and starts being a single keystroke.
  
  Privacy: https://belikely.com/en/leafmarker/privacy
  Terms: https://belikely.com/en/leafmarker/terms

  Stop describing bugs to your AI. Just point at them.
  
  LeafMarker turns a click on any webpage into a task your AI coder fixes for you. Click the broken thing, type what's wrong, run "leaf" in Claude Code, Cursor, or Codex — your AI finds the file, makes the fix, marks it done. The whole loop happens inside your repo, in plain markdown your AI already knows how to read.
  
  ━━━━━━━━━━━━━━━━━━━━
  HOW IT WORKS
  ━━━━━━━━━━━━━━━━━━━━
  
  1. Open your running app in Chrome — localhost, staging, a Vercel preview, or your live site.
  2. Press C. Click any element. Type a comment.
  3. In Claude Code, Cursor, or Codex, run "leaf". The AI reads the task, finds the element in your code, ships the fix, marks it done.
  
  Every task carries a CSS selector, a screenshot, the page URL, and your comment. Your AI gets exact context, not English descriptions of where to look.
  
  ━━━━━━━━━━━━━━━━━━━━
  WHY IT'S DIFFERENT
  ━━━━━━━━━━━━━━━━━━━━
  
  → Works on the app you've actually built — not a recreation of it. Other tools want you to rebuild the UI inside their environment first. LeafMarker reads what's in front of you in the browser, on whatever URL you're developing against.
  
  → Works with any AI coder. Claude Code, Cursor, and Codex are tested and supported. The output is plain markdown, JSON, and PNG files — anything that reads files plays well. You're not locked in.
  
  → Your work stays in your repo. Comments, selectors, screenshots — all written locally to a .leafmarker/ folder. Only Google sign-in and billing touch our servers. Your annotations never do.
  
  ━━━━━━━━━━━━━━━━━━━━
  WHAT LANDS IN YOUR REPO
  ━━━━━━━━━━━━━━━━━━━━
  
  A new .leafmarker/ folder, with:
  
  - leafmarker-tasks.md — human-readable checklist, regenerated on every change
  - leafmarker-tasks-detail.json — machine-readable task data (selector, URL, screenshot path, status, timestamps)
  - screenshots/ — one PNG per task
  - Workflow rules deployed automatically: leafmarker-workflow.mdc, leaf-command.md, vscode-task.json
  
  Anything that can read files can consume it.
  
  ━━━━━━━━━━━━━━━━━━━━
  THREE WAYS TO RUN IT
  ━━━━━━━━━━━━━━━━━━━━
  
  - step leaf — one task at a time, with approval between each (safest, default)
  - batch leaf — group related tasks, apply them together
  - yolo leaf — full queue, dependency-ordered, no prompts
  
  The bundled workflow rules detect dependencies between tasks (sequential cues, pronouns) so your AI works through the queue in a sensible order — not random.
  
  ━━━━━━━━━━━━━━━━━━━━
  KEYBOARD SHORTCUTS
  ━━━━━━━━━━━━━━━━━━━━
  
  C — toggle comment mode
  Esc — exit comment mode
  Enter — submit a comment
  Shift+Enter — newline in the comment box
  Cmd/Ctrl+Shift+P — pick or re-pick the project directory
  Cmd/Ctrl+R — manual refresh
  
  ━━━━━━━━━━━━━━━━━━━━
  WHAT YOU CAN DO WITH IT
  ━━━━━━━━━━━━━━━━━━━━
  
  - Fix UI bugs without ever leaving your browser
  - Turn a designer's review session into a queue your AI works through
  - Replace QA tickets with comments your AI can act on directly
  - Drop pointers on a page for a new contributor: "this lives in components/Header.tsx"
  - Audit accessibility — let the AI fix the obvious ones
  - Catch a bug in production, fix it in your local code, ship — without ever reproducing it locally first
  - Pair-program across timezones: leave comments by day, your overnight collaborator (human or AI) runs "leaf" and ships them by morning
  
  ━━━━━━━━━━━━━━━━━━━━
  WHAT YOU GET
  ━━━━━━━━━━━━━━━━━━━━
  
  A draggable sidebar that collapses into a floating button. A three-column task board (To Do, Doing, Done) with live counts and per-task actions. Hover any element on the page, see it outlined, click to attach a comment. Multi-line comment box. Annotated screenshot and CSS selector saved with every task.
  
  Dark and light themes that respect your system. In-popup settings — you never leave the page.
  
  A 3-second refresh loop so the sidebar reflects what your AI is doing in real time. Connection verifier that reconnects automatically if the browser drops your project. Deduplicated notifications — the same error never hits you eight times.
  
  The "leaf" command works in Claude Code, Cursor, and Codex out of the box. A VS Code task template ships with it. The bundled workflow rules teach your AI exactly how to read, group, prioritize, and complete tasks.
  
  Google sign-in via the Chrome identity API. No password forms.
  
  ━━━━━━━━━━━━━━━━━━━━
  FREE / PRO
  ━━━━━━━━━━━━━━━━━━━━
  
  Free
  - 6 tasks per project (lifetime)
  - 3 connected projects
  - Light theme
  
  Pro — $8.49 / 3 months or $24.99 / year
  - Unlimited tasks per project
  - Unlimited connected projects
  - Light + dark theme
  
  Less than a coffee. Saves you hours every week. All limits lift the moment payment goes through. Cancel any time — keep access for the period you paid for.
  
  ━━━━━━━━━━━━━━━━━━━━
  WHY IT EXISTS
  ━━━━━━━━━━━━━━━━━━━━
  
  Most feedback tools live outside your repo — a screenshot in Slack, a ticket in Jira, a comment in Figma. LeafMarker writes into the same folder your code lives in, in the same format your AI coder already reads. The hand-off between "I saw a bug" and "it's fixed" stops being a workflow. It becomes a single keystroke.
  
  Privacy: https://belikely.com/en/leafmarker/privacy
  Terms: https://belikely.com/en/leafmarker/terms

• May 10, 2026
  name

  LeafMarker - Visual editor for Cursor

  LeafMarker - Visual editor for Claude Code, Cursor & Codex

Permissions & access

Permissions

activeTabstorageidentity

Host access

<all_urls>

Screenshots