Page Builder

Drag sections, edit on the canvas, set values per breakpoint and publish fast static HTML. AI generates single sections or whole pages, and everything it produces stays on-theme, responsive and fully editable.

• A drag-and-drop editor with 30+ components, inline text editing, undo and redo, autosave, and per-breakpoint values for every property.
• The canvas renders inside an iframe at the device width, so real media queries apply: what you see in the editor is what ships.
• AI that generates a section (3 variations with a live preview) or a whole page from a brief: it proposes 3 visual identities, builds an outline, then writes the sections in parallel.
• Publishing to static HTML from the same React views, plus a tiny script that includes only the interactive features a page uses: modals, carousels, multi-step forms, countdowns.
• Leads with UTM tracking, visit metrics, sitemap and robots, and a cookie banner that holds tracking pixels until consent.

1. 01The AI writes a typed spec, not HTML

   Models answer in a compact Zod-validated format that a compiler turns into editor nodes, using the same helpers as the hand-made templates. Output is always on-theme and editable, and old specs can be recompiled when the compiler improves.

2. 02A schema shaped by Structured Outputs

   OpenAI's strict mode requires every field, forbids recursion and limits nesting. I designed the spec around those rules: nullable instead of optional, anyOf instead of oneOf, three levels at most.

3. 03One style engine for the editor and the output

   The same function produces CSS for the canvas and for the published page, so they can't drift apart.

4. 04Static HTML instead of server rendering and hydration

   Published pages are plain HTML with a small per-feature script: fast to load and good for SEO.

5. 05Safe autosave across tabs

   Each save carries a version number. A conflict keeps a local draft and warns that another tab saved first.