dockview

Zero dependency layout manager supporting tabs, groups, grids and splitviews

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
• Touch & mobile support
• Popout Windows
• Floating Groups
• Edge Groups
• Tab Groups
• Extensive API
• Supports Shadow DOMs
• High test coverage
• Documentation website with live examples
• Transparent builds and Code Analysis
• Security in mind - verified publishing and builds through GitHub Actions

Quick Start

dockview is the JavaScript package. Using a framework? Install the matching bindings instead: dockview-react, dockview-vue or dockview-angular.

Install from npm:

npm install dockview
Copy

Import the stylesheet:

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

Create a dockview instance and pass a theme:

import { DockviewComponent, themeDark } from 'dockview';

const element = document.getElementById('app');

const dockview = new DockviewComponent(element, {
    theme: themeDark,
    createComponent: (options) => {
        switch (options.name) {
            case 'my-component':
                return {
                    init: (params) => {
                        params.containerElement.textContent = 'Hello World';
                    },
                };
        }
    },
});

dockview.addPanel({
    id: 'panel_1',
    component: 'my-component',
});
Copy

See the documentation for full examples.

Want to verify our builds? Go here.