Skip to main content
Version: 1.7.6

Introduction

dockview is a zero dependency layout manager that supports tab, grids and splitviews.

Features​

  • Themable and customizable
  • Support for the serialization and deserialization of layouts
  • Drag and drop support

Quick start​

dockview has a peer dependency on react >= 16.8.0 and react-dom >= 16.8.0. To install dockview you can run:

npm install dockview

You must also import the dockview stylesheet found under dockview/dict/styles/dockview.css, depending on your solution this might be:

@import './node_modules/dockview/dist/styles/dockview.css';

A dark and light theme are provided, one of these classes (or a custom theme) must be attached at any point above your components in the HTML tree. To cover the entire web page you might attach the class to the body component:

<body classname="dockview-theme-abyss">
    ...
</body>
<body classname="dockview-theme-light">
    ...
</body>

There are 4 components you may want to use:

Splitview

import {
    DockviewReact,
    DockviewReadyEvent,
    PanelCollection,
    IDockviewPanelProps,
    IDockviewPanelHeaderProps,
} from 'dockview';

const components: PanelCollection<IDockviewPanelProps> = {
    default: (props: IDockviewPanelProps<{ someProps: string }>) => {
        return <div>{props.params.someProps}</div>;
    },
};

const headers: PanelCollection<IDockviewPanelHeaderProps> = {
    customTab: (props: IDockviewPanelHeaderProps) => {
        return (
            <div>
                <span>{props.api.title}</span>
                <span onClick={() => props.api.close()}>{'[x]'}</span>
            </div>
        );
    },
};

const Component = () => {
    const onReady = (event: DockviewReadyEvent) => {
        event.api.addPanel({
            id: 'panel1',
            component: 'default',
            tabComponent: 'customTab', // optional custom header
            params: {
                someProps: 'Hello',
            },
        });
        event.api.addPanel({
            id: 'panel2',
            component: 'default',
            params: {
                someProps: 'World',
            },
            position: { referencePanel: 'panel1', direction: 'below' },
        });
    };

    return (
        <DockviewReact
            components={components}
            tabComponents={headers} // optional headers renderer
            onReady={onReady}
        />
    );
};