dockview
Zero dependency layout manager supporting tabs, groups, grids and splitviews. Supports React, Vue, Angular and Vanilla TypeScript
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 |
Core layout engine -- zero dependencies, vanilla TypeScript | |
dockview |
React bindings (peer: react >=16.8) |
|
dockview-vue |
Vue 3 bindings (peer: vue >=3.4) |
|
dockview-angular |
Angular bindings (peer: @angular/core >=21) |
|
dockview-react |
Re-export of dockview for migration convenience |
Installation
npm install dockview # React
npm install dockview-vue # Vue
npm install dockview-angular # Angular
npm install dockview-core # Vanilla TypeScript
npm install dockview-vue # Vue
npm install dockview-angular # Angular
npm install dockview-core # Vanilla TypeScript
Quick Start (React)
Hello {props.params.title}
,
};
function App() {
const onReady = (event) => {
event.api.addPanel({
id: 'panel_1',
component: 'default',
params: { title: 'World' },
});
};
return (
import 'dockview/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
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 or submit a pull request.
License
MIT -- see LICENSE for details.
Want to verify our builds? Go here.