Retour au classement

mathuo/dockview

TypeScriptdockview.dev

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

layout-managerdocking-librarydocking-layoutdockingdocktabslayoutreactdrag-and-droppanelsplitviewvue
Croissance des étoiles
Étoiles
3.3k
Forks
163
Croissance hebdomadaire
Issues
99
1k2k3k
nov. 2020sept. 2022août 2024juil. 2026
Artefactsnpmnpm install dockview
README

dockview

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


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
  • 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 at 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) npm version
dockview-vue Vue 3 bindings (peer: vue ≥3.4) npm version
dockview-angular Angular bindings (peer: @angular/core ≥21) 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 } 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
            className="dockview-theme-dark"
            onReady={onReady}
            components={components}
        />
    );
}

For Vue and Angular examples see the documentation.

Development

This project is an NX monorepo using Yarn v1 workspaces.

yarn install    # Install dependencies
yarn build      # Build all packages
yarn test       # Run tests
yarn lint       # Run ESLint
yarn format     # Run Prettier

Build order is managed automatically by NX:

dockview-core → dockview → dockview-react
dockview-core → dockview → dockview-vue
dockview-core → dockview → dockview-angular

Contributing

Contributions are welcome! Please open an issue or submit a pull request.

License

MIT — see LICENSE for details.


Want to verify our builds? Go here.