README.md

May 22, 2026 · View on GitHub

dockview

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


npm version npm CI Build Coverage Quality Gate Status Bundle Phobia

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
  • 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

Packages

PackageDescriptionVersion
dockview-coreCore layout engine — zero dependencies, vanilla TypeScriptnpm version
dockview-reactReact bindings (peer: react ≥16.8)npm version
dockview-vueVue 3 bindings (peer: vue ≥3.4)npm version
dockview-angularAngular bindings (peer: @angular/core ≥21)npm version

Installation

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

Quick Start (React)

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.

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-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.