dockview-core
Framework-agnostic core layout engine — zero dependencies, vanilla TypeScript. Supports tabs, groups, grids and splitviews
---
[](https://www.npmjs.com/package/dockview-core)
[](https://www.npmjs.com/package/dockview-core)
[](https://github.com/mathuo/dockview/actions?query=workflow%3ACI)
[](https://sonarcloud.io/summary/overall?id=mathuo_dockview)
[](https://sonarcloud.io/summary/overall?id=mathuo_dockview)
[](https://bundlephobia.com/result?p=dockview-core)
##
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
## Quick Start
Install from [npm](https://www.npmjs.com/package/dockview-core):
```
npm install dockview-core
```
Import the stylesheet:
```css
@import 'dockview-core/dist/styles/dockview.css';
```
Create a dockview instance:
```ts
import { DockviewComponent } from 'dockview-core';
const element = document.getElementById('app');
const dockview = new DockviewComponent(element, {
createComponent: (options) => {
switch (options.name) {
case 'my-component':
return {
init: (params) => {
params.containerElement.textContent = 'Hello World';
},
};
}
},
});
dockview.addPanel({
id: 'panel_1',
component: 'my-component',
});
```
Apply a theme to a parent element:
```html