> ## Documentation Index
> Fetch the complete documentation index at: https://docs.ecomwize.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Tour the builder

> A quick look at every area of the builder and where to learn more.

The builder is where you design, edit and publish a page. Everything sits on one screen: a top bar, a left sidebar, the canvas in the middle and a right panel.

![The builder with the left sidebar, canvas and right panel](https://assets.ecomwize.io/docs/shots/builder.png)

## Top bar

* **Canvas** menu (the logo): search, jump to Home, All pages, Brand kits, Creative Studio, Cart drawer and Bundles, plus New page, Duplicate, Share, Page settings, History, Help and Shortcuts. It also shows your credits and the light or dark theme.
* **Invite and share** (the **+** next to your avatar): invite teammates and copy the page link. See [Sharing and comments](https://docs.ecomwize.io/team/sharing-and-comments.md).
* **Desktop view** and **Mobile view** toggle.
* Page selector in the center: a status dot (green for Published, grey for Draft), the page title and its section count. Use it to switch stores, workspaces and pages.
* **Brand kit** (palette icon), Page settings (sliders icon) and **View live page** (globe) once the page is live. See [Page settings](https://docs.ecomwize.io/publish/page-settings.md).
* Undo, Redo, Preview and **Publish** (it reads **Update** once the page is published). See [Publishing](https://docs.ecomwize.io/publish/publishing.md).

![The Canvas menu open in the top bar](https://assets.ecomwize.io/docs/shots/canvas-menu.png)

## Left sidebar

* **Agent**: chat with AI to add or edit sections, text, styles and images. See [The AI agent](https://docs.ecomwize.io/builder/ai-agent.md).
* **Sections**: browse and add ready-made sections. See [Sections and layers](https://docs.ecomwize.io/builder/sections-and-layers.md).
* **Layers**: reorder sections and pick elements from a tree.

![The Sections tab with section previews](https://assets.ecomwize.io/docs/shots/sections-panel.png)

## Canvas

Click any section or element to select it, and double-click text to edit it. See [Edit on the canvas](https://docs.ecomwize.io/builder/edit-on-canvas.md).

The bottom toolbar has **Select** (V), **Pan** (H or hold Space), **Comment** (C), zoom out, zoom in, the zoom percentage and fit to screen.

## Right panel

* **Style**: page background and element controls. See [Style panel](https://docs.ecomwize.io/builder/style-panel.md).
* **Media**: upload files and pick AI generated images. See [Media](https://docs.ecomwize.io/builder/media.md).
* **History**: save, preview and restore versions. See [History](https://docs.ecomwize.io/builder/history.md).

![The Style panel](https://assets.ecomwize.io/docs/shots/style-panel-crop.png)

> [!TIP]
>
> Press **Tab** to hide or show the panels, and **?** to see every shortcut. See [Keyboard shortcuts](https://docs.ecomwize.io/builder/keyboard-shortcuts.md).

## Related

> **[Create your first page](https://docs.ecomwize.io/getting-started/create-first-page.md)**

> **[The AI agent](https://docs.ecomwize.io/builder/ai-agent.md)**

> **[Edit on the canvas](https://docs.ecomwize.io/builder/edit-on-canvas.md)**

> **[Publishing](https://docs.ecomwize.io/publish/publishing.md)**


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.