Dockview
    Preparing search index...

    Dockview

    dockview

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


    npm version npm CI Build Coverage Quality Gate Status Bundle Phobia

    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 at 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) npm version
    dockview-vue Vue 3 bindings (peer: vue ≥3.4) npm version
    dockview-angular Angular bindings (peer: @angular/core ≥21) npm version
    npm install dockview          # JavaScript
    npm install dockview-react # React
    npm install dockview-vue # Vue
    npm install dockview-angular # Angular
    import { DockviewReact } 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
    className="dockview-theme-dark"
    onReady={onReady}
    components={components}
    />
    );
    }

    For Vue and Angular examples see the documentation.

    This project is an NX monorepo using Yarn v1 workspaces.

    yarn install    # Install dependencies
    yarn build # Build all packages
    yarn test # Run tests
    yarn lint # Run ESLint
    yarn format # Run Prettier

    Build order is managed automatically by NX:

    dockview-coredockviewdockview-react
    dockview-coredockviewdockview-vue
    dockview-coredockviewdockview-angular

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

    MIT — see LICENSE for details.


    Want to verify our builds? Go here.