App Tree (Left Panel)
The App Tree is your structural control center — a hierarchical view of the entire app, from the top-level App root down to individual Widgets inside Panes.
Tree Hierarchy
The App Tree displays the full structure of the app in a collapsible/expandable tree:
App (root)
├── AppPage: Leads
│ ├── Pane: header
│ │ ├── Widget: page-title (Text)
│ │ └── Widget: add-lead-btn (Button)
│ └── Pane: main
│ └── Widget: leads-grid (DataGrid)
├── AppPage: Lead Detail (/leads/:id)
│ ├── Pane: header
│ │ ├── Widget: lead-name (Text)
│ │ └── Widget: back-btn (Button)
│ └── Pane: detail-tabs (Tabs)
│ ├── Pane: info-tab
│ │ └── Widget: lead-form (Form)
│ └── Pane: activity-tab
│ └── Widget: activity-timeline (Timeline)
└── AppPage: Settings
└── Pane: main
└── Widget: settings-form (Form)
Navigation and Selection
- Click any node to select it — the canvas scrolls to show it; the Properties Editor shows its config
- Click the expand/collapse arrow to show/hide children
- Double-click any node to rename it inline
- The selected node is highlighted in both the tree and the canvas
Context Menu Actions
Right-click any node in the App Tree for context-specific actions:
| Node Type | Available Actions |
|---|---|
| App (root) | Add Page, App Settings, Publish, Export |
| AppPage | Add Pane, Rename, Duplicate, Set as Home, Delete |
| Pane | Add Widget, Rename, Duplicate, Set as Modal, Delete |
| Widget | Rename, Duplicate, Move to Pane, Delete, Open Custom JS |
Drag to Reorder
You can drag nodes within the App Tree to reorder or reparent them:
- Drag AppPage up/down: changes the order of pages (affects default navigation order)
- Drag Pane within its AppPage: changes rendering order on the page
- Drag Widget within its Pane: changes position in the grid; you can also drag to a different Pane
Dragging respects the hierarchy: a Widget can only be dragged to another Pane, not directly to an AppPage or the App root. Attempting an invalid drop will show a "not allowed" cursor and cancel the operation.
Search in App Tree
For large apps with many pages and widgets, use the search box at the top of the App Tree panel. Type any part of a widget ID or page name to filter the tree to matching nodes.
Tree Icons and Badges
| Icon / Badge | Meaning |
|---|---|
| Page icon | AppPage node |
| Grid icon | Pane with grid layout |
| Flex icon | Pane with flex layout |
| Modal badge | Pane configured as a modal overlay |
| Hidden | Widget has a visibleTo restriction |
| JS | Widget has Custom JS attached |
| Error | Widget has a configuration error (hover for details) |