Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

dockview

mathuo56.4kMIT4.3.1TypeScript support: included

Zero dependency layout manager supporting tabs, grids and splitviews

splitview, split-view, gridview, grid-view, dockview, dock-view, grid, tabs, layout, layout manager, dock layout, dock, docking, splitter, drag-and-drop, drag, drop, react, react-component

readme

dockview

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

npm version npm CI Build Coverage Quality Gate Status Bundle Phobia

#

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.

Quick start

Dockview has a peer dependency on react >= 16.8.0 and react-dom >= 16.8.0. You can install dockview from npm.

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>