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 - a Markdown bundle plus a machine-readable id list - so it makes a single coordinated, coherent edit across all your notes instead of a one-at-a-time pass, then marks them handled.
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
Once the agent marks a comment handled, it is pruned on reload. The HTML file is the single source of truth, not the browser cache.
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
Your document and every comment stay on your machine. There is no server, no account, no sign-in, and no telemetry - the review layer runs entirely in your browser as a static file.
Your data stays local
Comments live in one of two places only: your browser's localStorage, scoped to that file, while you iterate, or embedded inside the HTML file itself once you Export. Your document text and your notes are never uploaded or transmitted.
Nothing is sent externally
Your content and comments are never sent to us or to any service. They travel only when you choose to - when you share the exported file, or paste the Copy all bundle to your agent yourself.
You own every copy
The HTML file is the single source of truth, not a cloud account. Keep it, archive it, or delete it and the data is gone - no residual copy lives anywhere else. Comments are keyed to a stable id baked into the document, so when it is served from one web origin, moving or renaming it there keeps your browser-side notes; and an exported file always carries every comment inside it, so a shared or archived copy never depends on any browser store.
Offline and compliance-ready
The only network use is fetching the 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. Those downloads are the last time a connection is needed, and they 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.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.
[1.850.1] - 2026-09-06
- Removed the legacy companion-file mode from the website, tutorial, in-document Help, public plugin guidance, and showcase deck. Existing companion-mode documents remain supported by the runtime, validator, migration tool, and technical compatibility references.
Show 5 older releases
[1.850.0] - 2026-09-04
- Two in-document
Contentslists that share an authoredid(invalid HTML, but it happens) no longer give both carets the samearia-controlstarget. Assistive technology resolvesaria-controlswithgetElementById, which answers with the first element carrying the id, so the second caret announced a region it did not control. Each nav whose authored id does not resolve to itself now gets a minted runtime id; the authored id still supplies the stored fold identity, so nothing a reader folded is orphaned. - A
Contentslist that carries significant text DIRECTLY (an intro sentence beside its list, or entries written as bare text) now folds all the way. The fold is a CSS rule over element children, which cannot reach a text node, so such a list stayed half-folded with the caret claiming it was away. Each such text run is wrapped in a span the same rule hides and print restores; the wrapper is notcm-skip, so no comment anchor moves. "Ignorable" is only the whitespace CSS itself collapses, so a run made of (which paints) folds away too, while ordinary source indentation still gains no wrapper. Deleting a comment anchored on that text re-establishes the wrap instead of dropping the run back into the nav bare, so the list stays fully foldable afterwards.
- The
Contentscaret is documented as a FLOW-DOCUMENT affordance. The runtime has always excluded decks (as it does the section-collapse carets and the side menu), but the spec row and the HelpNavigationtopic promised the caret unconditionally, so a deck slide carrying an authoredContentslist read as broken. Both now say a deck gets no in-document navigation chrome and leaves such a list as plain content, and tests lock both the exclusion and the Help wording. The spec row also records the deliberate trade-off in thearia-controlsfix above: on the invalid input where two elements share one id, the shadowed nav is re-identified, so an author rule keyed to that id stops matching it.
[1.849.1] - 2026-09-04
- Renamed the destructive
Clear selected commentsandClear all commentsactions toDelete selected commentsandDelete all commentsacross the menus, storage manager, Help, tutorial, and showcase deck.Clear selectionkeeps its name because it only deselects comments.
[1.848.0] - 2026-09-04
- The in-document
Contentslist is collapsible. Its title row gains a caret that folds the list away and unfolds it (clicking a folded title unfolds it too), so a long report's table of contents stops being a wall to scroll past on every visit. The choice is remembered per document in this browser, and it is reader state rather than document state: the caret is text-freecm-skipchrome that spends no character of the offset space comments are anchored in, folding only toggles a class (no node is removed, so every comment keeps its anchor), no export bakes the caret or the fold in, and a print or Save as PDF still carries the whole list. Jumping to a comment anchored on a Contents entry unfolds every folded list it sits in, so the jump is never a no-op.
[1.847.0] - 2026-09-03
- Select individual comments and hand back only those. Every card in the side pane now carries a
Selectcheckbox. With at least one comment picked,Copy allbecomesCopy selectedand copies only those threads (each root with its replies) - both the Markdown body and the machine-readableHANDLED_IDS_JSONarray - so the agent can never mark a comment you kept back as handled. The partial bundle declares itself with aScope: selected comments only (N of M open comment threads)line, names any tracked note, checklist, or widget-layout changes it is holding back on aWithheld:line, and leaves those change sections out, because a selection is a comment-only scope. - A selection bar above the list shows the live count and offers
Clear selection, which deselects everything without deleting anything, and theMoremenu grows aClear selected commentsitem (hidden until something is picked) that deletes only the selected threads after the same confirmation Clear all uses. While the comment search is filtering the list the bar and the confirmation both say how many of your picks are hidden, so nothing is deleted out of sight. With the panel collapsed, the floating toolbar's overflow menu carriesClear selectiontoo and the copy button's tooltip names the count, so a selection is never something you can act on but not inspect. The selection is per-session: it is never persisted, never travels inside an exported file, and it prunes itself when a selected comment is deleted.
- A comment card now ships ONE definition of "an action":
jump,editanddeletemoved onto the same row asReplyand share its bordered-pill look, instead of being small plain text buttons on the meta line above an accent pill below.deletesits at the row's end so the destructive action stays clear ofReply, and all four keep their >=44px phone touch targets. - The
dist/commentable-html.jsanddist/commentable-html.assets.jssize ceilings indev/tools/size-budget.jsonare raised to 677,000 and 865,000 bytes. Both sat at 99% of their previous ceiling before this release, leaving no room for the selection layer; the new values restore the documented ~5% headroom over the current build.
[1.846.0] - 2026-09-03
- Decks now use one direct comments button instead of the three-state comment-options menu. Clicking it opens the side panel immediately, and a live count bubble appears on the button when comments exist. The panel's existing Auto-open preference under More remains the way to keep the panel closed while comments are added.
- The side-panel brand icon now follows the document type and version metadata, keeping it away from the Comments count so the two no longer overlap at the demo deck's panel width.
412 earlier releases in the full changelog on GitHub.