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
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 (
// Dockview fills its container, so the container needs a height of its own.
<div style={{ height: '100dvh' }}>
<DockviewReact
theme={themeDark}
onReady={onReady}
components={components}
/>
</div>
);
}
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.
