# dockview: a zero dependency docking layout engine for React, Vue, Angular and TypeScript

> dockview is a TypeScript docking library that gives web apps draggable tabs, split groups, floating panels and serializable layouts. It is for teams building IDE-like or trading-desk interfaces, and the main thing to check before adopting it is the split between the MIT packages and the proprietary dockview-enterprise.

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

- Repository: https://github.com/dockview/dockview
- Website: https://dockview.dev
- Stars: 3,460 · Forks: 173
- Language: TypeScript
- License: NOASSERTION
- Published: 2026-09-23 · Updated: 2026-09-23 · Language: en
- Canonical page: https://hysenlabs.com/projects/dockview-dockview

## The layout problem dockview solves, and who hits it

Most web applications present one document at a time. A code editor, a trading workbench, a log explorer or an observability console does not work that way. Users want several views open at once, arranged in columns and rows they control, with tabs they can drag between regions and close without losing the rest of the arrangement. Building that from scratch means writing hit testing, drop zones, resize handles, tab overflow, keyboard handling and a serialization format before you write a single feature of the actual product.

dockview targets that gap. The README describes it as a "Zero dependency layout manager supporting tabs, groups, grids and splitviews" with bindings for React, Vue, Angular and plain JavaScript. The audience is narrow on purpose: teams whose product is the workspace itself. If your application is a form, a dashboard of fixed cards, or a marketing site, a docking engine adds interaction surface you will never exercise.

The feature list in the README is the honest scope statement. Serialization and deserialization with full layout management, split views, grid views, dockable views, tab and group docking with drag and drop, touch and mobile support, popout windows, floating groups, Shadow DOM support. Every one of those is a workspace concern rather than a content concern. dockview does not know what your panels contain, and the README does not suggest otherwise.

## Panels, groups and the grid: how the docking model is put together

The core abstraction is the panel. A panel is an object with an id, a component name and an arbitrary params object, and the React quick start adds one through the API object handed to the onReady callback. Panels live inside groups. A group is a container that shows one panel at a time with a tab bar for the rest, and groups are what actually move when a user drags. The layout above the groups is the grid: nested horizontal and vertical splits that the library manages and that serialization writes out.

That separation explains the API shape. Adding a panel does not place it in absolute coordinates. It places it relative to a group, which is why a saved layout can be restored on a different screen size and still make sense. The README lists serialization and deserialization as the first feature, and that ordering is deliberate: the layout object is the durable artifact, and the DOM is a rendering of it.

The component registry is the other half of the contract. In the React example the components object maps the string "default" to a function component, and the panel references that string. This indirection is what makes the same layout JSON portable across React, Vue and Angular builds, as long as both sides register the same component names. It also means a layout saved by one version of your app will fail to render panels whose component names you have since renamed, and the README does not describe a migration path for that case.

## Installing dockview and rendering a first panel

Installation is one npm command per framework. The README lists four packages, and you pick the one matching your stack: dockview for plain JavaScript, dockview-react, dockview-vue and dockview-angular for the framework bindings.

```bash
npm install dockview          # JavaScript
npm install dockview-react    # React
npm install dockview-vue      # Vue
npm install dockview-angular  # Angular
```

The React quick start is short enough to reproduce in full. It imports the component and a theme, registers a component map, and adds a panel from the onReady callback.

```tsx
import { DockviewReact, themeDark } from 'dockview-react';
import 'dockview-react/dist/styles/dockview.css';

const components = {
  default: (props) => <div>Hello {props.params.title}</div>,
};
```

Two details in that snippet are easy to miss and both matter. The stylesheet import is not optional; without it the layout renders but the tabs and drag affordances have no appearance. And the component receives its data through props.params, which is the same object you passed when adding the panel.

The container height is the other trap, and the README calls it out in a comment: Dockview fills its container, so the container needs a height of its own. The example wraps the component in a div with height 100dvh.

```tsx
function App() {
  const onReady = (event) => {
    event.api.addPanel({
      id: 'panel_1',
      component: 'default',
      params: { title: 'World' },
    });
  };

  return (
    <div style={{ height: '100dvh' }}>
      <DockviewReact theme={themeDark} onReady={onReady} components={components} />
    </div>
  );
}
```

After mounting you should see a single panel labelled World with a tab bearing the same title. Drag that tab toward the edge of the container and the drop zones appear; dropping produces a split rather than a new group in place. The README points to the documentation site for the Vue and Angular equivalents rather than inlining them.

## Where dockview stops and your application has to start

The most common disappointment with a docking library is expecting a product. dockview gives you the layout engine, the drag and drop, and the serialization format. It does not give you a command palette, a file tree, a settings dialog, or any notion of what a panel means. The README's React example renders the string Hello World and nothing else, which is a fair picture of the boundary.

The second limitation is the component registry. Because panels reference components by string name, every panel type you support has to be registered up front in the components map. A plugin architecture where third-party code contributes panel types means you own the registration and the collision rules, and the README does not describe either.

