App Studio
Canvas Breakpoint Switcher
The canvas breakpoint switcher lets you preview your app at any device size directly in the builder — no separate browser resize needed.
Using the Switcher
The device switcher is located at the top center of the canvas panel. It shows three buttons:
| Button | Shortcut | Canvas Width | What Renders |
|---|---|---|---|
| Desktop | D | Full width of canvas panel | Desktop layout — no overrides, all widgets visible unless hideAt desktop |
| Tablet | T | 900px (simulated) | Tablet breakpoint overrides applied; mobile-only widgets hidden |
| Mobile | M | 375px (simulated) | Mobile overrides applied; desktop/tablet-only widgets hidden |
What Changes When Switching
When you switch breakpoints in the canvas:
- The canvas resizes to the simulated viewport width
- All Pane layouts re-render using the appropriate breakpoint config
- Widgets with
hideAtfor the current breakpoint show the "hidden" overlay instead of their content - Widget sizing (colSpan, rowSpan) reflects the breakpoint-specific layout overrides
- The Properties Editor Layout tab highlights which properties have overrides at the current breakpoint
Editing at a Breakpoint
Breakpoint-specific config can be edited directly while viewing that breakpoint in the canvas:
- Switch to the target breakpoint (e.g., Mobile) using the switcher
- Select a widget in the canvas or App Tree
- In the Properties Editor Layout tab, the current breakpoint tab is pre-selected
- Edit the sizing or position — this creates a Mobile override for that widget
- The canvas immediately reflects the change at the Mobile breakpoint
- Switch back to Desktop — the Desktop layout is unchanged
Inheritance Context in the Properties Editor
When editing a Mobile override, properties that inherit from Desktop (or Tablet) show an "inherited" badge. Modified properties show the breakpoint indicator. Clear a breakpoint-specific override to restore inheritance from the parent breakpoint.