Migrating to v8
v8 is additive. Every new feature ships as an opt-in DockviewOptions field
that is off by default, so most projects upgrade with no code changes. There are
no package renames and no removed options. Two things are worth checking: a
behavioural change to the dimensions reported to panels, and a method rename that
keeps the old names as deprecated aliases (so nothing breaks today).
Behavioural change: reported panel dimensions
In v7, the size forwarded to a panel (and reported through
api.onDidDimensionsChange) was the full group box, including the tab
header. That over-reported the available content height by the header size. In
v8, panels receive the content area: the group box minus the header along
its axis (the header height for a top/bottom header, its width for a
left/right header; a hidden header measures zero, so nothing is subtracted).
api.onDidDimensionsChange((event) => {
- // v7: height included the tab header
+ // v8: height is the content area only (group box minus header)
canvas.height = event.height;
});
The default rendering path fills its container with CSS, so it never reads these numbers, the change is invisible. It only matters for renderers that size themselves from the reported dimensions, such as canvas, virtualised, or embedded content. If that's you, the numbers are now more correct (the header is no longer double-counted); adjust any code that compensated for the header.
Renamed methods: moveToNext / moveToPrevious
api.moveToNext and api.moveToPrevious are renamed to
api.activateNext / api.activatePrevious.
They advance the active panel/group (they move focus); they never relocate a
panel, and the old names misread as panel-moving, especially now that keyboard
docking offers a genuine "move panel" action.
- api.moveToNext({ includePanel: true });
+ api.activateNext({ includePanel: true });
- api.moveToPrevious({ includePanel: true });
+ api.activatePrevious({ includePanel: true });
The old names remain as deprecated aliases that delegate to the new ones, so existing code keeps working. Removal is planned for a future major release; rename at your convenience.
The group-model moveToNext / moveToPrevious (active-panel cycling within a
single group) are a different concept and are unchanged.
No other breaking changes
For clarity, none of the following changed in v8:
- No package renames. Keep installing and importing from the same packages
as v7 (
dockviewfor JavaScript,dockview-react/-vue/-angularfor frameworks). The v7 package realignment still applies if you are coming from v6. - No removed or renamed options. Every v7
DockviewOptionsfield keeps its name and meaning. - No removed public exports. The v8 surface only adds exports. The single
method rename above (
moveToNext/moveToPrevious) keeps the old names as deprecated aliases, so nothing is removed yet.
New opt-in options
All of v8's new capabilities are enabled through new DockviewOptions fields.
They are off by default; set the ones you want:
Most of the options below drive enterprise features, which live in the
dockview-enterprise package and need a licence key. On the free dockview
package those options are inert (the console logs a note naming the package to
install), so a v7 project that sets, say, pinnedTabs sees nothing happen until
it adds the package. See Enterprise setup to
install and apply a key, and Licensing for the full
free-versus-enterprise list.
| Option | Enables |
|---|---|
pinnedTabs | Pinned tabs |
overflow | Multi-row / wrapping tabs & overflow |
dndCompass | DnD compass |
dropPositionResolver | Custom drop-position resolution (free) |
smartGuides | Smart guides, floating-group snapping |
layoutHistory | Layout history (undo/redo) |
autoHideEdgeGroups | Auto-hide edge groups |
dockToEdgeGroups | Dock to edge groups, drag-revealed edges |
edgeGroupPeek | Peek animation tuning for auto-hide edge groups |
tabGroupColors, tabGroupAccent | Palette and accent for tab groups (free) |
getTabContextMenuItems, getTabGroupChipContextMenuItems | Context menus for tabs and chips |
autoHideEdgeGroups and dockToEdgeGroups accept an EdgeGroupSet: pass
true to enable all four edges, or an object such as { left: true, right: true }
to opt edges in individually.
The tab context menu also gains a 'pin' built-in item for toggling a panel's
pinned state; it is a no-op when pinning is not enabled.
See What's new in v8 for the full list of new features in this release.