Hermes Canvas: plugin for Hermes Agent

Dashboard plugin that adds a live frontend editing studio to the Hermes Agent web dashboard

What Hermes Canvas does

The Canvas tab splits into two sides. On the left are project controls, a prompt box, agent activity, dev server logs and element selection details. On the right is a live iframe preview of your project. You can create a blank Vite, React and Tailwind project or open an existing one, including plain HTML, CSS and JavaScript served by Python's http.server. You then describe changes in natural language, and Hermes edits the files in an isolated git worktree.

A background thread polls the worktree every two seconds and syncs changes back to the main project, so the preview keeps updating, and changes are committed after each sync so later prompts start from the latest state. Selection mode lets you click an element in the preview and send its DOM context to Hermes for a precise edit. The backend is a set of FastAPI routes under the plugin, and the project is MIT licensed.

Key features

Canvas tab with prompt box, agent jobs panel and dev server logs
Live iframe preview of the running project
Create blank Vite, React and Tailwind projects or open existing ones
Static HTML projects supported through Python http.server
Selection mode that sends a clicked element's DOM context to Hermes
Isolated git worktree for each agent job

When to use it

Building a landing page by prompting Hermes and watching the preview change
Making a precise edit to one button or section by selecting it in the preview
Prototyping a static HTML page with no build step

Who it is for: Hermes Agent users who want to build or edit frontend projects through the web dashboard.

How it fits with Hermes Agent

Built for Hermes Agent as a dashboard plugin. It sends prompts to Hermes and needs Hermes Agent v0.10 or newer with dashboard support.

How to install Hermes Canvas

These commands are copied from the project's README. Check the repository for the latest steps before you run them.

git clone https://github.com/tonbistudio/hermes-canvas.git
cd hermes-canvas
bash install.sh

Requirements: Hermes Agent v0.10+ with dashboard support, Node.js 18+ and npm for Vite projects, Python 3.10+ for static HTML projects

FAQ

What is Hermes Canvas?

Hermes Canvas is a plugin that turns the Hermes Agent web dashboard into a frontend creation studio, with a prompt box on one side and a live preview of your project on the other.

Does Hermes Canvas work with Hermes Agent?

Yes. It is built as a Hermes dashboard plugin and requires Hermes Agent v0.10 or newer with dashboard support. After installing, restart the dashboard with hermes dashboard --no-open and open the Canvas tab.

How do I install Hermes Canvas?

Clone the repository, change into it and run bash install.sh to install it into the Hermes plugins directory. Then restart the dashboard and open http://127.0.0.1:9119.