dash-dock-view 1.0.0

Dynamic window dock layout for Dash

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

Property	Type	Default	Description
id	string	required	Unique panel identifier
title	string	id value	Display title in tab
position	string	'center'	'left', 'right', 'top', 'bottom', 'center'
size	number	auto	Initial size in pixels
visible	boolean	True	Whether panel is visible
active	boolean	False	Whether panel is active on load
collapsed	boolean	False	Start collapsed (click to expand)

Component Props

Prop	Type	Default	Description
panels	array	[]	Panel configurations
children	node	None	Dash components for panels
theme	string	'dockview-theme-light'	Theme class
height	string	'600px'	Container height
locked	boolean	False	Lock layout modifications
hideCloseButtons	boolean	False	Hide close buttons on tabs
showAddButton	boolean	True	Show add panel button
disableDnd	boolean	False	Disable drag-and-drop

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