dockview-core

dockview-core

Framework-agnostic core layout engine — zero dependencies, vanilla TypeScript. Supports 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
• 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

Install from npm:

npm install dockview-core

Import the stylesheet:

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

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',
});

Apply a theme to a parent element:

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

See the documentation for full examples.

Want to verify our builds? Go here.