Auto Layout API
Use the EditorCore Auto Layout methods when you need scripting, panel integration, or collaboration replay to share the same behavior.
The /docs/api/managers/auto-layout page includes an interactive direction/baseline/padding/size-mode demo, an existing-children toggle demo that switches one freeform frame into Auto Layout through API buttons or the real Shift + A shortcut, and a side-by-side wrap comparison demo. The wrap comparison keeps one horizontal frame at wrap = false and one at wrap = true with the same fixed width, shared add/remove and width controls keep both examples aligned while you compare layout changes, and a duplicate button exercises duplicateAutoLayoutChild() against the first item in both examples. Grid flow now also has a dedicated page at /docs/api/managers/auto-layout-grid with focused demos for track editing, item placement, and stack ↔ grid conversion.
Preferred Entry Points
enableAutoLayout()anddisableAutoLayout()turn a frame or group into a managed layout container. UsecomputeAutoLayoutSuggestionFromSelection()when you need inferred direction, spacing, and padding defaults explicitly. The right panel, context menu, andShift + Ashortcut already do that for you.setAutoLayoutDirection(),setAutoLayoutSpacing(),setAutoLayoutPadding(),setAutoLayoutAlignment(),setAutoLayoutWrap(), andsetAutoLayoutSizeMode()update container rules, including frameminSizeandmaxSizeconstraints throughsetAutoLayoutSizeMode().setAutoLayoutItemLayout(),setAutoLayoutItemAbsolute(),setAutoLayoutItemAbsoluteConstraints(),reorderAutoLayoutChild(), andduplicateAutoLayoutChild()update direct children. ItemminSizeandmaxSizeconstraints are part of the samesetAutoLayoutItemLayout()command path.getAutoLayoutPanelState()andapplyAutoLayoutPanelChange()use the same command path as the property panel.computeAutoLayoutSuggestionFromSelection()previews inferred direction, spacing, order, and bounds for the current selection. The same suggestion drives right-panel add, context-menu add, andShift + A.convertSelectionToAutoLayout()wraps the current multi-selection in a new Auto Layout frame using the same heuristics as the keyboard shortcut.setAutoLayoutFromSelection()is an alias for the same shared command path. The wrapper defaults to zero padding so the new frame stays tight to the original selection bounds unless code passes an explicit padding override.applyRemoteAutoLayoutChange()replays remote changes with last-write-wins behavior.
Supported Containers
- Frames
- Groups
Groups use the same rules as frames as long as direct children are linked through the group hierarchy.
History and Sync
- Container and item mutations record history.
setAutoLayoutPadding()uses the same normalization as the canvas padding handles, including non-negative clamping and fixed-axis limits so opposite sides cannot exceed the container width or height.- Canvas padding drags stream transient layout updates but collapse to one final history entry when the drag ends.
- Canvas resize handles are only available on axes whose container size mode is
fixed.hugandfillaxes remain layout-driven and cannot be resized directly from the canvas. relayoutAutoLayoutFrame()refreshes layout without creating a history entry.- Interaction resize on a
fixedaxis uses the same relayout path as API-driven size changes, so fill descendants update immediately. - Local broadcastable updates emit
autoLayout:changed. - Newer remote updates emit
autoLayout:collaboration-overwriteafter replay.
Restrictions
- Property-panel style updates on component instances only allow spacing and padding style overrides.
- Structural changes on instance containers are rejected through
applyAutoLayoutPanelChange().
See /docs/api/managers/auto-layout for the complete Auto Layout reference, and /docs/api/managers/auto-layout-grid for Grid-specific demos and API notes. The Grid conversion demo on that page uses the shared convertAutoLayoutFlow() command, so the grid result keeps the wrapped stack geometry instead of applying a separate docs-only track preset.