MoldUI

Why it's ranked here

The architecture is framework-agnostic in a way that holds up in the code: it proxies plain HTML, so any stack that serves pages gets the overlay, and a lookup table of route conventions covers Next.js, Nuxt, SvelteKit, Angular, Vue, Django, Rails and Laravel. It is MIT licensed and ships as a single npx command. The verdict is mixed, though: the manifest in the default branch contains an unresolved merge conflict, and the local control socket accepts file operations without checking origin or path.

What's good

Edit batching is thoughtful. Repeated drags on one element collapse into a single change that keeps the original starting value and the latest end value, and changes that net to zero are dropped, so the model sees a short, clean instruction list. The source lookup ranks candidates sensibly: a matching element id first, then matching visible text, then the route file, then a distinctive class name, while common utility classes are skipped. The overlay lives inside a shadow root, so its styling cannot bleed into your page, and it blocks form submits while active.

Tradeoffs

The package manifest on the default branch contains leftover merge-conflict markers, which makes it invalid JSON, so installing from a clone will fail until that is fixed. The local socket server listens without an origin check, and its reject handler deletes whatever file path the message names, with no check that the path sits inside the batch folder. Auto-apply requires the Claude Code command line; other assistants only get instruction files to apply by hand. Source mapping is heuristic text search capped at ten hits, so pages built from generic markup may map to the wrong file.

How to use it well

Best for a solo developer polishing spacing, copy and ordering on an existing site where finding the right component is the slow part. Keep the default preview step on rather than auto-apply, and read the resulting diff before committing, as the author also advises. Run it only on a trusted machine and close it when finished, since the control socket is reachable by other local pages. Add stable ids to elements you edit often, because ids are the strongest mapping signal. It does not replace a design tool for building new layouts from scratch.

Observed

License

MIT

Language

JavaScript, ES modules, Node 20 or newer

Install surface

npx or global npm install; optional Claude Code plugin

Interfaces

CLI plus a browser overlay injected by a local HTTP proxy

AI dependency

Auto-apply shells out to the Claude Code CLI in headless mode

Manifest state

package.json on the default branch contains unresolved merge-conflict markers

Local socket

WebSocket server with no origin check; reject message deletes the named file path