Dockview Documentation

Dockview is a zero-dependency layout manager designed for building IDE-like interfaces in the browser. It supports the following core capabilities:

• Tabs & Groups: Organizes panels into groups with shared tab bars.
• Drag & Drop: Built-in support for rearranging panels and groups.
• Floating Panels: Allows detaching groups to position them freely over the layout.
• Popout Windows: Enables moving groups to separate browser windows.
• Serialization: Save and restore layouts using api.toJSON() and api.fromJSON().
• Zero Dependencies: The core library has no external runtime dependencies.

The Splitview component is a primitive resizable split container that serves as the underlying building block for Dockview. It can be used independently to create layouts with resizable panels.

Depending on your framework, you should refer to the specific props/options interfaces:

• React: ISplitviewReactProps
• Vue: ISplitviewVueProps
• Angular: SplitviewAngularOptions
• JavaScript: SplitviewComponentOptions

The dockview-enterprise package is proprietary, commercial software and is not open-source. It is governed by the Dockview Software Licence Agreement.

Key distinctions:

• Enterprise Features: Require a paid licence to access or use.
• Open-Source Portions: Other parts of Dockview are available under an MIT licence and are unaffected by this commercial agreement.
• Licence Scope: The licence is granted per Licensed Developer and is not limited by the number of applications, projects, environments, or deployments in which the Enterprise Features are used.

The DockviewApi is the central interface for controlling a Dockview instance. It provides the methods necessary to:

• Add panels and groups to the layout.
• Save and restore layouts (persistence).
• Subscribe to instance events.

Dockview organizes content using two primary primitives:

• Panels: The basic unit of content. Panels are not created directly; instead, you register a component by name and instantiate it via api.addPanel(). Each panel requires a unique id and the name of the registered component.
• Groups: Containers that hold one or more panels. Groups render a tab bar at the top. When a group contains multiple panels, they appear as tabs. Groups are created automatically when panels are added and can be manipulated via the Group API.

Dockview provides several native drag-and-drop capabilities for managing layout components:

• Tab Reordering: Position a tab between two existing tabs or at the end of a list of tabs.
• Group Merging: Merge one group into another group.
• Relative Positioning: Move both tabs and groups in relation to another group (using specific drop positions).
• Container Positioning: Move both tabs and groups in relation to the container edges (magnet drop positions).

The Gridview component provides a resizable grid layout that functions independently of the standard Dockview tabbed/drag-and-drop interface. It is implemented as a collection of nested _splitview_ controls.

Depending on your framework, you can use the following prop/option interfaces to configure the component:

• React: Use IGridviewReactProps.
• Vue: Use IGridviewVueProps.
• Angular: Use GridviewAngularOptions.
• JavaScript: Use GridviewComponentOptions.

Dockview offers two editions:

1. Dockview: A free, MIT-licensed, open-source version that provides the core features needed to build a complete docking layout.
2. Dockview Enterprise: A commercial version with a 30-day free trial. It includes enterprise-ready features such as advanced overflow (search/previews), multi-row tabs, pinned tabs, tab/chip context menus, DnD compass, smart guides, auto-hide/auto-edge groups, and layout history.