랭킹으로 돌아가기
Zero dependency docking layout manager supporting tabs, groups, grids and splitviews. Supports React, Vue, Angular, and vanilla TypeScript.
layout-managerdocking-librarydocking-layoutdockingdocktabslayoutreactdrag-and-droppanelsplitviewvue
주요 지표
스타 성장
스타
3.3k
포크
163
주간 성장
—
이슈
99
1k2k3k
2020년 11월2021년 10월2022년 9월2023년 9월2024년 8월2025년 8월2026년 7월
아티팩트npm
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.
관련 저장소