| .codesandbox | ||
| .github/workflows | ||
| .vscode | ||
| module-build | ||
| packages | ||
| scripts | ||
| .editorconfig | ||
| .eslintignore | ||
| .eslintrc.js | ||
| .gitignore | ||
| .prettierignore | ||
| .prettierrc | ||
| jest.config.ts | ||
| lerna.json | ||
| LICENSE | ||
| package.json | ||
| README.md | ||
| sonar-project.properties | ||
| tsconfig.eslint.json | ||
| tsconfig.test.json | ||
| vscode.code-workspace | ||
| yarn.lock | ||
dockview
Zero dependency layout manager supporting tabs, grids and splitviews with ReactJS support written in TypeScript
Please see the website: https://dockview.dev
Want to inspect the latest deployment? Go to https://unpkg.com/browse/dockview@latest/
Features
- Simple splitviews, nested splitviews (i.e. gridviews) supporting full layout managment with dockable and tabular views
- Extensive API support at the component level and view level
- Themable and customizable
- Serialization / deserialization support
- Tabular docking and Drag and Drop support
- Documentation and examples
This project was inspired by many popular IDE editors. Some parts of the core resizable panelling are inspired by code found in the VSCode codebase, splitview and gridview.
Quick start
Dockview has a peer dependency on react >= 16.8.0 and react-dom >= 16.8.0. You can install dockview from npm. Please see the Getting Started Guide.
npm install --save dockview
Within your project you must import or reference the stylesheet at dockview/dist/styles/dockview.css and attach a theme.
@import '~dockview/dist/styles/dockview.css';
You should also attach a dockview theme to an element containing your components. For example:
<body classname="dockview-theme-dark"></body>