DOCSEARCHbyAlgolia
Submit Docs

Dockview Full Reference

website·Indexed 33 days ago

https://dockview.dev

A zero dependency layout manager supporting tabs, groups, grids and splitviews for React, Vue, Angular, and JavaScript.

Tokens
2.3K
Snippets
10
Records
13
Agent score
19%

What's inside Dockview

  1. Dockview Overview and Key Features

    Dockview is an open-source docking layout library used to build IDE-like or dashboard interfaces. It supports resizable panels, draggable tabs, floating groups, popout windows, and multiple layout strategies (Splitview, Gridview, Paneview, and Dockview). It is TypeScript-first, has zero runtime dependencies, and is compatible with Shadow DOM and strict CSP.

  2. Install Dockview for different frameworks

    Depending on your project's framework, install the corresponding package:
    # JavaScript (Core)
npm install dockview

# React
npm install dockview-react

# Vue 3
npm install dockview-vue

# Angular
npm install dockview-angular

# Enterprise (Commercial)
npm install dockview-enterprise

  3. Manage advanced groups and windows in Dockview

    The Dockview API provides methods for creating specialized group types and managing window states. Use addFloatingGroup for floating panels, addPopoutGroup to move a group into a separate OS window, and addEdgeGroup to pin groups to the layout edges. You can also manage full-screen states using maximizeGroup and exitMaximizedGroup.
    // Create a floating group
dockviewApi.addFloatingGroup(item, options);

// Pop a group out to a new window
dockviewApi.addPopoutGroup(item, options);

// Pin a group to a layout edge
dockviewApi.addEdgeGroup(position, options);

// Maximize a specific panel's group
dockviewApi.maximizeGroup(panel);

// Exit maximized state
dockviewApi.exitMaximizedGroup();

  4. Serialize and restore Dockview layout state

    Dockview supports layout serialization and history management. Use toJSON() to export the current layout state to a JSON object and fromJSON(data) to restore a layout from a previously saved state. The API also provides undo/redo functionality for layout changes.
    // Save layout state
const state = dockviewApi.toJSON();

// Restore layout state
dockviewApi.fromJSON(state);

// Undo/Redo layout changes
dockviewApi.undo();
dockviewApi.redo();

  5. Listen to Dockview layout and panel events

    Dockview exposes a variety of event hooks to react to layout changes, panel movements, and group modifications. Key events include onDidLayoutChange for general layout updates, onDidActivePanelChange for focus shifts, and onDidAddPopoutGroup for window management.

  6. Manage panels and groups via DockviewApi

    The DockviewApi (returned by factory functions or available in onReady events) allows programmatic control over the layout.
    // Panel Management
api.addPanel(options);
api.removePanel(panel);
api.getPanel(id);

// Group Management
api.addGroup(options);
api.removeGroup(group);
api.closeAllGroups();
api.getGroup(id);

// State and Layout
const active = api.activePanel;
api.focus();
api.layout(width, height);
api.clear();

  7. Create a layout using Dockview factory functions

    Dockview provides several factory functions to create different layout types. Each returns the corresponding API instance for that layout.
    // Docking layout with tabs, groups, and drag-and-drop
const api = createDockview(element, options);

// Grid-based layout
const api = createGridview(element, options);

// Split-based layout
const api = createSplitview(element, options);

// Accordion/pane-based layout
const api = createPaneview(element, options);

  8. Implement Dockview in React

    In React, use the DockviewReact component. Define your panel components in a components map and use the onReady event to programmatically add panels via the provided API.
    import 'dockview-react/dist/styles/dockview.css';
import {
    DockviewReact,
    DockviewReadyEvent,
    IDockviewPanelProps,
} from 'dockview-react';

const MyPanel = (props: IDockviewPanelProps) => {
    return <div style={{ padding: 16 }}>{props.api.title}</div>;
};

const components = { default: MyPanel };

