API reference

flexlayout_dash

DashFlexLayout

DashFlexLayout is a wrapper around FlexLayout-React that provides flexible docking windows for Dash applications. * Features:

Dockable, resizable, and floatable window panels
Drag-and-drop tab management
Seamless Mantine theme integration (light/dark mode)
Dash 2 and Dash 3 compatibility

prop	type	default	description
`id`	string		Unique ID to identify this component in Dash callbacks.
`children` *	node		List of children to be rendered. Children are allocated to their respective tab based on the ID of the element. WARNING: There is no validation done on whether the children here will be rendered in any tab. If there is no matching tab for a particular ID, that element will be silently ignored in rendering (although callbacks will still be applied).
`colorScheme`	one of 'light', 'dark'		Current color scheme, automatically detected from Mantine theme If not specified, will try to auto-detect from HTML data-mantine-color-scheme
`debugMode`	bool	false	Debug mode flag
`font`	any		The tab font (overrides value in css). Example: font={{size:"12px", style:"italic"}}
`headers`	objectOf		Map of headers to render for each tab. Uses the `onRenderTab` function to override the default headers, where a custom header mapping is supplied. Note: where possible, it is likely better to use classes to style the headers, rather than using this prop.
`model` *	dict		Model layout.
`modelAction`	objectOf		Imperative FlexLayout action applied to the LIVE model in place — works in both useStateForModel modes and never re-mounts sibling tabs (unlike replacing `model`, which is ignored when useStateForModel=true and re-mounts every tab otherwise). Shape: {type, nonce, ...args}. `nonce` must change for the action to fire (guard against re-renders re-applying it). Supported types: - addNode: {json, toNodeId, location?: 'top'\	'bottom'\	'left'\	'right'\	'center', index?, select?} If json.id already exists in the model, the tab is selected instead of re-added. - deleteTab: {tabNodeId} - selectTab: {tabNodeId} - renameTab: {tabNodeId, text} - updateNodeAttributes: {nodeId, attributes} - adjustWeights: {nodeId, weights}
`popoutURL`	string	'/assets/popout.html'	URL of popout window relative to origin, defaults to popout.html
`realtimeResize`	bool		Boolean value, defaults to false, resize tabs as splitters are dragged. Warning: this can cause resizing to become choppy when tabs are slow to draw
`style`	dict		CSS styles to apply to the root container element
`supportsPopout`	bool		If left undefined will do simple check based on userAgent
`useStateForModel`	bool	false	Flag that we should use internal state to manage the layout. If the layout is not being used by dash anywhere (for example, saving and re-hydrating the layout), it is more efficient to use the internal state (as this limits the number of round trips between JSON and the Model object). WARNING: If you set this, do not expect the dash property `model` to reflect the current state of the layout!

Tab

This is a simple component that holds content to be rendered within a Tab. Takes an ID that corresponds to a particular tab in the layout.

prop	type	default	description
`id` *	string		Unique ID to identify this component in Dash callbacks.
`children`	node		Children to render within Tab

Note for AI agents: This is the static, prerendered view of an interactive Dash application served because we detected a non-JS user agent. Full prose docs:

/api/llms.txt — LLM-friendly documentation
/sitemap.xml
/robots.txt