Important

This package is for SolidJS. It is NOT based on solid-dockview (outdated) or the React-dependent dockview-solid from mathuo/dockview.

This is a SolidJS source package. Consumers must use a build tool that applies the SolidJS JSX transform (e.g. vite-plugin-solid or rollup-plugin-solid) to all .jsx and .tsx files from this package.

Do NOT use React or default JSX transforms—you will get runtime errors.

please look att the project dockview-solid-example in the github page to get started with a semi complex example.

consumers must have:

• A working Vite+vite-plugin-solid setup O
  • Or
• a Rollup/Webpack config that compiles imported .jsx using the SolidJS transform

Why this repo?

• solid-dockview (lyonbot/solid-dockview): Outdated, not compatible, unmaintained.
• dockview-solid (mathuo/dockview/tree/main/packages/dockview-solid): Thin React wrapper, still requires React.

@arminmajerie/dockview-solid:

• ✅ Directly ported from mathuo/dockview
• ✅ 100% SolidJS (no React dependency, no React shims)
• ✅ Works in SolidJS + Tauri applications

Features

• Tabs, groups, grids, splitviews
• Drag-and-drop with customizable drop zones
• Floating groups and popout windows
• Serialization/deserialization for state persistence
• Theme system (CSS custom properties)
• Full API for programmatic control
• Works natively in SolidJS and Tauri
• No React or legacy code

Installation

npm install @arminmajerie/dockview-solid dockview-core solid-js

Both @arminmajerie/dockview-solid and dockview-core are required.

Usage

import "dockview-core/dist/styles/dockview.css";
import {
  DockviewSolid,
  DockviewApi,
  IDockviewPanelProps,
  IDockviewPanelHeaderProps,
  IDockviewHeaderActionsProps,
  IWatermarkPanelProps,
  DockviewReadyEvent,
  IDockviewPanel,
  themeReplit
} from "@arminmajerie/dockview-solid";

// Example component usage:

<DockviewSolid
  theme={themeReplit}
  components={{ panelContent: PanelContent }}
  tabComponents={{
    customTabHeaderWorkspace: CustomTabHeaderWithCloseButton,
    customTabHeaderConfig: CustomTabHeaderWithCloseButton,
    customTabHeaderComponent: CustomTabHeaderWithCloseButton,
    customTabHeaderCanvas: CustomTabHeaderNoClosing,
  }}
  rightHeaderActionsComponent={AddPanel}
  watermarkComponent={MyWatermark}
  onReady={handleReady}
/>

Project status

• Alpha: Major features are ported, but expect bugs and breaking changes.
• Docs and live examples: Coming soon.
• No support for React/Vue.

License

MIT

Maintainer

• arminmajerie