Third, the licence split is a real constraint rather than a footnote. The README states that everything in the repository is MIT except dockview-enterprise, which is proprietary and governed by a commercial licence agreement, and that each published package ships its own LICENCE.md as the authoritative licence for that package. The repository's licence field is NOASSERTION, which is consistent with a monorepo holding more than one licence. Before you plan around a feature, check which package it lives in. That is a packaging question, not a legal one, and the LICENCE.md files are where the answer is.

Finally, the peer ranges are narrow at the edges. dockview-react supports react 16.8 to 19, dockview-vue requires vue 3.4 or later, and dockview-angular requires @angular/core 21.0.6 or later. If you are pinned to an older Angular major, the Angular binding is not available to you at all.

## dockview compared with golden layout

The comparison that comes up most often is golden layout, and the difference is in what each project considers its core. Golden Layout grew out of a jQuery-era desktop-metaphor library and its API reflects a container-first model, where you construct a configuration object describing the whole arrangement before anything renders. dockview inverts that: you mount an empty component and then add panels imperatively through the API, so the layout is something the running application produces rather than something you declare up front.

The dependency story differs too. The README's headline claim for dockview is zero dependencies, with the framework bindings listing React, Vue or Angular only as peers. That matters if bundle size or dependency auditing is part of your build process, because a layout engine sitting underneath your whole application is difficult to swap out later.

Framework coverage is the third axis. dockview ships first-party bindings for React, Vue and Angular from the same monorepo, with a shared core and a shared serialization format. Golden Layout's integration story is different in shape, and if you are on a framework that dockview does not bind, the plain dockview package is the JavaScript entry point the README lists. Neither library will write your panel content, and neither removes the need to decide what a saved layout means when the underlying application changes.

## Maintenance, releases and the cost of upgrading

The repository is not archived, and the last push was on 2026-09-22. Recent releases are v8.3.1 on 2026-09-10, v8.3.0 on 2026-09-09 and v8.2.0 on 2026-08-19, so the project is publishing on a steady cadence and the version line has moved well past 1.x and 2.x.

For consumers, the upgrade cost concentrates in three places. Serialized layouts are the first: any change to how the layout object is shaped affects saved state, and the README lists serialization as the primary feature without documenting a versioned migration path for stored layouts. The component registry is the second, since a renamed panel component breaks restoration of an old layout. The third is the framework peer ranges, which move with the bindings rather than with the core; the Angular binding requiring @angular/core 21.0.6 or later is a good example of a peer floor that will force a framework upgrade before a dockview upgrade.

The repository is a Yarn v1 workspaces monorepo built with Nx, and the root package.json exposes build, test, lint, format, types:check, test:e2e and release scripts across the workspace projects. If you are contributing rather than consuming, that is the toolchain you are signing up for. The README also points to npm provenance for verifying published builds, and lists verified publishing and builds through GitHub Actions as a stated security posture.

On licensing: everything is MIT except dockview-enterprise, which is proprietary. The README directs readers to LICENCE.md for the breakdown and states that each published package ships its own LICENCE.md as the authoritative licence for that package. Treat that per-package file as the document to read before you depend on a feature, and do not rely on the repository-level licence field, which is NOASSERTION.

## Conclusion

Adopt dockview if you need a browser-native docking surface and you are willing to write the panel components yourself; the library supplies the layout engine, not the application around it. Do not adopt it if you need a drop-in product shell or if the features you want live only in dockview-enterprise, because that package is proprietary and governed by a commercial licence agreement. Before committing, verify which package actually contains the feature you need by reading the per-package LICENCE.md files, and confirm that your framework version falls inside the peer ranges the README lists: react 16.8 to 19, vue 3.4 or later, and @angular/core 21.0.6 or later.

## FAQ

### What is dockview?

dockview is a zero dependency layout manager for the web that supports tabs, groups, grids and splitviews, with bindings for React, Vue, Angular and plain JavaScript. It handles panel docking, drag and drop, floating groups, popout windows and layout serialization, while the panel content itself is supplied by your application.

### Is dockview free?

The README states that everything in the repository is MIT except dockview-enterprise, which is proprietary and governed by a commercial licence agreement. Each published package ships its own LICENCE.md, which the README calls the authoritative licence for that package.

### How does dockview compare with golden layout?

Both are docking layout libraries for web applications. dockview is zero dependency and ships first-party bindings for React, Vue and Angular from one monorepo, and it is used imperatively: mount the component, then add panels through the API handed to onReady. The README does not document a comparison with golden layout.

## Sources

- [dockview/dockview on GitHub](https://github.com/dockview/dockview)
- [Issues](https://github.com/dockview/dockview/issues)
- [Project website](https://dockview.dev)
- [README](https://github.com/dockview/dockview/blob/master/README.md)
- [Releases](https://github.com/dockview/dockview/releases)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/dockview-dockview