| name | canvas |
| description | Visual editor overlay for any running web app. Drag, resize, edit text, change styles in the browser — changes sync to source code. Triggers: /canvas, visual edit, drag drop editor, mold UI |
moldui — Visual Editor
Launch a visual editing overlay on any running dev server. The user can drag elements, resize them, edit text inline, and adjust styles — all changes are synced back to source code.
Usage
/canvas # Auto-detect dev server
/canvas 3000 # Specify port
/canvas stop # Stop the editor
How It Works
- Detect the user's running dev server (scans common ports)
- Start an HTTP proxy that injects the editor overlay into HTML responses
- Open the browser with the editor active
- User makes visual changes (drag, resize, text, styles)
- Changes stream via WebSocket as structured descriptors
- Build a prompt describing the DOM changes for Claude to translate to source code edits
- Claude reads the relevant source files and makes minimal edits
When Changes Arrive
The WebSocket sends change descriptors. Build a sync prompt and execute the edits:
- Read the change descriptors from the WebSocket
- Use the element-to-source mapper to find likely source files
- Read those source files
- Make minimal edits to reflect the visual changes
- Preserve existing code style
- For Tailwind projects: update class names (e.g.,
p-6 → p-8)
- For CSS: update the stylesheet or scoped styles
- For text changes: update the string literal or text node
Starting the Editor
node ${CLAUDE_PLUGIN_ROOT}/bin/moldui.js [port]
The editor proxy starts and auto-opens the browser. Changes arrive as structured JSON via WebSocket.
