Site Editor Interface

Audience: Site owners (end users)

The Site Builder's interface is designed to help you quickly assemble and customize your website while giving you real-time feedback on how it looks.

Desktop Interface

When accessing the site editor from a desktop browser, the interface is split into a few key areas:

1. Left Panel / Background (Preview Frame)

This is an interactive, live preview of your web page.

Visual Editing: You can click directly on text or images within the preview to edit them in place.
Interactivity: The preview behaves exactly like a real website. You can click links to navigate between pages.

2. Floating Builder Panel (Right Panel)

Your primary toolbox is the draggable Floating Builder Panel, usually positioned on the right side.

This panel houses all of your controls for managing Pages, Sections, Colors, and AI Generation.
You can drag the panel around the screen by clicking and holding its top header.
You can minimize the panel (or press M on your keyboard) to temporarily hide it and focus entirely on the full-screen preview.

3. Top Header Bar

A discreet top bar that provides high-level actions:

Home Icon: Returns you to the "My Sites" dashboard without losing your work (since auto-save runs constantly).
Preview Button: Opens the live version of your website in a new tab, exactly as your visitors will see it.

4. Floating Section Controls

When you click on a section within the preview window, a context menu (Floating Section Controls) pops up nearby. This provides rapid-access actions like Edit, Move, Duplicate, Transform, Lock, and Delete.

Mobile Interface

When managing your site from a mobile device or smaller tablet window, the interface automatically adapts to save screen space:

The Floating Builder Panel transforms into a standard slide-in navigation, tucking the controls cleanly out of the way.
When you select a section, instead of floating contextual controls, a Bottom Sheet smoothly slides up from the bottom of your screen to give you actionable options.

Publishing & Saving

Auto-Save: You don't need to explicitly save your work. Every change you make (adding sections, tweaking text, uploading an image) is automatically saved and instantly applied to the preview.
Deployment: For Web App sites, your changes affect the deployed site effectively immediately. For Static Sites, a build process runs quietly in the background; giving it a couple of minutes ensures maximum global performance and caching.
Previewing Changes: The Preview (Eye icon) button provides the ultimate reality-check of what a user will experience clicking around your domain.