Visual Editor

A single live iframe renders your site with a self-hosted Tailwind engine — no external CDN, no build step to preview a change. Click any element to select it; the style panel on the right edits it directly.

Three widths: mobile (375px), tablet (834px), and desktop (full width, no fixed pixel cap). Styles cascade desktop-first — a mobile override only needs to state what's different, not repeat the whole rule.

The context menu on any selected element includes "Edit with AI" — a scoped chat prompt for just that element — and "Convert to Reusable Component," which turns it into a shared header, footer, or section you can reuse across pages.

Switch between Canvas, Source, and Code (the tree view) at any time — all three read from the same component tree, so a change in one shows up in the others immediately.

The panel on the left of the canvas mirrors your page's component tree — click a row to select that element, drag one row onto another to reorder or nest it, right-click for the same context menu as the canvas. A row that's more than a plain element gets a small colored badge: a Filterable Collection or WordPress-bound grid shows what it's bound to, a reusable component instance shows which shared component it is, and a form row shows its own name plus where its submissions currently go — e.g. "Contact Form · Zitegen Leads," or "Contact Form · Zitegen + WordPress" once WordPress sync is turned on — so a site with several forms doesn't leave you guessing which is which.

The Pages panel alongside the canvas is searchable by title or path, filterable to just drafts or just published (and to one locale on a multilingual site), and paginated at 25 per page. Whichever page is open in the canvas stays visible in the list, so switching pages from the canvas never leaves you looking at the wrong slice. Drag-to-reorder is turned off while a filter is active — reordering only makes sense against the full list — so clear the filters to change page order.