DOMagic Binds AI Code Edits Directly to DOM Nodes in the Browser

AI coding assistants still struggle with spatial precision — they know what to change but not where. DOMagic gives them an exact DOM-to-source anchor, turning vague prompts into line-level edits that land in the right file without manual navigation.

Frontend work is full of small, friction-heavy loops: spot a visual bug, hunt down the source line, switch to the editor, make the change, reload. DOMagic collapses that loop by wiring the browser DOM directly to the filesystem through an AI edit engine. Click a button on the page, say "make this background yellow" or "swap these two columns," and the plugin reverse-locates the source, packages a structured context for the AI, and applies the resulting diff to the file.

The architecture is layered: a runtime layer injects source-location metadata into the DOM at build time, a dev-server middleware relays requests to a CLI agent, and an edit engine enforces a strict input/output protocol. The AI must return an EditPlan — a machine-readable list of file, line range, and replacement code — not freeform text. A syntax parser then verifies the patched source before the write is committed, with rollback on failure.

Plugins exist for Vite, Webpack, and Turbopack. The tool currently supports React and Vue, with Tailwind and CSS Modules, and can target nearly any style property. The team behind it is Haoqianyi's frontend group.