<div align="center"> <h1>dockview</h1> <p>Zero dependency layout manager supporting tabs, groups, grids and splitviews. Supports React, Vue, Angular and Vanilla TypeScript</p> </div>

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.

Dockview

Install / Use

README