mirror of
https://github.com/mathuo/dockview
synced 2026-08-17 04:14:21 +00:00
master
fix(docs): report analytics correctly once consent is given
docking engine for the web
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 in 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–19) |
|
dockview-vue |
Vue 3 bindings (peer: vue ≥3.4) |
|
dockview-angular |
Angular bindings (peer: @angular/core ≥21.0.6) |
|
dockview-enterprise |
Enterprise features, drop-in superset of dockview (commercial licence) |
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, themeDark } 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
theme={themeDark}
onReady={onReady}
components={components}
/>
);
}
For Vue and Angular examples see the documentation.
Development
This project is a monorepo using Yarn v1 workspaces.
yarn install # Install dependencies
yarn build # Build all packages
yarn test # Run tests
yarn lint # Lint all packages
yarn format # Format all packages
Contributing
Contributions are welcome! Please open an issue or submit a pull request.
Licence
This repository contains packages under more than one licence. Everything is MIT
except dockview-enterprise, which is proprietary and governed by a commercial
licence agreement.
See LICENCE.md for the breakdown. Each published package ships
its own LICENCE.md, which is the authoritative licence for that package.
Want to verify our builds? Go here.
Description
[MIRROR] Zero dependency Docking Layout Manager. Supports Vanilla TypeScript, React and Vue.
409 MiB
Languages
TypeScript
86.9%
MDX
5.5%
SCSS
3%
JavaScript
2.3%
HTML
1.7%
Other
0.6%
