# mathuo/dockview

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/mathuo-dockview).**

3,023 stars · 141 forks · TypeScript · mit

## Links

- GitHub: https://github.com/mathuo/dockview
- Homepage: https://dockview.dev
- awesome-repositories: https://awesome-repositories.com/repository/mathuo-dockview.md

## Topics

`angular` `dock` `docking` `docking-layout` `docking-library` `drag-and-drop` `floating-panels` `grid` `layout` `layout-manager` `panel` `popout-windows` `react` `splitview` `tabs` `typescript` `ui-components` `vue` `vuejs` `zero-dependency`

## Description

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.

## Tags

### User Interface & Experience

- [Drag-and-Drop Layout Engines](https://awesome-repositories.com/f/user-interface-experience/drag-and-drop-layout-engines.md) — Provides a comprehensive layout engine for creating draggable, resizable, and dockable split-view and grid arrangements.
- [Hybrid Layouts](https://awesome-repositories.com/f/user-interface-experience/collapsible-panels/hybrid-layouts.md) — Provides a flexible system for pinning panels to edges or floating them as overlays above the main interface. ([source](https://dockview.dev/llms.txt#dockview))
- [Dockable Panel Systems](https://awesome-repositories.com/f/user-interface-experience/dockable-panel-systems.md) — Ships a comprehensive panel system supporting touch-enabled docking across desktop and mobile platforms.
- [Docking Drag-and-Drop Systems](https://awesome-repositories.com/f/user-interface-experience/docking-drag-and-drop-systems.md) — Provides the core interaction logic for moving panels between dock zones and floating states via pointer events.
- [Layout Persistence](https://awesome-repositories.com/f/user-interface-experience/layout-persistence.md) — Saves and restores the precise arrangement of views and groups using a stored data format. ([source](https://dockview.dev/llms.txt#dockview))
- [Layout State Serialization](https://awesome-repositories.com/f/user-interface-experience/layout-state-serialization.md) — Converts complex visual arrangements of panels and tabs into serializable JSON for session restoration.
- [Recursive Split-View Layouts](https://awesome-repositories.com/f/user-interface-experience/recursive-split-view-layouts.md) — Implements a recursive rectangular grid system to manage complex docked panels and nested tab groups.
- [Retained State UI Frameworks](https://awesome-repositories.com/f/user-interface-experience/retained-state-ui-frameworks.md) — Functions as a layout engine that maintains a persistent model of views and configurations across user sessions.
- [CSS Variable Theming](https://awesome-repositories.com/f/user-interface-experience/css-variable-theming.md) — Implements a theme engine that maps design tokens to CSS custom properties for dynamic visual customization.
- [Floating Overlays](https://awesome-repositories.com/f/user-interface-experience/floating-overlays.md) — Supports moving groups of panels into freely positioned floating overlays above the main workspace grid. ([source](https://dockview.dev/))
- [Mobile Touch Handlers](https://awesome-repositories.com/f/user-interface-experience/input-handling/mobile-touch-handlers.md) — Supports touch-enabled drag-and-drop functionality on mobile devices via a unified pointer-event system. ([source](https://dockview.dev/))
- [Sliding Panels](https://awesome-repositories.com/f/user-interface-experience/layout-and-anchoring-systems/sliding-panels.md) — Provides collapsible side panels docked to the layout edges for navigation and tooling access. ([source](https://dockview.dev/))
- [Pointer Event Abstractions](https://awesome-repositories.com/f/user-interface-experience/pointer-event-abstractions.md) — Maps raw mouse and touch inputs to a unified event system for consistent cross-platform drag operations.
- [Touch Layout Interactions](https://awesome-repositories.com/f/user-interface-experience/touch-layout-interactions.md) — Enables touch-based drag-and-drop panel organization and window management for mobile and touch-screen devices.

### Part of an Awesome List

- [UI Layout Components](https://awesome-repositories.com/f/awesome-lists/devtools/ui-layout-components.md) — Provides a framework of layout components for building desktop-like interfaces with draggable tabs and split-views.

### Development Tools & Productivity

- [Multi-Window Layout Managers](https://awesome-repositories.com/f/development-tools-productivity/window-managers/multi-window-layout-managers.md) — Manages the detaching of panels into separate browser windows for multi-monitor setups and floating overlays.
- [Workspace State Persistence](https://awesome-repositories.com/f/development-tools-productivity/workspace-state-persistence.md) — Ensures workspace consistency between sessions by persisting the exact arrangement of tabs and panels.
- [IDE Layout Frameworks](https://awesome-repositories.com/f/development-tools-productivity/development-environment-management/development-environments/integrated-development-suites/customizable-development-environments/ide-layout-frameworks.md) — Offers the structural components needed to build professional IDE-like environments with collapsible panels and tab groups.
- [Tab Grouping](https://awesome-repositories.com/f/development-tools-productivity/window-managers/tabbed-window-organization/tab-grouping.md) — Provides tools for organizing views into collapsible, color-coded tab groups with drag-and-drop reordering.

### Operating Systems & Systems Programming

- [Detachable Browser Windows](https://awesome-repositories.com/f/operating-systems-systems-programming/display-windowing/tiling-window-managers/floating-window-management/editor-floating-windows/detachable-browser-windows.md) — Enables detaching view groups from the main application area into separate browser windows for multi-monitor layouts. ([source](https://cdn.jsdelivr.net/gh/mathuo/dockview@master/README.md))

### Web Development

- [Cross-Window State Synchronizations](https://awesome-repositories.com/f/web-development/cross-window-state-synchronizations.md) — Enables detaching view groups into separate browser windows while keeping state synchronized across the layout.

### Business & Productivity Software

- [Multi-Monitor Workspace Managers](https://awesome-repositories.com/f/business-productivity-software/desktop-workspace-organizers/macos-workspace-managers/multi-monitor-workspace-managers.md) — Supports distributing a complex application across multiple physical screens by detaching panels into separate windows.