The visual editor
for real codebases.
Drag, resize, edit text in your browser. Claude writes the code back to your source files. Works on the app you already have, in any framework.
Three steps, zero configuration.
Start your dev server
Any framework — Next.js, Vite, Vue, Svelte, Django, Rails, plain HTML. No plugin in your project.
Run moldui
Auto-detects the port, spins up a proxy on :4444, and injects the editor into your pages.
Edit, then apply
Drag, resize, edit text, swap elements. Click Apply — Claude writes the code back to your source.
Built for people who know their codebase.
Visual editing that respects your source. No lock-in, no magic. Just a proxy, a shadow DOM overlay, and Claude writing the diff.
Spatial editing
Click, drag, resize with 8-handle gizmo, double-click to edit text, shift-click for multi-select. Snap guides between elements. Arrow keys nudge 1px.
Auto-apply with Claude
Click Apply, Claude runs headless via stream-json. Live progress strip in the overlay shows exactly which files are being edited. No terminal context-switch.
Any framework, any language
Proxy-based injection. No plugin in your project. Tested on Next.js, Vite, Nuxt, SvelteKit, Django, Rails, Laravel, Flask, and static HTML.
Alt-drag to swap
Hold Alt while dragging to exchange two elements. Works across different containers. Claude handles the JSX or HTML reorder in source.
Forty-plus shortcuts
Cmd+K element search, L for layers, S for styles, ? for the cheatsheet. Cmd+Z undoes the DOM and the source edit together.
Open source, MIT
Vanilla JS in a shadow DOM. No telemetry, no login, no network beyond localhost. Fork it, ship your own flavor.
A different category from hosted builders.
* props = properties panel only · hosted = locked to their platform
Forty shortcuts. One cheatsheet.
Press ? while moldui is running to open the full reference over your app.
- Select elementClick
- Multi-selectShift+Click
- DeselectEsc
- Edit textDbl-click
- Move / reorderDrag
- Swap two elements⌥+Drag
- Nudge 1px←+↑+↓+→
- Nudge 10px⇧+←
- Style panelS
- Layers panelL
- Search elements⌘+K
- AI chat⌘+/
- All shortcuts?
- Undo⌘+Z
- Redo⌘+⇧+Z
- Save to source⌘+S
- Apply pending changes⌘+↵