Builder layout and the top bar

From your dashboard, find your website card and click Edit. The builder opens in a full-screen view.

If you are opening a brand-new site for the first time, you land on the onboarding screen where you describe your business — the AI builds the first version from that. After onboarding, the builder is your permanent workspace.

The builder is split into three areas side by side:

Left panel — your control panel. Three tabs: Sections (section list), Templates (full site templates), and Edit (content editor for the selected section). You can drag the edge of this panel to make it wider or narrower — from 200 px up to 500 px. The width is remembered the next time you open the builder.

Center/right — Live preview — your website rendered in real time. Clicking any part of the preview selects that section. Changes from the Edit tab appear here instantly as you type.

AI drawer — slides in from the right over the preview. Contains the full AI Build & Edit chat and template picker. Opens when you click the floating Build & Edit button on the preview.

The left side of the top bar contains navigation and site tools:

← Back arrow — saves your draft automatically and returns you to the dashboard. Your work is never lost by clicking back.

Site name — the business name of the website you are editing.

Page dropdown — click the current page name (e.g. "Home") to open a dropdown showing all your pages. Click any page to save the current draft and switch to that page. Each page can have its own independent draft status — pages with unsaved changes show a small amber "draft" badge.

Add page — at the bottom of the page dropdown. Enter a name and EasyWebie creates the slug automatically and navigates you to the new page.

Media button (image icon) — opens the Media Library modal where you upload images, logos, and files to use in your site.

? (tour button) — a small circle with a question mark. Launches the guided builder tour — a series of tooltips that walk you through every part of the builder.

Undo / Redo arrows — undo up to 20 actions (Ctrl+Z). Redo with the right arrow (Ctrl+Y or Ctrl+Shift+Z). Grayed out when there is nothing to undo or redo. Shortcuts are disabled when your cursor is inside a text field.

Draft badge + Reset — appears when the current page has unsaved changes compared to the live site. The amber "Draft" badge is a reminder. Next to it: ↺ Reset — discards ALL draft changes on this page and reverts to the last published version. This cannot be undone.

Plan / Sonnet badge — shows your current plan and Sonnet AI usage. Free: just "Free". Basic: just "Basic". Starter: "X/10 Sonnet". Pro: "Pro · X/day Sonnet".

Save status — four possible states:

🛍️ Store — only visible on Starter and Pro plans. Links to your store product manager for this site.

Publish → — saves the current draft and opens the pre-publish flow (email verify → AI scan → Terms → deploy).

EasyWebie saves your work in two layers:

Draft (automatic) — every change you make is saved to a private "draft" version of your page after 1.5 seconds of no further changes. This draft is only visible to you in the builder — not to visitors on your live site.

Published (manual) — clicking Publish pushes your draft to the live site. Until you publish, visitors still see the previous version.

This means you can safely close the browser mid-edit and come back later — your draft is waiting exactly where you left off. The dashboard card shows an "Unpublished changes" warning to remind you.

Whenever you leave the builder — by clicking Back, switching pages, or going to Publish — EasyWebie automatically flushes any pending auto-save so nothing is lost.

If the save fails at that moment (e.g. you are offline), you will see a confirmation dialog asking whether to proceed with potentially stale content or stay to fix the connection. Choose Cancel to stay and retry.