Builder Overview
The Builder is where you design and build your app. It's a visual workspace with a live preview canvas in the center, panels on the left for adding elements and managing pages, and an edit panel on the right for styling whatever you've selected.
The Toolbar
The toolbar runs across the top of the builder. From left to right:
- Webtwizz logo click to open a menu with Go to Dashboard, File, Edit, Site Settings, Preferences (Light Mode, Dark Mode, System Settings), Help (Documentation, Keyboard Shortcuts), and Account Settings
- Code editor (
<>) opens the full code view - Device toggle switches between desktop, tablet, and mobile views
- Path bar shows the current page route (e.g.
/). Click to navigate to a different page. - Refresh reloads the canvas preview
- Undo / Redo arrows to reverse or repeat changes
- Preview (eye icon) opens a live preview of your app
- Publish button pushes your app live
The Left Sidebar
The left edge of the builder has a vertical strip of icons. Each one opens a different panel:
- Elements (plus icon) opens the elements panel with three tabs: Elements, Layouts, and Components
- AI Assistant (sparkle icon) opens the AI chat
- Layers shows the element hierarchy of the current page
- Pages shows your page tree and lets you add, rename, or delete pages
- Collections opens data and API connections
- Settings opens site-level settings
The Canvas
The center of the screen is your canvas, a live preview of your app. Click any element to select it and the edit panel opens on the right.
- Click any element to select it
- Double-click text to edit it inline
- Right-click an element to open the context menu (copy, paste, duplicate, delete, etc.)
- Drag elements to reorder them
The Edit Panel
When you select an element, the edit panel opens on the right side. If the panel is collapsed, press ⌘E / ⌃E or click the arrow on the right edge to expand it. This is where you control the element's styles, layout, spacing, typography, colors, borders, and more.
Essential Shortcuts
| Action | Shortcut |
|---|---|
| Select an element | Click on it |
| Edit text | Double-click |
| Open context menu | Right-click |
| Undo | ⌘Z / ⌃Z |
| Redo | ⌘⇧Z / ⌃⇧Z |
| Save | ⌘S / ⌃S |
| Delete element | ⌫ or ⌦ |
| Show/hide edit panel | ⌘E / ⌃E |
| Show/hide sidebar | ⌘B / ⌃B |
| Open AI assistant | ⌘K / ⌃K |