GitHub - mathuo/dockview: Zero dependency docking layout manager supporting tabs, groups, grids and splitviews. Supports React, Vue, Angular, and vanilla TypeScript.

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

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

Packages

Package	Description	Version
`dockview-core`	Core layout engine — zero dependencies, vanilla TypeScript
`dockview`	React bindings (peer: `react` ≥16.8)
`dockview-vue`	Vue 3 bindings (peer: `vue` ≥3.4)
`dockview-angular`	Angular bindings (peer: `@angular/core` ≥21)
`dockview-react`	Re-export of `dockview` for migration convenience

Installation

npm install dockview          # React
npm install dockview-vue      # Vue
npm install dockview-angular  # Angular
npm install dockview-core     # Vanilla TypeScript

Quick Start (React)

import { DockviewReact } from 'dockview';
import 'dockview/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.

Development

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-core → dockview → dockview-react
dockview-core → dockview-vue
dockview-core → dockview-angular

Contributing

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

License

MIT — see LICENSE for details.

Want to verify our builds? Go here.