# flexlayout-dash — resizable panel layouts for Dash

> flexlayout-dash — IDE-style dockable, resizable and floatable window panels for Plotly Dash. Wraps FlexLayout-React with portal-based rendering, so drag-and-drop tabs, split panes, collapsible edge borders and pop-out windows all keep ordinary Dash callbacks working. By Pip Install Python.

> **IDE-style dockable, resizable, and floatable window panels for Plotly Dash.**

`flexlayout-dash` wraps [FlexLayout-React](https://github.com/caplin/FlexLayout) to give
your Dash apps drag-and-drop tabs, splittable panes, collapsible border sidebars, and
pop-out windows — with seamless Dash Mantine Components light/dark theming and full
callback support via portal-based rendering.

Drag a tab onto another panel, or onto an edge, and the dock rearranges. Nothing
re-mounts, so callbacks inside a panel keep running.


```python
# File: docs/home/example.py

"""Home-page demo: a three-panel dock with a collapsible left border.

Deliberately the shape a reader recognises from an editor — a sidebar, a main
area, and a console underneath — so the first thing on the page is the thing the
package does. Every panel is draggable; the left border collapses.
"""
import dash_mantine_components as dmc
from dash import html

import flexlayout_dash as dfl

model = {
    "global": {
        "tabEnableClose": False,
        "tabEnableFloat": True,
        # The border starts open so the sidebar is visible without a click.
        "borderAutoSelectTabWhenOpen": True,
    },
    "borders": [
        {
            "type": "border",
            "location": "left",
            "size": 200,
            "selected": 0,
            "children": [{"type": "tab", "name": "Explorer", "id": "home-explorer"}],
        }
    ],
    "layout": {
        "type": "row",
        "weight": 100,
        "children": [
            {
                "type": "column",
                "weight": 70,
                "children": [
                    {
                        "type": "tabset",
                        "weight": 65,
                        "children": [
                            {"type": "tab", "name": "app.py", "id": "home-editor"},
                            {"type": "tab", "name": "README.md", "id": "home-readme"},
                        ],
                    },
                    {
                        "type": "tabset",
                        "weight": 35,
                        "children": [
                            {"type": "tab", "name": "Console", "id": "home-console"}
                        ],
                    },
                ],
            },
            {
                "type": "tabset",
                "weight": 30,
                "children": [{"type": "tab", "name": "Preview", "id": "home-preview"}],
            },
        ],
    },
}


def _panel(*children):
    return dmc.Box(children, p="md", style={"height": "100%", "overflow": "auto"})


def _code(text):
    return dmc.Code(text, block=True, style={"fontSize": "0.8rem"})


component = dfl.DashFlexLayout(
    id="home-dock",
    model=model,
    useStateForModel=True,
    # The dock has no intrinsic height — this is required, and it goes on the
    # component itself, never on a wrapper.
    style={"height": "460px"},
    children=[
        dfl.Tab(
            id="home-explorer",
            children=_panel(
                dmc.Text("EXPLORER", size="xs", fw=700, c="dimmed", mb="xs"),
                dmc.Stack(
                    [
                        dmc.Text("📁 src", size="sm"),
                        dmc.Text("📄 app.py", size="sm", ml="md"),
                        dmc.Text("📄 README.md", size="sm", ml="md"),
                    ],
                    gap=4,
                ),
                dmc.Text(
                    "Collapse this sidebar with the border tab on the left edge.",
                    size="xs", c="dimmed", mt="md",
                ),
            ),
        ),
        dfl.Tab(
            id="home-editor",
            children=_panel(
                _code(
                    "import flexlayout_dash as dfl\n\n"
                    "dfl.DashFlexLayout(\n"
                    '    id="dock",\n'
                    "    model=model,\n"
                    '    style={"height": "600px"},\n'
                    "    children=[dfl.Tab(id=..., children=...)],\n"
                    ")"
                )
            ),
        ),
        dfl.Tab(
            id="home-readme",
            children=_panel(
                dmc.Text("Two tabs share this tabset.", size="sm"),
                dmc.Text(
                    "Drag either one onto another panel — or onto an edge — and the "
                    "dock re-splits around it.",
                    size="sm", c="dimmed", mt="xs",
                ),
            ),
        ),
        dfl.Tab(
            id="home-console",
            children=_panel(
                _code("$ pip install flexlayout-dash\nSuccessfully installed flexlayout-dash")
            ),
        ),
        dfl.Tab(
            id="home-preview",
            children=_panel(
                dmc.Text("Preview", fw=600, mb="xs"),
                dmc.Text(
                    "Each panel is an ordinary Dash subtree rendered through a React "
                    "portal, so callbacks inside it keep firing — even while the tab "
                    "is hidden behind another.",
                    size="sm",
                ),
                html.Div(
                    dmc.Badge("MIT · unlimited tabs", variant="light"),
                    style={"marginTop": "12px"},
                ),
            ),
        ),
    ],
)
```


---

## Install

```bash
pip install flexlayout-dash
```

```python
import flexlayout_dash as dfl
```

> The Python import name is `flexlayout_dash` (as of 1.1.0); the PyPI package is `flexlayout-dash`.

---

## Documentation

- **[Getting Started](/getting-started)** — your first dockable layout in a few lines.
- **[Component Reference](/reference)** — every prop on `DashFlexLayout` and `Tab`.
- **[Basic Layouts](/basic)** — rows, columns, nested splits, and multi-tab tabsets.
- **[Borders & Sidebars](/borders)** — collapsible left/right/bottom panels.
- **[Theming](/theming)** — automatic Mantine light/dark integration.
- **[Callbacks](/callbacks)** — reading layout state and driving content from callbacks.

---

## Why flexlayout-dash?

- **Dockable & draggable** — rearrange tabs between tabsets by dragging.
- **Resizable & floatable** — drag splitters; pop tabs out into floating windows.
- **Border sidebars** — VS Code-style collapsible panels on the edges.
- **Theme-aware** — follows `data-mantine-color-scheme` automatically.
- **Callback-friendly** — portal-based rendering keeps tab content mounted so your
  Dash callbacks keep working.
- **One build, no tiers** — no tab limit, no licence key, MIT licensed.


---

*Source: /*

## Other sizes of this document

- [/llms-small.txt](https://flexlayout.2plot.dev/llms-small.txt): compact briefing — start here if context is tight.
- [/llms-full.txt](https://flexlayout.2plot.dev/llms-full.txt): every page's prose in one document (9 pages).

## Access policy

- Terms: these documents are free to fetch. A free account unlocks any gated document.
- Identity: agents may present a key by appending `?key=<value>` to any document URL. Get one: https://2plot.ai
- Rate: prefer ONE `/llms-full.txt` fetch over N per-page fetches. On 429, honour `Retry-After` and back off exponentially.
- Coordination: start at https://2plot.dev/llms.txt — one index enumerates every site; do not rediscover the network by crawling it.
- Crawler policy (mirrors /robots.txt): allowed: GPTBot, ClaudeBot, CCBot, Google-Extended, FacebookBot, Omgili, ByteSpider, Amazonbot, Applebot-Extended, meta-externalagent, AI2Bot, Diffbot, Timpibot, ImagesiftBot, ChatGPT-User, Claude-User, Claude-SearchBot, PerplexityBot, OAI-SearchBot, Perplexity-User, Googlebot, Bingbot, Slurp, DuckDuckBot, GoogleOther, Google-InspectionTool, Storebot-Google, AdsBot-Google.
- Accounting: every document read is logged with the requesting vendor (verified against published IP ranges where the operator publishes them). See https://2plot.dev/llms.txt

## Pages

Every page in this application. Each has a Markdown version at the `llms.txt` URL beside it.

- [flexlayout-dash — resizable panel layouts for Dash](https://flexlayout.2plot.dev/): flexlayout-dash — IDE-style dockable, resizable and floatable window panels for Plotly Dash. Wraps FlexLayout-React with portal-based rendering, so drag-and-drop tabs, split panes, collapsible edge borders and pop-out windows all keep ordinary Dash callbacks working. By Pip Install Python.
  - Machine-readable: https://flexlayout.2plot.dev/llms.txt
- [API](https://flexlayout.2plot.dev/api): Component props reference for flexlayout_dash.
  - Machine-readable: https://flexlayout.2plot.dev/api/llms.txt
- [Basic Layouts](https://flexlayout.2plot.dev/basic): Rows, columns, nested splits, and multi-tab tabsets.
  - Machine-readable: https://flexlayout.2plot.dev/basic/llms.txt
- [Borders & Sidebars](https://flexlayout.2plot.dev/borders): Collapsible left, right, and bottom edge panels.
  - Machine-readable: https://flexlayout.2plot.dev/borders/llms.txt
- [Callbacks](https://flexlayout.2plot.dev/callbacks): Read layout state and drive content from Dash callbacks.
  - Machine-readable: https://flexlayout.2plot.dev/callbacks/llms.txt
- [Changelog](https://flexlayout.2plot.dev/changelog): Version history of flexlayout-dash, rendered from CHANGELOG.md.
  - Machine-readable: https://flexlayout.2plot.dev/changelog/llms.txt
- [Getting Started](https://flexlayout.2plot.dev/getting-started): Build your first dockable layout with flexlayout-dash.
  - Machine-readable: https://flexlayout.2plot.dev/getting-started/llms.txt
- [Component Reference](https://flexlayout.2plot.dev/reference): Every prop on DashFlexLayout and Tab, plus the model schema.
  - Machine-readable: https://flexlayout.2plot.dev/reference/llms.txt
- [Theming](https://flexlayout.2plot.dev/theming): Automatic Mantine light/dark integration.
  - Machine-readable: https://flexlayout.2plot.dev/theming/llms.txt

## About The 2plot network

Open-source Dash component libraries by Pip Install Python. Each component has its own documentation site and its own llms.txt; 2plot.dev indexes all of them, and 2plot.ai is the hub.

Network index: [https://2plot.dev](https://2plot.dev/llms.txt)

## Network

Other applications in this network. Same operator; each one serves its own `/llms.txt` in this format.

- [2plot.ai](https://2plot.ai): Network hub and account origin.
  - Machine-readable: https://2plot.ai/llms.txt
- [2plot.dev](https://2plot.dev): Package index for every open-source component in the network.
  - Machine-readable: https://2plot.dev/llms.txt
- [Documentation boilerplate](https://boilerplate.2plot.dev): The markdown-driven documentation template every satellite site is built from.
  - Machine-readable: https://boilerplate.2plot.dev/llms.txt
- [dash-leaflet2](https://leaflet.2plot.dev): Leaflet 2 maps as Dash components.
  - Machine-readable: https://leaflet.2plot.dev/llms.txt
- [dash-mui-scheduler](https://muischeduler.2plot.dev): MUI X Scheduler — calendars and event scheduling for Dash.
  - Machine-readable: https://muischeduler.2plot.dev/llms.txt
- [dash-mui-charts](https://muicharts.2plot.dev): MUI X charts, tree views and time pickers for Dash.
  - Machine-readable: https://muicharts.2plot.dev/llms.txt
- [dash-improve-my-llms](https://llms.2plot.dev): The AI/LLM and SEO package every site in this network is built on.
  - Machine-readable: https://llms.2plot.dev/llms.txt
- [dash-flows](https://flows.2plot.dev): Node-graph editors built on React Flow.
  - Machine-readable: https://flows.2plot.dev/llms.txt
- [dash-pannellum](https://pannellum.2plot.dev): 360° panorama and virtual-tour viewer.
  - Machine-readable: https://pannellum.2plot.dev/llms.txt
- [dash-emoji-mart](https://emojimart.2plot.dev): Emoji picker component.
  - Machine-readable: https://emojimart.2plot.dev/llms.txt
- [dash-email](https://email.2plot.dev): Email composition and delivery components.
  - Machine-readable: https://email.2plot.dev/llms.txt
- [dash-model-viewer](https://modelviewer.2plot.dev): 3D model viewer with AR support, built on Google's model-viewer.
  - Machine-readable: https://modelviewer.2plot.dev/llms.txt
- [dash-excalidraw](https://excalidraw.2plot.dev): Excalidraw virtual whiteboard and sketching canvas.
  - Machine-readable: https://excalidraw.2plot.dev/llms.txt

## Related projects

Projects by the same author on their own domains. Built on the same stack, but not part of the primary network.

- [Pirate's Bargain](https://piratesbargain.com): Deal aggregator built on the same Dash stack.
  - Machine-readable: https://piratesbargain.com/llms.txt
- [ai-agent.buzz](https://ai-agent.buzz): Agent tooling directory.
  - Machine-readable: https://ai-agent.buzz/llms.txt
- [2plot.media](https://2plot.media): Media and streaming, on the same Dash stack.
  - Machine-readable: https://2plot.media/llms.txt

## External references

Third-party documentation this project depends on or references. Not affiliated — listed so an agent can follow a dependency directly instead of searching for it.

- [Dash Mantine Components](https://www.dash-mantine-components.com): The UI component layer these docs are built with.
  - Machine-readable: https://www.dash-mantine-components.com/llms.txt
- [Plotly Dash documentation](https://dash.plotly.com): Upstream framework documentation.
  - Machine-readable: https://dash.plotly.com/llms.txt