From a paragraph to a live URL

You type one paragraph. Twenty seconds later there's a live preview with a hero, a pricing table, and a footer that already has your business name in it. It's easy to assume that's a template with the blanks filled in. It isn't — and the difference matters for what you can do next.

The model doesn't write HTML

Zitegen's AI doesn't generate markup. It generates a component tree — a JSON structure of nested nodes, each with a type, props, and per-breakpoint styles. That tree is validated against the same Zod schema that the visual editor writes to and the code editor reads from. If the model's output doesn't parse, you get a retry prompt instead of a broken site.

That distinction is why editing later doesn't fight the AI. The visual canvas, the style panel, and Monaco all point at the same tree. There's no "AI layer" sitting on top of a "real" site underneath it — the tree is the site.

The compiler does the rest

Once the tree exists, a separate Astro compiler walks it and emits real .astro files, with every element carrying a data-zitegen-id attribute that maps straight back to its node. That's what the Source tab shows you: not a stored file you can drift from, but the live compile of whatever's in the tree right now.

What that buys you

• Undo works at the tree level, so a bad AI generation doesn't leave orphaned files behind.
• The code editor can save changes straight back into the tree, because it's reading the same IDs the compiler just wrote.
• Nothing you build in code gets silently overwritten the next time you prompt the AI — it's editing the same source of truth, not regenerating from scratch.

The generation itself still feels instant. What's underneath it is closer to a compiler pipeline than a template picker — which is the part that makes the next few layers of editing possible instead of fighting each other.