Skip to content

mathuo/dockview

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3,273 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Dockview

docking engine for the web

Zero dependency layout manager supporting tabs, groups, grids and splitviews. Supports React, Vue, Angular and JavaScript

npm version npm downloads CI Coverage Quality gate Bundle size


A Dockview layout showing docked, tabbed and split panels in a trading workbench

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

Package Description Version
dockview JavaScript, zero dependencies, full feature set out of the box npm version
dockview-react React bindings (peer: react 16.8–19) npm version
dockview-vue Vue 3 bindings (peer: vue ≥3.4) npm version
dockview-angular Angular bindings (peer: @angular/core ≥21.0.6) npm version
dockview-enterprise Enterprise features, drop-in superset of dockview (commercial licence) npm version

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 (
    <DockviewReact
      theme={themeDark}
      onReady={onReady}
      components={components}
    />
  );
}

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.

About

Zero dependency docking layout manager supporting tabs, groups, grids and splitviews. Supports React, Vue, Angular, and vanilla TypeScript.

Topics

Resources

Security policy

Stars

Watchers

Forks

Releases

Used by

Contributors

Languages