Dockview

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.

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