Please see the website: https://dockview.dev

Features

• Serialization / deserialization with full layout management
• Support for split-views, grid-views and 'dockable' views
• Themeable and customizable
• Tab and Group docking / Drag n' Drop
• Popout Windows
• Floating Groups
• Extensive API
• Supports Shadow DOMs
• High test coverage
• Documentation website with live examples
• Transparent builds and Code Analysis
• Security at mind - verified publishing and builds through GitHub Actions

Quick Start

Dockview has a peer dependency on react >= 16.8.0 and react-dom >= 16.8.0. Install from npm:

npm install dockview

Import the stylesheet:

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

Apply a theme and render the component:

import { DockviewReact } from 'dockview';

const components = {
    myComponent: (props) => <div>Hello World</div>,
};

function App() {
    return (
        <div className="dockview-theme-dark" style={{ height: '400px' }}>
            <DockviewReact
                components={components}
                onReady={(event) => {
                    event.api.addPanel({
                        id: 'panel_1',
                        component: 'myComponent',
                    });
                }}
            />
        </div>
    );
}

See the documentation for full examples.

Want to verify our builds? Go here.