Dockable, resizable tab layouts like VS Code's, for React and Solid, built on a framework-agnostic core.
Your tabs live in tabsets, arranged in rows and separated by draggable splitters. Users drag tabs to rearrange or split panels, resize them, and maximize or fold a panel. The layout is plain JSON you can save and restore.
- Drag tabs onto another tab bar, onto a panel's side to split it, or onto a layout edge. Works with mouse, pen and touch.
- Resize with splitters that respect minimum sizes. Only the two neighbouring panels move.
- Maximize a panel, or fold it to a strip, and get back the exact previous size.
- Tab content never remounts when tabs move, so editors, terminals and iframes keep their state.
- Save and restore the layout as versioned JSON. Layouts saved by v1 load automatically.
- Accessible: WAI-ARIA tabs and window splitter patterns, keyboard resizing, and a keyboard move mode.
- SSR-safe and fast: deterministic server markup, and drags and resizes never re-render React.
- Three levels of API: one component, headless hooks, or the framework-agnostic core.
| Package | |
|---|---|
@dynamix-layout/react |
<DynamixLayout> and headless hooks for React 18 and 19 |
@dynamix-layout/solid |
<DynamixLayout> for SolidJS |
@dynamix-layout/core |
The engine: tree, geometry, drag-and-drop and serialization, with no framework |
npm install @dynamix-layout/reactimport { DynamixLayout } from '@dynamix-layout/react'
import '@dynamix-layout/react/styles.css'
const tabs = [
{ id: 'editor', title: 'Editor', content: <Editor /> },
{ id: 'terminal', title: 'Terminal', content: <Terminal /> },
{ id: 'preview', title: 'Preview', content: <Preview /> },
]
export function App() {
return (
<div style={{ height: '100vh' }}>
<DynamixLayout tabs={tabs} />
</div>
)
}To save the layout, store what onLayoutChange gives you and pass it back as defaultLayout; see Persisting layouts.
- Getting started: concepts, the first layout, and saving and restoring.
- API reference: every component, hook and function.
- Guides:
- Migrating from v1.
- Examples: every one has an all-features showcase (drag, split, resize, close, add, fold, maximize, restore, persist, reset):
- React (plus custom components, headless and controlled demos)
- Next.js
- Solid
- SolidStart
- Plain JavaScript on
@dynamix-layout/core, no framework
Issues and pull requests are welcome; see CONTRIBUTING.md and the issue tracker.