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

dockview-core is an internal package. Install dockview instead — the JavaScript JavaScript / TypeScript package that ships the full feature set out of the box. Using a framework? Install the bindings: dockview-react, dockview-vue or dockview-angular.

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 at mind - verified publishing and builds through GitHub Actions

Quick Start

Install from npm:

npm install dockview-core
Copy

Import the stylesheet:

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

Create a dockview instance:

import { DockviewComponent } from 'dockview-core';

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

const dockview = new DockviewComponent(element, {
    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

Apply a theme to a parent element:

<div id="app" class="dockview-theme-dark" style="height: 400px;"></div>
Copy

See the documentation for full examples.

Want to verify our builds? Go here.