Retour au classement
Zero dependency docking layout manager supporting tabs, groups, grids and splitviews. Supports React, Vue, Angular, and vanilla TypeScript.
layout-managerdocking-librarydocking-layoutdockingdocktabslayoutreactdrag-and-droppanelsplitviewvue
Indicateurs clés
Croissance des étoiles
Étoiles
3.3k
Forks
163
Croissance hebdomadaire
—
Issues
99
1k2k3k
nov. 2020oct. 2021sept. 2022sept. 2023août 2024août 2025juil. 2026
Artefactsnpm
npm install dockviewREADME
dockview
Zero dependency layout manager supporting tabs, groups, grids and splitviews. Supports React, Vue, Angular and JavaScript

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 |
JavaScript — zero dependencies, full feature set out of the box | |
dockview-react |
React bindings (peer: react ≥16.8) |
|
dockview-vue |
Vue 3 bindings (peer: vue ≥3.4) |
|
dockview-angular |
Angular bindings (peer: @angular/core ≥21) |
Installation
npm install dockview # JavaScript
npm install dockview-react # React
npm install dockview-vue # Vue
npm install dockview-angular # Angular
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 → dockview-react
dockview-core → dockview → dockview-vue
dockview-core → dockview → 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.
Dépôts similaires