Introducing Agentic HTML Visual Editor, a VS Code extension for reading and editing documents written by AI agents, and exchanging feedback through comments.
As I started handing more coding and documentation tasks to AI agents, I noticed a shift in my work: I was spending more time reading and reviewing what they wrote than writing it myself.
As I kept reviewing these documents, the effort of requesting changes began to bother me. Every time I wanted something changed in a research report or design note, I had to quote the relevant passage in chat and explain what I wanted. I wished I could leave that feedback right where I was reading.
That led me to build Agentic HTML Visual Editor, a VS Code extension that opens HTML files as editable documents. You can select text and add a comment. Comments and replies are saved inside the HTML file. With the accompanying Agent Skill installed, you can ask an AI agent to read that file, revise the document based on your feedback, and reply in the same thread.
In this design note, the agent attached a question about the review date to “team review,” and the human answered in the same thread. Reopening the file keeps that clarification beside the text it refers to.
Here is a concrete example of the work I wanted to avoid. Suppose you are reviewing a checkout design note and want to clarify the team review date. To request that in chat, you quote the passage mentioning the review and explain when it should happen.
Even when the request itself is short, this approach requires you to copy text out of the document and the agent to locate that text in the file. This becomes especially awkward in long documents or when similar explanations appear in several places.
Another problem was that the discussion became separated from the document. Feedback and decisions remained in the chat history, but unless they were incorporated into the text or recorded in the file, someone reading the document alone could not see what had been discussed.
An experience that suggested a better approach was leaving feedback directly on an implementation plan generated in Claude Code’s Plan mode. I wanted to use the same approach for everyday research reports and design notes.
To bring that approach to other documents, I chose HTML files. I was already asking agents to produce HTML because I wanted to use structures such as lists inside table cells that were awkward to express in Markdown. HTML lets me organize information with tables and diagrams in a form that suits the content.
Using HTML to make AI output easier to read is an established idea. Thariq Shihipar discusses it in “Using Claude Code: The unreasonable effectiveness of HTML”, and the accompanying example gallery includes implementation plans and research materials presented as HTML.
What I wanted to add was a way to edit those documents directly and keep feedback and replies in the same file. So I made it possible to select the displayed text and attach a comment. The selected text identifies exactly where the feedback applies, so you can focus your comment on what you want changed.
The agent can read your feedback beside the passage it applies to, even when similar wording appears elsewhere in the design note. You can also edit the text directly in the visual editor if you prefer to make the change yourself.
Once your intent is recorded in edits or comments, you can save the file and tell the agent, “I’ve made changes; please review them,” asking it to read the HTML file. Since the file contains both the location and the intent of the changes, the goal was to keep the chat request that short.
After leaving feedback, the next step is to have the agent make changes and review the result. From creating the document to checking the revisions, the workflow is:
When reviewing the result, you can read the agent’s reply in the same thread as your original comment. If you have more feedback, reply in that thread and ask the agent to read the file again.
Alongside the replies, I also wanted to see exactly what changed in the document, so I added support for insertion and deletion marks. When an agent marks its proposed changes, you can inspect them in the editor and accept or reject them.
The Agent Skill introduced earlier covers HTML authoring, comment replies, and change marks, so the agent can record its responses and proposed edits in a form you can review in the editor.
To keep document generation simple, the extension includes a stylesheet for headings, tables, and lists. The agent writes the HTML content, and the editor provides the styling. This stylesheet applies inside the extension; opening the saved file in a regular browser uses the browser’s default styling unless you supply your own CSS.
Install the extension from the Visual Studio Marketplace, open an HTML file, and choose “Open in WYSIWYG” to view it as an editable document.
Once the extension is installed, install the authoring skill for your AI agent:
npx skills add Ymmy833y/Agentic-HTML-Visual-Editor
The source code, README, and authoring skill are available in the GitHub repository.
If you work with an AI agent on research reports or design notes and find yourself repeatedly quoting passages in chat, I hope you’ll give this approach a try.