Migrating to v7

v7 realigns the package names so that dockview is the framework-agnostic JavaScript package and each framework has a matching dockview-<framework> package. There are also a handful of breaking API changes that affect every consumer.

Package	v6	v7
dockview-core	JavaScript core (public)	JavaScript core (internal implementation detail)
dockview	React bindings	JavaScript (re-export of dockview-core), recommended
dockview-react	Re-export of dockview	React bindings
dockview-vue	Vue bindings	Vue bindings (now consume dockview)
dockview-angular	Angular bindings	Angular bindings (now consume dockview)

React users: action required

The React bindings moved from dockview to dockview-react. In v7 the dockview package is the JavaScript library (a re-export of dockview-core), so it no longer exports the React components.

The React names are simply gone; core names like DockviewComponent still resolve from dockview, but the React components do not:

• TypeScript: error TS2305: Module '"dockview"' has no exported member 'DockviewReact'
• Runtime (JS): React throws "Element type is invalid … got: undefined" when rendering <DockviewReact />, because the import resolves to undefined.

Install and import from dockview-react:

- npm install dockview
+ npm install dockview-react

- import { DockviewReact } from 'dockview';
+ import { DockviewReact } from 'dockview-react';

- @import 'dockview/dist/styles/dockview.css';
+ @import 'dockview-react/dist/styles/dockview.css';

A one-shot codemod for a source tree (uses perl for cross-platform in-place editing; works on macOS and Linux):

grep -rl "from 'dockview'" src | xargs perl -pi -e "s/from 'dockview'/from 'dockview-react'/g"

JavaScript users: recommended

dockview-core is now considered an internal implementation detail. Install the dockview package instead; it re-exports the entire core API.

- npm install dockview-core
+ npm install dockview

- import { DockviewComponent } from 'dockview-core';
+ import { DockviewComponent } from 'dockview';

- import 'dockview-core/dist/styles/dockview.css';
+ import 'dockview/dist/styles/dockview.css';

dockview-core continues to be published and will keep working, but new code should depend on dockview.

dockview-core no longer bundles every feature

In v6, dockview-core shipped with all built-in features registered. In v7 some built-in features are no longer part of bare dockview-core:

• tab group chips (chip rendering + the onDid*TabGroup events)
• context menus (the built-in tab / chip right-click menus)
• advanced drag-and-drop (onWillDragPanel / onWillDragGroup / onWillDrop hooks, custom drag ghost / drop overlay)
• keyboard accessibility (keyboard navigation / focus management / screen-reader announcements)

These now live in the dockview package, which enables them automatically. dockview-core is an internal package; use dockview (or a framework package: dockview-react / -vue / -angular, which all consume dockview). Nothing throws if you stay on bare dockview-core (the affected features simply do nothing) and a one-time console.warn steers you to dockview.

Removed and changed APIs

These affect every consumer regardless of framework.

rootOverlayModel removed

The rootOverlayModel option has been removed. It was a single static overlay model applied to the root drop target. Drop-overlay shaping is now driven by dropOverlayModel and dndEdges:

- new DockviewComponent(el, {
-     rootOverlayModel: { size: { value: 100, type: 'pixels' } },
- });
+ new DockviewComponent(el, {
+     dropOverlayModel: (params) => ({ size: { value: 100, type: 'pixels' } }),
+ });

dropOverlayModel shapes the overlay per drop target; return undefined to keep the default for that target. It does not dispatch the 'edge' target; if you used rootOverlayModel purely to size the outer edge overlay, use dndEdges instead.

onDidActivePanelChange payload changed

onDidActivePanelChange now emits an event object instead of the panel directly, so it can also report whether the change came from a user interaction or an API call.

- api.onDidActivePanelChange((panel) => {
-     console.log(panel?.id);
- });
+ api.onDidActivePanelChange((event) => {
+     console.log(event.panel?.id);
+     console.log(event.origin); // 'user' | 'api'
+ });

The event shape is:

interface DockviewActivePanelChangeEvent {
    readonly panel: IDockviewPanel | undefined;
    readonly origin: 'user' | 'api';
}

The handler argument is now an object, so panel.id / panel.api read as undefined (no error is thrown). Replace panel with event.panel.

The group-level group.api.onDidActivePanelChange is scoped to a single group; it keeps emitting the panel and additionally carries origin (its payload type is DockviewGroupActivePanelChangeEvent). This is additive; handlers reading event.panel keep working.

Renamed types and events

These are pure renames; the shape is unchanged, only the identifier moved.

v6	v7	Notes
onUnhandledDragOverEvent	onUnhandledDragOver	Event on the Dockview / Paneview API; dropped the redundant Event suffix
PaneviewDropEvent	PaneviewDidDropEvent	Now matches DockviewDidDropEvent
DockviewMaximizedGroupChanged	DockviewMaximizedGroupChangeEvent	Now matches every other …ChangeEvent payload type
DockviewGroupPanelFloatingChangeEvent	DockviewGroupPanelLocationChangeEvent	Payload of onDidLocationChange; name now reflects the event
AddComponentOptions	AddGridviewComponentOptions	Now matches AddSplitviewComponentOptions / AddPaneviewComponentOptions
Contraints	Constraints	Typo fix (this type also feeds AddPanelOptions)

- api.onUnhandledDragOverEvent((event) => event.accept());
+ api.onUnhandledDragOver((event) => event.accept());

Removed APIs

Removed	Use instead
IDockviewGroupPanelPublic	IDockviewGroupPanel (it was a dead alias of it)
DockviewComponent.contextMenuController	DockviewComponent.contextMenuService, or the documented context-menu options
DockviewAngularComponentOptions (Angular)	DockviewAngularOptions
AngularComponentFactory.createComponent() (Angular)	createDockviewComponent()

Vue / Angular users

No source changes required; keep installing dockview-vue / dockview-angular and importing from them. Internally these now depend on dockview rather than dockview-core; this is transparent to consumers.

CDN / UMD users

The React global moved from the dockview UMD bundle to the dockview-react bundle:

- https://cdn.jsdelivr.net/npm/dockview@7/dist/dockview.js
+ https://cdn.jsdelivr.net/npm/dockview-react@7/dist/dockview-react.js

The dockview UMD bundle now contains the JavaScript API only.

---

See What's new in v7 for the full list of new features in this release.