export default function App() {
    const onReady = (event: DockviewReadyEvent) => {
        event.api.addPanel({
            id: 'panel_1',
            component: 'default',
            title: 'Panel 1',
        });
        event.api.addPanel({
            id: 'panel_2',
            component: 'default',
            title: 'Panel 2',
            position: { referencePanel: 'panel_1', direction: 'right' },
        });
    };

    return (
        <DockviewReact
            className="dockview-theme-abyss"
            style={{ width: '100%', height: '100%' }}
            onReady={onReady}
            components={components}
        />
    );
}

  9. Implement Dockview in Angular

    In Angular, import DockviewAngularModule and use the dv-dockview component. Panels are defined as standard Angular components that receive the api as an @Input().
    import 'dockview-angular/dist/styles/dockview.css';
import { Component, Input, NgModule, Type } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { DockviewAngularModule } from 'dockview-angular';

@Component({
    selector: 'my-panel',
    template: `<div style="padding: 16px">{{ api.title }}</div>`,
})
export class MyPanelComponent {
    @Input() api: any;
}

@Component({
    selector: 'app-root',
    template: `
        <dv-dockview
            [components]="components"
            class="dockview-theme-abyss"
            (ready)="onReady($event)"
        ></dv-dockview>
    `,
})
export class AppComponent {
    components: Record<string, Type<any>> = { default: MyPanelComponent };

    onReady(event: any) {
        event.api.addPanel({ id: 'panel_1', component: 'default', title: 'Panel 1' });
        event.api.addPanel({
            id: 'panel_2',
            component: 'default',
            title: 'Panel 2',
            position: { referencePanel: 'panel_1', direction: 'right' },
        });
    }
}

@NgModule({
    declarations: [AppComponent, MyPanelComponent],
    imports: [BrowserModule, DockviewAngularModule],
    bootstrap: [AppComponent],
})
export class AppModule {}

  10. Compare Dockview Open Source vs Enterprise Editions

    Dockview is available in two editions:

    1. Dockview (MIT): Includes core docking layout features: dockable grids, nested layouts, floating groups, popout windows, edge groups, maximize/restore, tab groups/chips, context menus, and framework support.
    2. Dockview Enterprise (Commercial): A drop-in superset adding smart guides (snapping), DnD compass, layout history (undo/redo), multi-row tabs, pinned tabs, advanced tab overflow (search/previews), auto-hide/dock-to-edge groups, and spatial keyboard navigation.

    Integration: In JavaScript, replace the dockview package with dockview-enterprise. In React, Vue, or Angular, continue using the framework package but add import 'dockview-enterprise'; at application start-up.

  11. Implement Dockview in Vue 3

    In Vue 3, use the DockviewVue component. Register panel components by name in the :components prop and handle the @ready event to initialize panels.
    <script setup lang="ts">
import 'dockview-vue/dist/styles/dockview.css';
import {
    DockviewVue,
    type DockviewReadyEvent,
    type IDockviewPanelProps,
} from 'dockview-vue';
import { defineComponent, type PropType } from 'vue';

const MyPanel = defineComponent({
    name: 'MyPanel',
    props: {
        params: {
            type: Object as PropType<IDockviewPanelProps>,
            required: true,
        },
    },
    template: `<div style="padding: 16px">{{ params.api.title }}</div>`,
});

function onReady(event: DockviewReadyEvent) {
    event.api.addPanel({ id: 'panel_1', component: 'my-panel', title: 'Panel 1' });
    event.api.addPanel({
        id: 'panel_2',
        component: 'my-panel',
        title: 'Panel 2',
        position: { referencePanel: 'panel_1', direction: 'right' },
    });
}
</script>

<template>
    <DockviewVue
        style="width:100%;height:100%"
        class="dockview-theme-abyss"
        :components="{ 'my-panel': MyPanel }"
        @ready="onReady"
    />
</template>

  12. Apply built-in themes to Dockview

    Apply built-in themes by adding the corresponding CSS class to a parent element or passing a theme object via the theme option/prop. Many themes offer a -spaced variant (e.g., dockview-theme-nord-spaced) to add padding and gaps between groups. Custom themes can be implemented using CSS custom properties.
    <!-- Example: Applying the Visual Studio theme -->
<div class="dockview-theme-vs">
  <!-- Dockview component here -->
</div>

<!-- Example: Applying the Nord theme with spacing -->
<div class="dockview-theme-nord-spaced">
  <!-- Dockview component here -->
</div>