Skip to main content

API

The DockviewApi is the primary interface for controlling a Dockview instance: adding panels and groups, saving and restoring layouts, and subscribing to events.

constructor
activeGroup
Active group object.
activeGroup: undefined | DockviewGroupPanel
activePanel
Active panel object.
activePanel: undefined | IDockviewPanel
canRedo
Whether redo would do something.
canRedo: boolean
canUndo
Whether undo would do something. Reactive via onDidChangeHistory.
canUndo: boolean
groups
All group objects.
groups: DockviewGroupPanel[]
height
Height of the component.
height: number
id
The unique identifier for this instance. Used to manage scope of Drag'n'Drop events.
id: string
maximumHeight
Maximum height of the component.
maximumHeight: number
maximumWidth
Maximum width of the component.
maximumWidth: number
messages
The resolved accessibility message catalog (the app's messages overrides merged over the English defaults). Used by parts that surface localisable AT strings, e.g. the default tab's close-button label.
messages: DockviewMessages
minimumHeight
Minimum height of the component.
minimumHeight: number
minimumWidth
Minimum width of the component.
minimumWidth: number
onDidActiveGroupChange
Invoked when the active group changes. May be undefined if no group is active.
onDidActiveGroupChange: Event<undefined | DockviewGroupPanel>
onDidActivePanelChange
Invoked when the active panel changes. The event carries the active panel (may be undefined if no panel is active) and the DockviewOrigin ('user' vs 'api') of the change.
onDidActivePanelChange: Event<DockviewActivePanelChangeEvent>
onDidAddGroup
Invoked when a group is added. May be called multiple times when moving groups.
onDidAddGroup: Event<DockviewGroupPanel>
onDidAddPanel
Invoked when a panel is added. May be called multiple times when moving panels.
onDidAddPanel: Event<IDockviewPanel>
onDidAddPanelToTabGroup
Invoked when a panel is added to a tab group.
onDidAddPanelToTabGroup: Event<DockviewTabGroupPanelChangeEvent>
onDidAddPopoutGroup
Fires when a popout group successfully opens in its own window, carrying the live Window handle. Use it to route focus or attach per-document listeners. Enumerate the current popouts at any time with getPopouts().
onDidAddPopoutGroup: Event<PopoutGroup>
onDidChangeHistory
Fires whenever the undo/redo stacks change.
onDidChangeHistory: Event<LayoutHistoryChangeEvent>
onDidCreateTabGroup
Invoked when a tab group is created in any group.
onDidCreateTabGroup: Event<DockviewTabGroupChangeEvent>
onDidDestroyTabGroup
Invoked when a tab group is destroyed in any group.
onDidDestroyTabGroup: Event<DockviewTabGroupChangeEvent>
onDidDrop
Invoked when a Drag'n'Drop event occurs that the component was unable to handle. Exposed for custom Drag'n'Drop functionality.
onDidDrop: Event<DockviewDidDropEvent>
onDidLayoutChange
Invoked when any layout change occures, an aggregation of many events.
onDidLayoutChange: Event<void>
onDidLayoutFromJSON
Invoked after a layout is deserialzied using the fromJSON method.
onDidLayoutFromJSON: Event<void>
onDidMaximizedGroupChange
onDidMaximizedGroupChange: Event<DockviewMaximizedGroupChangeEvent>
onDidMovePanel
onDidMovePanel: Event<MovePanelEvent>
onDidMutateLayout
Fires after each top-level structural layout mutation. See onWillMutateLayout.
onDidMutateLayout: Event<DockviewLayoutMutationEvent>
onDidOpenPopoutWindowFail
onDidOpenPopoutWindowFail: Event<void>
onDidPanelPinnedChange
Fired when a panel is pinned or unpinned (PinnedTabs module). Carries the panel and its new isPinned state.
onDidPanelPinnedChange: Event<DockviewPanelPinnedChangeEvent>
onDidPopoutGroupPositionChange
onDidPopoutGroupPositionChange: Event<PopoutGroupChangePositionEvent>
onDidPopoutGroupSizeChange
onDidPopoutGroupSizeChange: Event<PopoutGroupChangeSizeEvent>
onDidRemoveGroup
Invoked when a group is removed. May be called multiple times when moving groups.
onDidRemoveGroup: Event<DockviewGroupPanel>
onDidRemovePanel
Invoked when a panel is removed. May be called multiple times when moving panels.
onDidRemovePanel: Event<IDockviewPanel>
onDidRemovePanelFromTabGroup
Invoked when a panel is removed from a tab group.
onDidRemovePanelFromTabGroup: Event<DockviewTabGroupPanelChangeEvent>
onDidRemovePopoutGroup
Fires when a popout group is removed, whether the user closed its window or it was docked back programmatically. Symmetric with onDidAddPopoutGroup; not fired during component disposal.
onDidRemovePopoutGroup: Event<PopoutGroup>
onDidSnapFloat
Fires when a dragged floating group commits an alignment snap on drop.
onDidSnapFloat: Event<SmartGuidesSnapEvent>
onDidSnapTogether
Fires when a dragged floating group docks/merges into another on drop.
onDidSnapTogether: Event<SmartGuidesSnapTogetherEvent>
onDidTabGroupChange
Invoked when a tab group's properties (label, color) change.
onDidTabGroupChange: Event<DockviewTabGroupChangeEvent>
onDidTabGroupCollapsedChange
Invoked when a tab group is collapsed or expanded.
onDidTabGroupCollapsedChange: Event<DockviewTabGroupChangeEvent>
onUnhandledDragOver
onUnhandledDragOver: Event<DockviewDndOverlayEvent>
onWillDragGroup
Invoked before a group is dragged. Calling event.nativeEvent.preventDefault() will prevent the group drag starting.
onWillDragGroup: Event<GroupDragEvent>
onWillDragPanel
Invoked before a panel is dragged. Calling event.nativeEvent.preventDefault() will prevent the panel drag starting.
onWillDragPanel: Event<TabDragEvent>
onWillDrop
Invoked when a Drag'n'Drop event occurs but before dockview handles it giving the user an opportunity to intecept and prevent the event from occuring using the standard preventDefault() syntax. Preventing certain events may causes unexpected behaviours, use carefully.
onWillDrop: Event<DockviewWillDropEvent>
onWillMutateLayout
Fires before each top-level structural layout mutation (add / remove / move / float / popout / maximize / load / clear). Compound operations (e.g. a drag) fire once. Pair with onDidMutateLayout to bracket a change, which is useful for undo/redo, autosave and dirty-tracking.
onWillMutateLayout: Event<DockviewLayoutMutationEvent>
onWillShowOverlay
Invoked before an overlay is shown indicating a drop target. Calling event.preventDefault() will prevent the overlay being shown and prevent the any subsequent drop event.
onWillShowOverlay: Event<DockviewWillShowOverlayLocationEvent>
panels
All panel objects.
panels: IDockviewPanel[]
popoutRestorationPromise
Resolves once any in-flight popout-window restoration completes. Popout windows re-open asynchronously, so after an undo / redo (or fromJSON) that re-opens a popout, await this to know the window is ready. Already-resolved when nothing is restoring.
popoutRestorationPromise: Promise<void>
size
Total number of groups.
size: number
smartGuidesEnabled
Whether Smart Guides snapping is active (the smartGuides option is present + enabled and the module is registered). Reactive via setSmartGuidesEnabled.
smartGuidesEnabled: boolean
tabGroupColors
The active tab-group color palette. Reflects the configured tabGroupColors option, or the built-in defaults when unset. Useful for custom chip renderers that want to roll their own picker UI.
tabGroupColors: readonly DockviewTabGroupColorEntry[]
totalPanels
Total number of panels.
totalPanels: number
width
Width of the component.
width: number
activateNext
Activate the next panel or group, moving focus programmatically. Pass { includePanel: true } to step through the panels of the active group before advancing to the next group.
activateNext(options: MovementOptions): void
activatePrevious
Activate the previous panel or group, moving focus programmatically. Pass { includePanel: true } to step through the panels of the active group before advancing to the previous group.
activatePrevious(options: MovementOptions): void
addEdgeGroup
Add an edge group at the given position. Returns the group panel API for the newly created group. Throws if a group already exists there.
addEdgeGroup(position: EdgeGroupPosition, options: AddEdgeGroupOptions): DockviewGroupPanelApi
addFloatingGroup
Add a floating group
addFloatingGroup(item: DockviewGroupPanel | IDockviewPanel, options: FloatingGroupOptions): void
addGroup
Add a group and return the created object.
addGroup(options: AddGroupOptions): DockviewGroupPanel
addPanel
Add a panel and return the created object.
addPanel(options: AddPanelOptions<T>): IDockviewPanel
addPanelToTabGroup
addPanelToTabGroup(options: {
		groupId: string,
		index?: number,
		panelId: string,
		tabGroupId: string
	}): void
addPopoutGroup
Add a popout group in a new Window
addPopoutGroup(item: DockviewGroupPanel | IDockviewPanel, options: DockviewPopoutGroupOptions): Promise<boolean>
adjacentGroupInDirection
The nearest grid group in a spatial direction from group, comparing group centre points, e.g. the group visually to the left. Floating and popout groups are ignored. Returns undefined when there is no group in that direction. Pair with group.api.boundingBox to build your own spatial navigation.
adjacentGroupInDirection(group: IDockviewGroupPanel, direction: GroupNavigationDirection): undefined | IDockviewGroupPanel
autoHideEdgeGroup
Auto-hide (collapse to a strip) the edge group at position.
autoHideEdgeGroup(position: EdgeGroupPosition): void
clear
Reset the component back to an empty and default state.
clear(): void
clearHistory
Drop both undo and redo stacks (e.g. on document switch).
clearHistory(): void
closeAllGroups
Close all groups and panels.
closeAllGroups(): void
createTabGroup
createTabGroup(options: {
		color?: string,
		componentParams?: Record<string,unknown>,
		groupId: string,
		label?: string
	}): ITabGroup
dispose
Release resources and teardown component. Do not call when using framework versions of dockview.
dispose(): void
dissolveTabGroup
dissolveTabGroup(options: {
		groupId: string,
		tabGroupId: string
	}): void
exitMaximizedGroup
exitMaximizedGroup(): void
focus
Focus the component. Will try to focus an active panel if one exists.
focus(): void
fromJSON
Create a component from a serialized object.
fromJSON(data: SerializedDockview, options: {
		reuseExistingPanels: boolean
	}): void
getEdgeGroup
Get the group panel API for an edge group at the given position. Returns undefined if no edge group is configured at that position.
getEdgeGroup(position: EdgeGroupPosition): undefined | DockviewGroupPanelApi
getGroup
Get a group object given a string id. May return undefined.
getGroup(id: string): undefined | IDockviewGroupPanel
getPanel
Get a panel object given a string id. May return undefined.
getPanel(id: string): undefined | IDockviewPanel
getPopouts
Enumerate the popout groups currently open in their own windows.
getPopouts(): PopoutGroup[]
getTabGroupForPanel
getTabGroupForPanel(options: {
		groupId: string,
		panelId: string
	}): undefined | ITabGroup
getTabGroups
getTabGroups(options: DockviewGetTabGroupsOptions): readonly ITabGroup[]
hasMaximizedGroup
hasMaximizedGroup(): boolean
isEdgeGroupVisible
Check whether an edge group is currently visible.
isEdgeGroupVisible(position: EdgeGroupPosition): boolean
layout
Force resize the component to an exact width and height. Read about auto-resizing before using.
layout(width: number, height: number, force: boolean): void
maximizeGroup
maximizeGroup(panel: IDockviewPanel): void
moveTabGroup
moveTabGroup(options: {
		groupId: string,
		index: number,
		tabGroupId: string
	}): void
moveToNext
@deprecated
Use DockviewApi.activateNext instead. Renamed because this advances the active panel/group (focus), it does not relocate a panel. Removal planned for a future major release.
moveToNext(options: MovementOptions): void
moveToPrevious
@deprecated
Use DockviewApi.activatePrevious instead. Renamed because this advances the active panel/group (focus), it does not relocate a panel. Removal planned for a future major release.
moveToPrevious(options: MovementOptions): void
peekEdgeGroup
Peek (slide out as an overlay, without reflowing the grid) or close the collapsed edge group at position. No-op when the auto-hide module is absent or the group is not collapsed.
peekEdgeGroup(position: EdgeGroupPosition, peek: boolean): void
pinEdgeGroup
Pin (expand) the collapsed edge group at position. Requires the auto-hide edge groups module; no-op when it is absent.
pinEdgeGroup(position: EdgeGroupPosition): void
redo
Re-apply the next layout mutation undone via undo.
redo(): void
removeEdgeGroup
Remove an edge group and reclaim its slot in the layout. All panels inside the group are disposed. Throws if no group exists at position.
removeEdgeGroup(position: EdgeGroupPosition): void
removeGroup
Remove a group and any panels within the group.
removeGroup(group: IDockviewGroupPanel): void
removePanel
Remove a panel given the panel object.
removePanel(panel: IDockviewPanel): void
removePanelFromTabGroup
removePanelFromTabGroup(options: {
		groupId: string,
		panelId: string
	}): void
revealEdgeGroupWithData
Reveal (create-or-fill) the edge group at position and move the dragged item described by data into it. A newly created edge group tears down to zero footprint when later emptied. Drives the dock-to-edge groups behind the dockToEdgeGroups option; a no-op if edge groups are unavailable.
revealEdgeGroupWithData(position: EdgeGroupPosition, data: {
		groupId: string,
		panelId?: 'null' | string
	}, options: {
		autoHide?: boolean
	}): void
setEdgeGroupVisible
Set the visibility of an edge group.
setEdgeGroupVisible(position: EdgeGroupPosition, visible: boolean): void
setSmartGuidesEnabled
Toggle Smart Guides snapping at runtime (no-op when the module is absent).
setSmartGuidesEnabled(enabled: boolean): void
toJSON
Create a serialized object of the current component.
toJSON(): SerializedDockview
undo
Undo the previous recorded layout mutation. No-op when there is nothing to undo, when layoutHistory.enabled is not set, or when the LayoutHistory module is absent.
undo(): void
updateOptions
updateOptions(options: Partial<DockviewComponentOptions>): void
updateSmartGuidesOptions
Merge a partial Smart Guides option override in at runtime.
updateSmartGuidesOptions(options: Partial<SmartGuidesOptions>): void

See also​