Auto-hide edge groupsEnterprise

Auto-hide turns a collapsed edge group into a Visual Studio-style pinnable tool window. Instead of a plain header strip, the collapsed group shows a strip of tab activators; clicking a tab peeks the panel open as an overlay that floats over your content without reflowing the grid. A pin button docks it permanently; closing hides it again.

For the basics of creating, sizing, collapsing, and serializing edge groups, see Edge Groups.

The autoHideEdgeGroups option sets the per-edge default, but auto-hide is also resolved per group: pass autoHide to addEdgeGroup, or call api.getEdgeGroup(position)?.setAutoHide(...) at runtime, to opt a single edge group in or out. This lets a static always-docked edge group and an auto-hiding one co-exist in the same layout.

Enable it with the autoHideEdgeGroups option: pass true for all four edges, or an object to enable specific edges:

To enable auto-hide on only some edges, name them individually; true/false (or an omitted edge) toggles each of top, bottom, left, right:

const api = createDockview(element, {
    // only edge groups on the left and bottom auto-hide
    autoHideEdgeGroups: { left: true, bottom: true },
    createComponent,
});

Auto-hide is off by default; leaving autoHideEdgeGroups unset (or false) keeps the plain collapse/expand behaviour, with no peek overlay.

The click-to-peek model

Auto-hide is entirely click-driven; there is no hover interaction. Once an edge group is auto-hidden (collapsed) it renders a strip of its tabs along the edge, and:

• Click a tab → that tab's panel peeks out as an overlay anchored to the strip's inner edge. The group stays logically collapsed, so the grid is not reflowed; the panel simply floats over your content. The overlay carries a title bar (the active panel's title on the left; a pin and a close button on the right).
• Click the same tab again, click anywhere outside the strip and peek, or press Escape → the peek hides. Clicking empty space inside the strip does nothing.
• Click a different tab while peeking → the peek switches to that panel and retitles.
• Pin → the group docks (expands) permanently. A docked group renders as a tool window: the title bar sits on top and the tab strip moves to the bottom. Pinning again auto-hides it back to the strip.
• Close → closes the active panel.

Peeking is a transient interaction and is never serialized: a layout saved during a peek restores as a collapsed (auto-hidden) group.

Peek animation

Peek behaviour is tuned globally with the edgeGroupPeek option (separate from the per-edge autoHideEdgeGroups set):

animate	Slide the peek overlay in. Default true; ignored when the OS requests reduced motion. animate?: boolean

const api = createDockview(element, {
    autoHideEdgeGroups: true,
    edgeGroupPeek: {
        animate: true,
    },
    createComponent,
});

• animate: slide the peek overlay in. Default true; ignored when the OS requests reduced motion.

API

Drive the peek/pin state programmatically:

autoHideEdgeGroup	Auto-hide (collapse to a strip) the edge group at position. autoHideEdgeGroup(position: EdgeGroupPosition): 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

// slide the collapsed left edge group out as a peek overlay (no grid reflow)
api.peekEdgeGroup('left', true);

// hide the peek again
api.peekEdgeGroup('left', false);

// pin (dock/expand) the left edge group permanently
api.pinEdgeGroup('left');

// auto-hide (collapse to a strip) the left edge group
api.autoHideEdgeGroup('left');

peekEdgeGroup, pinEdgeGroup and autoHideEdgeGroup all require the enterprise auto-hide edge groups feature; without it they log a missing-module note and do nothing. To collapse an edge group without the feature, use the group API's collapse() (see Edge Groups).

Observing the peek state

Each edge group's api exposes its peek state alongside the existing collapse state. isPeeking() is true while the slid-out overlay is shown (the group is still logically collapsed), and onDidPeekChange fires whenever that toggles:

onDidPeekChange	Fired when an edge group's auto-hide *peek* state changes (the slid-out overlay shown/hidden while the group stays logically collapsed). Never fires for non-edge groups or without the auto-hide module. readonly onDidPeekChange: Event<DockviewGroupPanelPeekChangeEvent>
isAutoHide	The resolved auto-hide state of this edge group: the per-group override if one is set, otherwise the global autoHideEdgeGroups option for this edge. Always returns false for non-edge groups. isAutoHide(): boolean
isPeeking	True while this edge group is peeking (auto-hide slid-out overlay). isPeeking(): boolean

const groupApi = api.getEdgeGroup('left');

const isPeeking = groupApi?.isPeeking(); // boolean

groupApi?.onDidPeekChange((event) => {
    console.log('peeking:', event.isPeeking);
});

// whether this group auto-hides at all: the per-group override set by
// `setAutoHide`, or the `autoHideEdgeGroups` option for this edge
const autoHides = groupApi?.isAutoHide(); // boolean

The peek overlay shares the same stacking context as floating and popout groups, so it layers correctly above them without any manual z-index handling. Auto-hide is only available for edge groups; it has no effect on grid, floating, or popout groups.

See also

• Edge groups: creating, sizing, collapsing, and serializing edge groups
• Group controls: render controls specific to edge groups via the location prop