# API reference


**Site index:** [https://flexlayout.2plot.dev/llms.txt](https://flexlayout.2plot.dev/llms.txt) — every page on this site, as Markdown.  
**Network index:** [https://2plot.dev/llms.txt](https://2plot.dev/llms.txt) — The 2plot network; start here to discover sibling sites.  
**Sibling sites:** 13 more in The 2plot network — listed in the site index above.  
**Sitemap:** https://flexlayout.2plot.dev/sitemap.xml  

## 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 |