Dash Dock View

A flexible, professional-grade docking layout system for Dash applications. Build complex, resizable, and rearrangeable panel layouts with ease.

Installation

pip install dash-dock-view

Features

• 4 Layout Components: DashDockLayout, DashGridLayout, DashSplitLayout, DashPaneLayout
• Drag & Drop: Drag tabs between groups to reorganize
• Panel Positioning: Place panels at left, right, top, bottom, or center
• Floating Panels: Popout windows support
• Layout Persistence: Save and restore layouts via JSON
• Theming: Light, dark, and Apple Liquid Glass themes
• Full Dash Integration: Render any Dash component inside panels

Quick Start

from dash import Dash, html
from dash_dock_view import DashDockLayout

app = Dash(__name__)

app.layout = html.Div([
    DashDockLayout(
        id="my-dock",
        panels=[
            {"id": "panel-1", "title": "Editor", "position": "center"},
            {"id": "panel-2", "title": "Console", "position": "bottom", "size": 200},
            {"id": "panel-3", "title": "Explorer", "position": "left", "size": 250},
        ],
        children=[
            html.Div(id="panel-1", children="Main content here"),
            html.Div(id="panel-2", children="Console output"),
            html.Div(id="panel-3", children="File explorer"),
        ],
        theme="dockview-theme-dark",
        height="600px",
    )
])

if __name__ == "__main__":
    app.run(debug=True)

Layout Components

DashDockLayout

Full-featured docking system with tabs, floating panels, and drag-and-drop.

DashGridLayout

Grid-based resizable panel system for structured layouts.

DashSplitLayout

Simple split panel layout with horizontal or vertical orientation.

DashPaneLayout

Collapsible accordion-style panes for organized content.

Themes

• dockview-theme-light - Classic light theme
• dockview-theme-dark - Classic dark theme
• dockview-theme-liquid-glass-light - Apple Liquid Glass (light)
• dockview-theme-liquid-glass-dark - Apple Liquid Glass (dark)

Panel Options

Component Props

Documentation

Run the demo app for full documentation:

python app.py

Visit http://localhost:8050 to see interactive examples.

Contributing

See CONTRIBUTING.md

License

MIT License - see LICENSE