Visibility Rules
Widgets and Panes can be shown or hidden per breakpoint — enabling completely different layouts at different screen sizes without duplicating content.
Breakpoint-Based Visibility
Every widget has a hideAt breakpoint setting (separate from role-based visibility). You can hide a widget at specific breakpoints:
// Widget placement — hide on mobile
{
"widgetId": "sidebar-nav",
"type": "Container",
"hideAt": ["mobile"] // hidden on mobile, visible on desktop and tablet
}
// Different widget — visible only on mobile (bottom nav bar)
{
"widgetId": "mobile-bottom-nav",
"type": "Container",
"hideAt": ["desktop", "tablet"] // hidden on desktop/tablet, only visible on mobile
}
Visibility vs. Non-Existent
There is an important distinction between a widget that is hidden at a breakpoint and a widget that simply does not exist at that breakpoint:
- Hidden at breakpoint: the widget exists in the DOM but has
display: none. The grid layout does not allocate space for it — other widgets fill the gap. - Not present: if you want a widget only on mobile, create it as a second widget with
hideAt: ["desktop", "tablet"]. Both the desktop version and mobile version exist in the app definition but only one renders at a time.
In the App Studio canvas, widgets hidden at the currently previewed breakpoint show a "hidden" overlay (grey dashed border, eye-slash icon) instead of being invisible. This lets you see they exist and configure them. They are fully invisible in the published runtime at that breakpoint.
Role-Based Visibility (Separate Concept)
Breakpoint visibility (layout-based) is separate from role-based visibility (permission-based). Both can apply simultaneously:
// Widget hidden at mobile AND restricted to admin role
{
"widgetId": "admin-action-buttons",
"hideAt": ["mobile"],
"visibleTo": ["admin", "manager"]
}
// This widget: only renders on desktop/tablet AND only for admin/manager users
Pane Visibility per Breakpoint
Entire Panes can also be hidden per breakpoint. This is useful when you have an entire "sidebar Pane" that should not render on mobile at all:
// Pane-level hideAt
{
"paneId": "left-sidebar",
"layout": { ... },
"hideAt": ["mobile"]
}