A dashboard plugin for Hermes Agent that turns the web dashboard into a live frontend creation studio.

Hermes Canvas adds a Canvas tab to the Hermes web dashboard. Inside the Canvas tab:

• Left side: Project controls, prompt box, agent activity, dev server logs, and element selection details
• Right side: Live iframe preview of your frontend project

You create or open a frontend project, start the dev server, and then instruct Hermes to edit the code using natural language. The preview updates as files change.

• Project management — Create new Vite + React + Tailwind projects from a blank template, or open existing projects
• Static HTML support — Open plain HTML/CSS/JS projects (no build step required; Python http.server is used)
• Live preview — Dev server runs locally and renders inside an iframe in the dashboard
• Agent editing — Send prompts to Hermes; it edits files in an isolated git worktree and syncs changes back to the project
• Selection mode — Click any element in the preview to capture its DOM context and send it back to Hermes for precise edits
• Dev server controls — Start, stop, refresh, and open the preview in a separate browser tab
• Agent jobs panel — Track running and completed editing jobs with logs

• Hermes Agent v0.10+ with dashboard support
• Node.js 18+ and npm (for Vite projects)
• Python 3.10+ (for static HTML projects)

# Clone the repository
git clone https://github.com/tonbistudio/hermes-canvas.git
cd hermes-canvas

# Install into Hermes plugins directory
bash install.sh

Then restart the dashboard:

hermes dashboard --no-open

Open the dashboard at http://127.0.0.1:9119 and click the Canvas tab.

1. Open the Canvas tab
2. Create a new project or open an existing one
3. Click Start to launch the dev server
4. Type a prompt like:

   "Build a dark landing page with a hero section, features grid, and pricing cards"

5. Click Send to Hermes
6. Watch the preview update as Hermes edits the files

1. hermes dashboard --no-open
2. Open Canvas
3. Create demo-ai-music-landing
4. Start dev server
5. Prompt: "Build a polished dark landing page for an AI music video generator. Neon gradients, hero section, pricing cards, CTA."
6. Prompt: "Make the hero more premium and add a founder testimonial section."
7. Enable Select Element, click the CTA button
8. Prompt: "Make this button more cinematic with a glow effect."
9. Admire the final result

hermes-canvas/
  install.sh               # One-command install script
  dashboard/
    manifest.json          # Plugin registration
    plugin_api.py          # FastAPI backend routes
    dist/
      index.js             # Frontend bundle (React IIFE)
      style.css            # Plugin styles
    templates/
      vite-react/          # Blank starter project template

• Git worktrees — Each agent job runs in an isolated git worktree to prevent corrupted project state
• Live sync — A background thread polls the worktree every 2 seconds and syncs file changes back to the main project so the live preview updates continuously
• Chained prompt safety — After syncing, changes are committed so subsequent worktrees start from the latest state (prevents later prompts from reverting earlier edits)
• Blank default template — New projects start minimal (white page, Hello World, basic Tailwind) rather than a branded landing page

• File tree and component tree sidebar
• Screenshot feedback loop with Hermes vision
• Before/after visual diff
• Support for Next.js, Astro, Svelte
• One-click deploy to static hosting

MIT — see LICENSE