Comment on any HTML,
hand it back to your agent
A code review for your AI's plans and reports. Select any paragraph, table cell, chart, or diagram in a standalone HTML and comment inline exactly where you mean it, then hit Copy all to hand the agent a structured bundle of every note.
Commentable HTML See it in motion
The whole loop, in a couple of short clips: leave comments on a live document, hand them back, and watch the agent apply every one.
Why Commentable HTML
HTML has become the de-facto standard for planning and reporting with AI agents: plans, reports, design docs, and code reviews increasingly arrive as HTML, not Markdown. It is a spatial, richer medium - diffs and call-graphs as boxes and arrows, data as real charts, long documents as navigable sections. (Anthropic makes the same case in "The unreasonable effectiveness of HTML".) But the moment you want to revise that artifact the loop breaks down: you alt-tab between the render and the chat and describe in prose what to change. The richer the document, the more painful the round-trip.
Commentable HTML closes that loop - it is a code review for your plan. Select any paragraph, table cell, chart, diagram, or code block and comment in place, exactly where you mean it, then one Copy all hands the agent a structured bundle of every note. It drastically shortens the AI planning and iteration loop: you stay in the document and return to the chat only at the end.
The review loop, in four steps
Select
Any text, table cell, chart, diagram node, or code block.
Comment inline
A note opens right on your selection.
Copy all
One structured bundle of every open comment.
Reload
The agent edits; handled comments prune away.
Where the review happens
Chat, Markdown, HTML - or a tight loop?
Your agent can draft a brilliant plan in seconds. The real bottleneck is everything after - reading it, reacting to it, and getting your changes back into the model. Where that review happens decides how fast you actually move.
| Where you plan | Handles a big plan | Visual richness | Interactive | In-place review | Review loop |
|---|---|---|---|---|---|
| Chat / terminal | Poor | None | No | No | Painful |
| Markdown file | OK / Need viewer | Limited | No | No | Manual |
| Plain HTML | Good | Rich | Yes | No | Out-of-band |
| Commentable HTML | Good | Rich | Yes | Yes | Tight |
- In the chat window. The plan scrolls past in a terminal or chat app and is gone. Long plans are a chore to navigate and hard to keep or share - great for a sentence, hopeless for a spec.
- In a Markdown file. It survives, but raw Markdown is a slog to read and even a viewer stays flat: no real tables, diagrams, or charts. Few teammates read a 300-line
.md. - In plain HTML. Dense, structured, and nice to look at. But review still breaks: you read in the browser, then switch to the chat and describe, in words, what to change and where. Out-of-band and slow.
- With Commentable HTML. An even richer HTML - plus review in place. Comment on the exact sentence, table cell, chart, or diagram node; one Copy all hands the agent every note. The loop collapses to a single tight cycle.
Install
Works with both Claude Code and the GitHub Copilot CLI, and is invokable from each agent's CLI and Desktop app. Pick your agent, add the marketplace, then install the plugin.
copilot plugin marketplace add https://github.com/urikanonov/ai-marketplace
copilot plugin install commentable-html@urikan-ai-marketplace
claude plugin marketplace add https://github.com/urikanonov/ai-marketplace
claude plugin install commentable-html@urikan-ai-marketplace
- Download the ZIP above.
- In Claude (Desktop or claude.ai), open Settings > Features and enable Skills (Pro, Max, Team, or Enterprise with code execution).
- Upload the ZIP to add the
commentable-htmlskill, then invoke it in any chat.
Keep it up to date automatically
Install the auto-updater plugin to fetch new commentable-html releases on session start - always the latest fixes and features, no manual plugin update.
What you get
A full code-review layer that travels with the document; export to one shareable HTML file when you want to share.
Comment on anything
Prose, table cells, code blocks, KQL queries, charts, images, inline SVG figures, and mermaid diagram nodes are all selectable and commentable.
Rich content, not just prose
Author Chart.js charts, Mermaid diagrams, drag-and-drop triage boards, rendered code diffs (inline or side-by-side), and syntax-highlighted code and KQL snippets - all first-class, and every one of them individually commentable.
Self-contained when you share
By default the layer loads from small companion files for cheap iteration. One click inlines the CSS, review UI, and every comment into a single HTML file you can email, archive, or reopen anywhere - no server and no build step.
Round-trip to the agent
One Copy all hands the agent every comment at once, with the full discussion context. The agent can answer discussion questions without edits or make coordinated changes for owner-approved edit requests, then retain answers and mark only ordinary edit comments handled.
Discuss before requesting edits
Anchored discussion questions receive AI answers without authorizing edits. Continue the conversation, then explicitly mark a reply as a Command to edit using the whole history. Needs owner handoff / AI reply means unanswered, not proof that the AI has never read it; Copy and export are not read receipts. No server or folder permissions are needed.
Export as Shareable or Offline
Export as Shareable inlines the review layer and comments so a review travels in one file. Export Offline goes further: it snapshots the mermaid diagrams and charts and strips every remote loader, so the file opens with no network at all.
Handled comments stay gone
Ordinary edit comments marked handled are pruned on reload. Discussion history remains visible, with answers bound to the exact question version so editing or asking again reopens it.
Comments survive a restart
While you iterate, every comment is saved to your browser's localStorage, so closing the tab, restarting the browser, or rebooting your machine never loses your work - reopen the file and your comments are still there.
Deterministic tools
Ships stdlib-only Python tools and a strict validator so generated documents are correct by construction, not by luck.
Commentable decks
Turn a request into an animation-rich, fixed 16:9 slide deck that is also a commentable document: present it full-screen, toggle comment mode to leave notes on the live slides, navigate with the slide bar or arrow keys, and Export Offline for a network-silent handoff.
Deck engine: a curated, vendored subset of frontend-slides by Zara Zhang (MIT). See Credits.
Navigate long documents
A live table of contents, collapsible sections, and one-click jump from any comment straight to its highlight keep even a long report easy to move through.
No extension, runs everywhere
Opening a generated file to read or comment needs no browser extension, plugin, or install - the whole review layer is plain HTML, CSS, and JavaScript inside the file, so anyone you share it with opens it in any modern browser on Windows, macOS, and Linux. (Authoring new documents uses the commentable-html plugin.)
Only as big as it needs to be
A generated file NAMES the Mermaid and Chart.js builds it may need - a pinned address plus a checksum, about 2.5 KB - instead of carrying 1.3 MB of them that only an Export Offline would ever have used. A diagram-heavy report is roughly 60 percent smaller for it, a document with no diagram or chart names nothing at all, and what remains is kept out of the head so the top of the file stays readable to ordinary tools.
How the review loop works
Feedback goes back to the agent as structured data, not pasted prose.
Self review
Generate
The agent produces a commentable HTML report.
Comment
You select text and leave inline notes in the sidebar.
Copy all
Hand the agent a Markdown bundle of every open comment.
Reload
The agent acts and marks ids handled; handled comments prune away.
Peer review
Self review first
Run the self-review loop to get the artifact in good shape.
Export as Shareable
Download one self-contained copy and share it with a peer.
Peer comments
The peer opens it, adds inline comments, and Exports as Shareable again - comments now embedded in the HTML.
Back to the agent
You open their Shareable file and Copy all to feed their feedback to the agent.
Review someone's plan
Receive a plan
A colleague sends a plan or report as markdown or HTML.
Convert
Ask the agent to turn it into a commentable HTML with this skill.
Review inline
Add your comments in place, on exactly the parts you mean.
Export and send back
Export as Shareable and return it with your comments embedded.
Demo
Real commentable examples, including the flagship showcase deck. Select any text and the Add comment popup appears.
Private by design
The review layer runs locally as a static file, with no hosted service, plugin account, or telemetry. Sharing is your choice: send an export or hand Copy all to your agent.
Local-first review data
Comments and discussion history persist in browser localStorage and travel in exported HTML. The browser does not contact an AI automatically; an owner handoff supplies the requests and returns persistent answers.
You choose what travels
The plugin sends no review data to its own service. Sharing an export or handing Copy all to your agent is explicit. Discussions use the standalone file, not a hosted chat service.
You control access and copies
Exports, browser storage, other reviewers' copies, and backups remain separate copies, not erased by deleting one HTML. Comments are keyed to a stable id baked into the document: when it is served from one web origin, moving or renaming it there keeps browser-side notes; an exported file always carries every comment inside it.
Offline and compliance-ready
The review layer fetches Mermaid and Chart.js rendering libraries from a public CDN - library code, never your data. Export Offline downloads each library the document actually needs, checks it against a hash recorded when the document was generated, inlines it, and strips every remote loader; the file it writes then opens with zero network - fit for air-gapped, sensitive, or regulated material. The export itself needs a connection, and those downloads send no referrer, so the CDN is never told which document you are exporting.
Two shareability modes
Same document, two ways to assemble it - pick based on whether it travels normally or must work with no network. The graph in each card shows where every part comes from.
Shareable
One self-contained file with the CSS, runtime, and comments inlined. Best when you want to share the document with a peer or keep it as a durable, long-term artifact - one click via Export as Shareable.
- Styles + runtime
- inlined
- Mermaid + charts
- CDN
- Comments
- seeded from HTMLthen browser storage
Offline
Everything Shareable does, plus the mermaid diagrams and charts are rendered and inlined as snapshots and every remote loader is stripped, so the file opens with zero network - archive it or read it on a plane. One click via Export Offline.
- Styles + runtime
- inlined
- Mermaid + charts
- inlined snapshots
- Comments
- seeded from HTMLthen browser storage
CDN marks the parts that load over the network. A Shareable report that uses mermaid diagrams or charts therefore needs an internet connection to render them - static images and the rest of the review layer still work with no network. Export Offline to inline those diagrams and charts as snapshots and drop the network dependency entirely.
Credits
The open-source projects this plugin builds on.
Deck engine: frontend-slides
The built-in commentable-decks capability is powered by a curated, hardened, vendored subset of the frontend-slides skill by Zara Zhang, used under the MIT License (© 2025 Zara Zhang). The upstream deploy and PDF-export scripts are excluded, and a CI gate keeps the vendored subtree pristine.
Changelog
Changes to Commentable HTML. See the full changelog on GitHub.
[1.854.0] - 2026-10-12
- Anchored AI discussions: questions do not request edits; explicit command replies use the entire conversation as context. Version-bound answers preserve history and reopen edited questions instead of pruning discussion ids.
review_threads.pyfor safe Copy-bundle imports, pending requests, persistent AI replies, and owner-supervised edit acknowledgements; guidance for consent-only, questions-only scheduled answering.- Needs owner handoff / AI reply on unresolved discussion questions. Copy and export are not AI read receipts; only an answer to the current request version clears it.
- Standalone discussions use the existing HTML, browser-local storage, and Copy/export workflow without shared-folder permissions, a server, or live collaboration setup.
- Copy discussion imports are snapshot-bound, reject stale/deleted/answered requests, and keep exact pending retries as no-ops. Owner replies update embedded review state atomically. Compact purpose controls and visual-viewport height caps keep discussion Save reachable when the keyboard opens.
- Restored approximately 5% headroom in the shareable-template size budget after retaining main's Mermaid flowchart recovery alongside AI discussions.
- Only the latest human edit command remains pending while independent unanswered questions stay actionable. Markdown exports distinguish pending and historical discussion messages and label AI responses as context rather than requests.
- The AI-discussion showcase wraps long card headings so wider fallback fonts cannot expand the printed slide's grid or clip its content.
- Discussion imports reject duplicate incoming ids and ids colliding with unrelated comments or threads before writing document state.
[1.853.2] - 2026-10-23
- Recover flowcharts whose normal-sized nodes are stranded far from their edge endpoints, making the diagram appear tiny across an oversized canvas. The existing SVG-text rerender now detects this malformed geometry on load, reveal, and layout changes, including offline exports, without compacting intentionally sparse connected diagrams.
Show 5 older releases
[1.853.1] - 2026-10-05
- Moved each comment card's Copy button immediately after edit in the action row, with the same bordered styling and mobile touch target. Select stays in the metadata row.
[1.853.0] - 2026-09-27
- Updated Mermaid to 12.0.0 while preserving complete gallery diagrams, deterministic render readiness, authored multi-line labels, and rollback of degraded repair renders.
[1.852.0] - 2026-09-27
- The collapsed toolbar's three-dots menu now exposes the same auto-open, per-document override, and UTC timestamp preferences as the sidebar More menu, with both surfaces kept in sync.
[1.851.0] - 2026-09-26
- Every sidebar comment now has a
Copybutton besideSelect, so one comment thread can be handed back immediately without changing the current selection or usingCopy selected.
[1.850.2] - 2026-09-09
- Mermaid flowcharts no longer collapse into tiny, unreadable nodes when document-level HTML-label styles inflate both the drawing and its viewBox. The post-render audit now detects diagrams compressed below a legible layout scale and uses the existing bounded SVG-text repair without mistaking browser zoom or an ancestor transform for broken Mermaid geometry.
418 earlier releases in the full changelog on GitHub.