Component Reference

Every prop on DashFlexLayout and Tab, plus the model schema.

DashFlexLayout

The main container. Pass a model (the layout tree) and a list of Tab children.

flexlayout_dash.DashFlexLayout props:

prop	type	description
`children`	a list of or a singular dash component, string or number; required	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 fo...
`id`	string; optional	Unique ID to identify this component in Dash callbacks.
`colorScheme`	a value equal to: 'light', 'dark'; optional	Current color scheme, automatically detected from Mantine theme If not specified, will try to auto-detect from HTML data-mantine-color-scheme.
`debugMode`	boolean; default False	Debug mode flag.
`font`	boolean \	number \	string \	dict \	list; optional	The tab font (overrides value in css). Example: font={{size:"12px", style:"italic"}}.
`headers`	dict with strings as keys and values of type a list of or a singular dash component, string or number; optional	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...
`loading_state`	dict; optional	Loading state. `loading_state` is a dict with keys: - is_loading (boolean; required) - component_name (string; required) - prop_name (string; required)
`model`	dict; required	Model layout. `model` is a dict with keys: - global (dict; optional) `global` is a dict with keys: - borderAutoSelectTabWhenClosed (boolean; optional): Value for BorderNode attribute autoSelectTabWhenClosed if not overridden whether to s...
`modelAction`	dict with strings as keys and values of type boolean \	number \	string \	dict \	list; optional	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 otherw...
`popoutURL`	string; default '/assets/popout.html'	URL of popout window relative to origin, defaults to popout.html.
`realtimeResize`	boolean; optional	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.
`supportsPopout`	boolean; optional	If left undefined will do simple check based on userAgent.
`useStateForModel`	boolean; default 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...

Tab

A content wrapper. Its id must match a tab id in the model.

flexlayout_dash.Tab props:

prop	type	description
`children`	a list of or a singular dash component, string or number; optional	Children to render within Tab.
`id`	string; required	Unique ID to identify this component in Dash callbacks.

Model schema

The model is FlexLayout's JSON. Its top-level keys are:

global — default behaviours applied to every tab/tabset, e.g.

tabEnableClose, tabEnableFloat, tabEnableRenderOnDemand, splitterSize, borderSize, tabSetEnableMaximize.

borders — optional collapsible edge panels; each has a

location of "left", "right", or "bottom" (see Borders & Sidebars).

layout — the panel tree built from nodes:
row / column — split containers (children laid out horizontally / vertically)
tabset — a group of tabs with a tab strip
tab — a single tab (name, id, and optional per-tab overrides)

model = {
    "global": {"tabEnableClose": False, "tabEnableFloat": True},
    "borders": [
        {"type": "border", "location": "left", "size": 220, "children": [
            {"type": "tab", "name": "Explorer", "id": "explorer"},
        ]},
    ],
    "layout": {
        "type": "row",
        "children": [
            {"type": "tabset", "weight": 50, "children": [
                {"type": "tab", "name": "Panel 1", "id": "panel-1"},
            ]},
            {"type": "tabset", "weight": 50, "children": [
                {"type": "tab", "name": "Panel 2", "id": "panel-2"},
            ]},
        ],
    },
}

Tip: set "tabEnableRenderOnDemand": False in global to keep every tab mounted —

important when tab content drives Dash callbacks.

Source: /reference

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:

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