mathuo/dockview
Dockview
Dockview is a UI framework for building complex, desktop-like interfaces featuring dockable layout components, interactive tab grouping, and a cross-platform panel system. It provides the tools necessary to create environments with draggable tabs, split-views, and customizable panel arrangements.
The system is distinguished by its multi-window layout manager, which allows panels to be detached into separate browser windows for multi-monitor setups. It further supports a state-persistent architecture that saves and restores the exact position and configuration of views across different user sessions.
The library covers a broad range of layout management capabilities, including the rendering of edge-pinned side panels, floating overlays, and grid-based organization. These interactions are supported across desktop and mobile devices through a unified pointer-event system that enables touch-enabled drag-and-drop functionality. Visual appearance is managed via a theme engine that utilizes CSS variables for customization.
Features
- Drag-and-Drop Layout Engines - Provides a comprehensive layout engine for creating draggable, resizable, and dockable split-view and grid arrangements.
- UI Layout Components - Provides a framework of layout components for building desktop-like interfaces with draggable tabs and split-views.
- Multi-Window Layout Managers - Manages the detaching of panels into separate browser windows for multi-monitor setups and floating overlays.
- Workspace State Persistence - Ensures workspace consistency between sessions by persisting the exact arrangement of tabs and panels.
- Detachable Browser Windows - Enables detaching view groups from the main application area into separate browser windows for multi-monitor layouts.
- Hybrid Layouts - Provides a flexible system for pinning panels to edges or floating them as overlays above the main interface.
- Dockable Panel Systems - Ships a comprehensive panel system supporting touch-enabled docking across desktop and mobile platforms.
- Docking Drag-and-Drop Systems - Provides the core interaction logic for moving panels between dock zones and floating states via pointer events.
- Layout Persistence - Saves and restores the precise arrangement of views and groups using a stored data format.
- Layout State Serialization - Converts complex visual arrangements of panels and tabs into serializable JSON for session restoration.
- Recursive Split-View Layouts - Implements a recursive rectangular grid system to manage complex docked panels and nested tab groups.
- Retained State UI Frameworks - Functions as a layout engine that maintains a persistent model of views and configurations across user sessions.
- Cross-Window State Synchronizations - Enables detaching view groups into separate browser windows while keeping state synchronized across the layout.
- Multi-Monitor Workspace Managers - Supports distributing a complex application across multiple physical screens by detaching panels into separate windows.
- IDE Layout Frameworks - Offers the structural components needed to build professional IDE-like environments with collapsible panels and tab groups.
- Tab Grouping - Provides tools for organizing views into collapsible, color-coded tab groups with drag-and-drop reordering.
- CSS Variable Theming - Implements a theme engine that maps design tokens to CSS custom properties for dynamic visual customization.
- Floating Overlays - Supports moving groups of panels into freely positioned floating overlays above the main workspace grid.
- Mobile Touch Handlers - Supports touch-enabled drag-and-drop functionality on mobile devices via a unified pointer-event system.
- Sliding Panels - Provides collapsible side panels docked to the layout edges for navigation and tooling access.
- Pointer Event Abstractions - Maps raw mouse and touch inputs to a unified event system for consistent cross-platform drag operations.
- Touch Layout Interactions - Enables touch-based drag-and-drop panel organization and window management for mobile and touch-screen devices.
