https://github.com/mathuo/dockview

Zero dependency Docking Layout Manager. Supports Vanilla TypeScript, React and Vue.
https://github.com/mathuo/dockview

components dock docking docking-layout docking-library drag drag-and-drop drop javascript layout layout-manager panel react reactjs splitter splitview tabs typescript vue vuejs

Last synced: about 1 month ago
JSON representation

Zero dependency Docking Layout Manager. Supports Vanilla TypeScript, React and Vue.

• Host: GitHub
• URL: https://github.com/mathuo/dockview
• Owner: mathuo
• License: mit
• Created: 2020-06-24T20:40:51.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2025-05-01T17:05:04.000Z (about 1 year ago)
• Last Synced: 2025-05-06T11:43:57.117Z (about 1 year ago)
• Topics: components, dock, docking, docking-layout, docking-library, drag, drag-and-drop, drop, javascript, layout, layout-manager, panel, react, reactjs, splitter, splitview, tabs, typescript, vue, vuejs
• Language: TypeScript
• Homepage: https://dockview.dev
• Size: 176 MB
• Stars: 2,561
• Watchers: 16
• Forks: 100
• Open Issues: 76
• Metadata Files:
  • Readme: README.md
  • License: LICENSE
  • Security: SECURITY.md

Awesome Lists containing this project

• awesome-side-quests - mathuo/dockview - dependency docking layout with tabs, groups, grids, and split views — the VSCode layout pattern (Web Frontend / React & UI Libraries)
• awesome-github-repos - mathuo/dockview - Zero dependency docking layout manager supporting tabs, groups, grids and splitviews. Supports React, Vue, Angular, and vanilla TypeScript. (TypeScript)
• awesome - mathuo/dockview - Zero dependency docking layout manager supporting tabs, groups, grids and splitviews. Supports React, Vue, Angular, and vanilla TypeScript. (TypeScript)

README

          


dockview


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




---

[![npm version](https://badge.fury.io/js/dockview-core.svg)](https://www.npmjs.com/package/dockview-core)

[![npm](https://img.shields.io/npm/dm/dockview-core)](https://www.npmjs.com/package/dockview-core)

[![CI Build](https://github.com/mathuo/dockview/workflows/CI/badge.svg)](https://github.com/mathuo/dockview/actions?query=workflow%3ACI)

[![Coverage](https://sonarcloud.io/api/project_badges/measure?project=mathuo_dockview&metric=coverage)](https://sonarcloud.io/summary/overall?id=mathuo_dockview)

[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=mathuo_dockview&metric=alert_status)](https://sonarcloud.io/summary/overall?id=mathuo_dockview)

[![Bundle Phobia](https://badgen.net/bundlephobia/minzip/dockview-core)](https://bundlephobia.com/result?p=dockview-core)

##

![](packages/docs/static/img/splashscreenv2.png)

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`](https://www.npmjs.com/package/dockview-core) | Core layout engine — zero dependencies, vanilla TypeScript | [![npm version](https://badge.fury.io/js/dockview-core.svg)](https://www.npmjs.com/package/dockview-core) |

| [`dockview`](https://www.npmjs.com/package/dockview) | React bindings (peer: `react` ≥16.8) | [![npm version](https://badge.fury.io/js/dockview.svg)](https://www.npmjs.com/package/dockview) |

| [`dockview-vue`](https://www.npmjs.com/package/dockview-vue) | Vue 3 bindings (peer: `vue` ≥3.4) | [![npm version](https://badge.fury.io/js/dockview-vue.svg)](https://www.npmjs.com/package/dockview-vue) |

| [`dockview-angular`](https://www.npmjs.com/package/dockview-angular) | Angular bindings (peer: `@angular/core` ≥21) | [![npm version](https://badge.fury.io/js/dockview-angular.svg)](https://www.npmjs.com/package/dockview-angular) |

| [`dockview-react`](https://www.npmjs.com/package/dockview-react) | Re-export of `dockview` for migration convenience | [![npm version](https://badge.fury.io/js/dockview-react.svg)](https://www.npmjs.com/package/dockview-react) |

## Installation

```bash

npm install dockview          # React

npm install dockview-vue      # Vue

npm install dockview-angular  # Angular

npm install dockview-core     # Vanilla TypeScript

```

## Quick Start (React)

```tsx

import { DockviewReact } from 'dockview';

import 'dockview/dist/styles/dockview.css';

const components = {

    default: (props) => 
Hello {props.params.title}
,

};


function App() {

    const onReady = (event) => {

        event.api.addPanel({

            id: 'panel_1',

            component: 'default',

            params: { title: 'World' },

        });

    };

    return (

        

    );

}

```

For Vue and Angular examples see the [documentation](https://dockview.dev).

## Development

This project is an [NX](https://nx.dev) monorepo using [Yarn v1](https://classic.yarnpkg.com) workspaces.

```bash

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](https://github.com/mathuo/dockview/issues) or submit a pull request.

## License

MIT — see [LICENSE](./LICENSE) for details.

---

Want to verify our builds? Go [here](https://www.npmjs.com/package/dockview#user-content-provenance).