Using the studio

The studio lets you preview generated HTML in the browser. Use desktop view as the baseline to check section appearance, spacing, and typography.

Preview is a draft. Display may vary by browser or device, so verify on real devices after export.

Click elements in the preview to select them. Click again or double-click text to edit inline. Drag to reposition; use corner and edge handles to resize (hold Shift to lock aspect ratio).

Add rectangles, ellipses, text, and more to the selected block from the left toolbar. Reorder blocks with arrows in the section list.

In the right “Design” tab, adjust color, opacity, font weight, and more with sliders and buttons — changes reflect immediately. Set site-wide colors and fonts from “Theme” at the top of the same tab. Use the “Content” tab to replace images and update contact info. See “Shortcuts” in the menu for the full list.

For major structural changes, updating the brief and regenerating may be more efficient (regeneration resets manual edits).

⌘Z / Ctrl+Z to undo, ⌘⇧Z / Ctrl+Shift+Z to redo. ⌘S / Ctrl+S to save with a name. Pan the canvas with space + drag; zoom with ⌘ / Ctrl + scroll wheel.

Work is saved per project. Resume anytime from the dashboard — useful for team sharing and draft storage before review.