@arminmajerie/dockview-solid
Zero-dependency layout manager for SolidJS.
No React. No Vue. No legacy code.
---
## 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 ***examples/simple-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
---
## Live Demo
See the mobile-friendly demo running in production:
**[https://amkserver.myddns.rocks/DataMorph-Playground](https://amkserver.myddns.rocks/DataMorph-Playground)**
## Source Code
Full source code is available at:
**[https://github.com/arminmajerie/dockview-solid-port](https://github.com/arminmajerie/dockview-solid-port)**
---
## Why this repo?
* `solid-dockview` ([lyonbot/solid-dockview](https://github.com/lyonbot/solid-dockview)): Outdated, not compatible, unmaintained.
* `dockview-solid` ([mathuo/dockview/tree/main/packages/dockview-solid](https://github.com/mathuo/dockview/tree/main/packages/dockview-solid)): Thin React wrapper, **still requires React**.
**`@arminmajerie/dockview-solid`:**
* ✅ Directly ported from [mathuo/dockview](https://github.com/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
```sh
npm install @arminmajerie/dockview-solid dockview-core solid-js
```
Both `@arminmajerie/dockview-solid` and `dockview-core` are required.
---
## Usage
```js
import "dockview-core/dist/styles/dockview.css";
import {
DockviewSolid,
DockviewApi,
IDockviewPanelProps,
IDockviewPanelHeaderProps,
IDockviewHeaderActionsProps,
IWatermarkPanelProps,
DockviewReadyEvent,
IDockviewPanel,
themeReplit
} from "@arminmajerie/dockview-solid";
// Example component usage: