Live Editor

Interactive UI editor with real-time preview and drag-and-drop

Why Live Editor

Edit code and see it render instantly in an isolated iframe or shadow DOM. The editor and preview share one context, so they always stay in sync.

Build UIs visually — drag components onto the canvas and edit their properties from a side panel, all powered by @dnd-kit.

Canvas edits are applied through AST transforms and written back to clean, canonical source code — no lossy round-trips.