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

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 in mind - verified publishing and builds through GitHub Actions

Packages

| Package | Description | Version | | -------------------------------------------------------------------------- | ------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------- | | dockview | JavaScript, zero dependencies, full feature set out of the box | | | dockview-react | React bindings (peer: react 16.8–19) | | | dockview-vue | Vue 3 bindings (peer: vue ≥3.4) | | | dockview-angular | Angular bindings (peer: @angular/core ≥21.0.6) | | | dockview-enterprise | Enterprise features, drop-in superset of dockview (commercial licence) | |

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 (
    // Dockview fills its container, so the container needs a height of its own.
    <div style={{ height: '100dvh' }}>
      <DockviewReact
        theme={themeDark}
        onReady={onReady}
        components={components}
      />
    </div>
  );
}

For Vue and Angular examples see the documentation.

Development

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

Contributing

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

Licence

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.