dockview

Zero dependency layout manager supporting tabs, groups, grids and splitviews with ReactJS support written in TypeScript

--- [![npm version](https://badge.fury.io/js/dockview.svg)](https://www.npmjs.com/package/dockview) [![npm](https://img.shields.io/npm/dm/dockview)](https://www.npmjs.com/package/dockview) [![CI Build](https://github.com/mathuo/dockview/workflows/CI/badge.svg)](https://github.com/mathuo/dockview/actions?query=workflow%3ACI) [![Coverage](https://sonarcloud.io/api/project_badges/measure?project=mathuo_dockview&metric=coverage)](https://sonarcloud.io/summary/overall?id=mathuo_dockview) [![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=mathuo_dockview&metric=alert_status)](https://sonarcloud.io/summary/overall?id=mathuo_dockview) [![Bundle Phobia](https://badgen.net/bundlephobia/minzip/dockview)](https://bundlephobia.com/result?p=dockview) ## ![](https://github.com/mathuo/dockview/blob/HEAD/packages/docs/static/img/splashscreen.gif?raw=true) 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 - verifed publishing and builds through GitHub Actions Want to verify our builds? Go [here](https://www.npmjs.com/package/dockview#Provenance). ## Quick start Dockview has a peer dependency on `react >= 16.8.0` and `react-dom >= 16.8.0`. You can install dockview from [npm](https://www.npmjs.com/package/dockview). ``` npm install --save dockview ``` Within your project you must import or reference the stylesheet at `dockview/dist/styles/dockview.css` and attach a theme. ```css @import '~dockview/dist/styles/dockview.css'; ``` You should also attach a dockview theme to an element containing your components. For example: ```html ```