Home
Softono
dockview

dockview

Open source MIT TypeScript
3.2K
Stars
159
Forks
109
Issues
15
Watchers
1 week
Last Commit

About dockview

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

Platforms

Web Self-hosted Windows

Languages

TypeScript

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

Package Description Version
dockview-core Core layout engine — zero dependencies, vanilla TypeScript 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

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.