Sizing & Layout

Auto-Resizing

By default, Dockview uses a ResizeObserver to automatically detect when the container element changes size and updates the layout accordingly. This requires no configuration.

If you need to manage sizing yourself, for example when embedding Dockview inside a container that doesn't produce ResizeObserver notifications, you can disable auto-resizing and call api.layout() manually.

// Disable the internal ResizeObserver
disableAutoResizing={true}

// Then manually drive layout updates:
api.layout(width, height);

You can read the current dimensions at any time via api.width and api.height.

Hiding Borders

By default, Dockview renders thin borders between groups in the grid. Set hideBorders to remove them:

Updating Options at Runtime

api.updateOptions() lets you change any option after the component has initialized. Only the provided keys are updated; others remain unchanged.

api.updateOptions({
    hideBorders: true,
    locked: false,
    theme: themeLight,
});