Canvas (Center Panel)
The canvas is the live WYSIWYG preview of your app. Every change in the App Tree or Properties Editor reflects immediately — no refresh required.
What the Canvas Shows
The canvas renders the currently selected AppPage exactly as it will appear to users at runtime — including live data fetched from AIExtension.Service. The main differences between the canvas and the published runtime are:
- Builder overlays: selection handles, Pane borders (dashed), widget labels are shown in the canvas but not in the runtime
- Edit indicators: a pencil icon on widgets with unsaved changes
- State Inspector overlay (when enabled via Ctrl+I)
Device Size Switcher
At the top of the canvas, three device buttons let you preview the app at different breakpoints:
| Device | Viewport Width | Shortcut |
|---|---|---|
| Desktop | ≥1200px (default canvas width) | D |
| Tablet | 768–1199px (canvas resizes to 900px) | T |
| Mobile | <768px (canvas resizes to 375px) | M |
Switching device modes updates the canvas rendering using the breakpoint-specific layout configuration. Panes and widgets that are hidden at that breakpoint will show a "hidden" indicator rather than disappearing entirely — so you know they exist but won't render for that device.
Selecting Widgets on the Canvas
- Click any widget to select it — blue selection handles appear; properties show in the right panel
- Click the Pane border (dashed) to select the Pane
- Click the empty page background to select the AppPage
- Escape deselects the current element and moves selection up one level (widget → pane → page → app)
Canvas Zoom
The canvas supports zoom from 25% to 200%. Use the zoom controls in the toolbar or keyboard shortcuts:
- Ctrl++ — Zoom in
- Ctrl+– — Zoom out
- Ctrl+0 — Reset to 100%
- Ctrl+Shift+F — Fit page to canvas window
Canvas Interaction Modes
The canvas operates in two modes, toggled via the toolbar:
| Mode | Behavior | Default |
|---|---|---|
| Edit Mode | Clicking selects widgets for configuration. Widget interactions (button clicks, form submits) are disabled — they would navigate away or trigger actions. | Yes |
| Interact Mode | The canvas behaves like the live runtime — buttons fire actions, navigation works. Useful for testing interactions without opening Preview. | No |
The canvas fetches real data from AIExtension.Service using your current user's authentication context. If your DataGrid shows data in the canvas, that is the actual data from the service — not sample/mock data. If you need to test with specific data, use the State Inspector to seed variable values.
Pane Borders and Layout Guides
In Edit Mode, Pane boundaries are shown as dashed borders. When a Pane uses a grid layout, vertical column guides are overlaid to help you visualize the 12-column grid system. These guides are purely visual — they do not render in the published app.