Website ·
npm ·
Issues ·
Watch the demo
npx moldui
Zero config. Auto-detects your dev server. Opens the browser. Every visual change becomes a real commit in your real code.
The story
Every web dev has had this moment:
"This button needs 8 more pixels of padding."
Then you open your IDE, find the component, hunt the Tailwind class, tweak, save, switch tabs, squint, tweak again. Six steps for two pixels.
moldui kills that loop. Grab the button. Drag the corner. Done. Claude rewrites the source file, HMR reloads, you move on.
No plugin to install in your project. No framework lock-in. Works with Next.js, Vite, Vue, Svelte, Django, Rails, Laravel, Flask, plain HTML.
Install
# 1. Start your dev server (any framework)
npm run dev
# 2. In a second terminal
npx moldui
That's it. The browser opens with your app plus the editor overlay injected.
Prefer a global install?
npm i -g moldui
moldui
What it does
Spatial editing that actually feels like a design tool. Not another "properties panel" bolted onto a preview.
- Click to select. Shift-click for multi-select.
- Drag to reorder. Alt-drag to swap two elements (they literally exchange positions in your source).
- 8-handle resize. Arrow keys nudge 1px. Shift+Arrow for 10px.
- Double-click text to edit inline — works on buttons, spans, links, headings.
- Full style panel: layout, typography, colors (with eyedropper + recent colors), spacing, borders, shadows. One-click presets for 4/8/16/24px.
- Layers panel (press
L) — Figma-style DOM tree.
- Cmd+K palette — fuzzy search any element on the page.
- AI chat (
Cmd+/) — natural language edits ("make this more modern").
- Spacing guides — hover while selected, see exact pixel distances between elements.
- Lock elements — right-click → Lock, prevents accidental selection.
- Viewport frames (375/768/1024/1280) with device chrome, not just width resize.
- Zoom with
Cmd+Scroll like Figma canvas.
And the AI part. When you click Save:
- Changes get compressed — 20 resize drags on one card coalesce into one change (keeps original
from, latest to). Typical batch goes from 8KB to 1.5KB.
- A batch file is written to
.moldui/batch-{timestamp}.json
- moldui spawns
claude headless with --output-format stream-json
- Claude reads the batch, edits your actual source files
- You see live progress inside the browser overlay:
Reading page.tsx → Editing... → ✓ Applied, 2 files changed
- Auto-generated git commit message suggested in the terminal
No context switch. No "go run /slash-command in another window."
How it works
┌──────────────┐ WebSocket ┌──────────────┐ spawn('claude') ┌─────────────┐
│ Browser │ ──────────► │ moldui proxy │ ───────────────► │ Claude Code │
│ + overlay │ │ (Node.js) │ stream-json │ (edits your │
└──────────────┘ └──────────────┘ │ source) │
▲ │ └─────────────┘
│ ▼ │
│ .moldui/batch.json │
│ │
└──── live progress events ───────────────────────────────────┘
(Reading, Editing, Applied)
