Visual Builder Overview
The App Studio visual builder is a three-panel workspace for assembling, configuring, and previewing applications without writing code.
The Three-Panel Layout
Every session in the App Studio builder presents three panels working in concert:
Left Panel — App Tree
Hierarchical tree of the entire app structure: App root, AppPages, Panes, and Widgets. Drag to reorder. Right-click for context menu actions.
Center Panel — Canvas
Live WYSIWYG preview of the currently selected AppPage. All changes from the tree and properties editor reflect here in real time. Device size switcher (Desktop / Tablet / Mobile) at the top.
Right Panel — Properties Editor
Context-sensitive configuration panel. Shows widget properties when a widget is selected, page properties when a page is selected, and app-level settings when nothing is selected.
The Build Workflow
Structure — App Tree
Use the App Tree to define your app's structure: create AppPages for each major content area, add Panes to organize layout within each page, then add Widgets inside each Pane.
Configure — Properties Editor
Select any element in the tree or canvas to configure it in the Properties Editor. Set data sources, actions, visibility rules, and layout properties — all without writing code.
Preview — Canvas
Watch the canvas update live as you make changes. Switch between Desktop, Tablet, and Mobile views to check responsive behavior. The canvas shows real data from AIExtension.Service.
Publish
Click Publish in the toolbar to make the current version of the app available to users. Auto-save protects your work, but publishing is always a deliberate action.
Toolbar Actions
| Action | Keyboard Shortcut | Description |
|---|---|---|
| Save | Ctrl+S | Immediately save the current app state (also auto-saves every 30s) |
| Undo | Ctrl+Z | Undo the last change — up to 50 levels of history |
| Redo | Ctrl+Shift+Z | Re-apply an undone change |
| Preview | Ctrl+P | Open the app in a new tab running the runtime (with live data) |
| Publish | — | Make the current saved version live for app users |
| Zoom In / Out | Ctrl++ / Ctrl+– | Adjust canvas zoom level (25%–200%) |
| Device Switch | D / T / M | Switch canvas preview between Desktop / Tablet / Mobile |
| State Inspector | Ctrl+I | Open developer overlay showing resolved tokens and variable values |
Selection Model
The builder uses a unified selection model — clicking in the App Tree or directly on the canvas selects the same element:
- Click a widget in the canvas → selects it and shows its properties in the right panel
- Click empty canvas area → deselects widget, shows Pane properties
- Escape → deselects the current Pane, shows AppPage properties
- Click the App root in the tree → shows global app settings
The State Inspector and Audit Log are developer-mode features. They are available in the builder at any time but not visible in the published app runtime. Access the State Inspector via Ctrl+I or the toolbar menu.