Layout System Overview — App Studio

Three Breakpoints

App Studio uses three device size breakpoints, matching Tailwind CSS defaults:

Breakpoint	Viewport Width	Target Devices
Desktop	≥1200px	Desktop monitors, laptops, large tablets in landscape
Tablet	768px – 1199px	Tablets, small laptops, large phones in landscape
Mobile	<768px	Smartphones in portrait

Layout Inheritance

Desktop is the master layout. Tablet and Mobile inherit from it and only need to override what changes:

Desktop layout is always fully specified
Tablet inherits Desktop unless a Tablet override is provided
Mobile inherits Tablet (which may itself be inherited from Desktop) unless a Mobile override is provided

This means a simple app only needs to design for Desktop — it will work on Tablet and Mobile too (albeit with the same layout). More polished apps add Tablet and Mobile overrides where needed.

Two Layout Systems

Each Pane chooses one of two layout systems:

Grid Layout

A 12-column CSS grid. Widgets are placed using colStart, colSpan, rowStart, and rowSpan. Best for precise two-dimensional placement — dashboards, detail pages.

Flex Layout

A CSS flexbox row or column. Widgets flow in the specified direction with configurable gap and alignment. Best for toolbars, button groups, and single-axis layouts.

Widget Visibility Per Breakpoint

Widgets can be hidden at specific breakpoints without being deleted. A sidebar navigation widget visible on Desktop can be hidden on Mobile (where a bottom tab bar takes its place). See the Visibility Rules page for details.

Configuration at a Glance

// Pane layout configuration JSON
{
  "paneId": "main-content",
  "layout": {
    // Desktop layout (master)
    "type": "grid",
    "columns": 12,
    "gap": 20,
    "padding": 24
  },
  "layoutBreakpoints": {
    "tablet": {
      // Tablet override — fewer columns
      "columns": 8,
      "gap": 16
    },
    "mobile": {
      // Mobile override — single column, less padding
      "columns": 1,
      "gap": 12,
      "padding": 12
    }
  }
}

Next: Breakpoints →