Skip to main content

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 (dockview for JavaScript, dockview-react / -vue / -angular for frameworks). The v7 package realignment still applies if you are coming from v6.
  • No removed or renamed options. Every v7 DockviewOptions field 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.

OptionEnables
pinnedTabsPinned tabs
overflowMulti-row / wrapping tabs & overflow
dndCompassDnD compass
dropPositionResolverCustom drop-position resolution (free)
smartGuidesSmart guides, floating-group snapping
layoutHistoryLayout history (undo/redo)
autoHideEdgeGroupsAuto-hide edge groups
dockToEdgeGroupsDock to edge groups, drag-revealed edges
edgeGroupPeekPeek animation tuning for auto-hide edge groups
tabGroupColors, tabGroupAccentPalette and accent for tab groups (free)
getTabContextMenuItems, getTabGroupChipContextMenuItemsContext 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.