Dockview
    Preparing search index...

    Dockview

    Dockview

    docking engine for the web

    Zero dependency layout manager supporting tabs, groups, grids and splitviews. Supports React, Vue, Angular and JavaScript

    npm version npm downloads CI Coverage Quality gate Bundle size


    A Dockview layout showing docked, tabbed and split panels in a trading workbench

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

    • 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
    • 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
    Package Description Version
    dockview JavaScript, zero dependencies, full feature set out of the box npm version
    dockview-react React bindings (peer: react 16.8–19) npm version
    dockview-vue Vue 3 bindings (peer: vue ≥3.4) npm version
    dockview-angular Angular bindings (peer: @angular/core ≥21.0.6) npm version
    dockview-enterprise Enterprise features, drop-in superset of dockview (commercial licence) npm version
    npm install dockview          # JavaScript
    npm install dockview-react # React
    npm install dockview-vue # Vue
    npm install dockview-angular # Angular
    import { DockviewReact, themeDark } from 'dockview-react';
    import 'dockview-react/dist/styles/dockview.css';

    const components = {
    default: (props) => <div>Hello {props.params.title}</div>,
    };

    function App() {
    const onReady = (event) => {
    event.api.addPanel({
    id: 'panel_1',
    component: 'default',
    params: { title: 'World' },
    });
    };

    return (
    <DockviewReact
    theme={themeDark}
    onReady={onReady}
    components={components}
    />
    );
    }

    For Vue and Angular examples see the documentation.

    This project is a monorepo using Yarn v1 workspaces.

    yarn install    # Install dependencies
    yarn build # Build all packages
    yarn test # Run tests
    yarn lint # Lint all packages
    yarn format # Format all packages

    Contributions are welcome! Please open an issue or submit a pull request.

    This repository contains packages under more than one licence. Everything is MIT except dockview-enterprise, which is proprietary and governed by a commercial licence agreement.

    See LICENCE.md for the breakdown. Each published package ships its own LICENCE.md, which is the authoritative licence for that package.


    Want to verify our builds? Go here.