UrDock — Headless Docking Layouts

Part of UrStack, my open-source organization for TypeScript libraries. Siblings: UrColor, UrVis, UrCharts.

Overview

UrDock builds IDE-style docking layouts for Vue and React: split panes, grids, collapsible regions, tabs. It ships no stylesheet at all. The library owns the geometry, the consumer owns every pixel.

Layout state lives in a reactive store rather than in the DOM. That turns resize and collapse into ordinary state transitions, and it makes a whole workspace layout serializable, so you can save it, restore it, or ship it between users.

Why I built it

Docking libraries almost always arrive with a theme attached, and stripping that theme out is worse than writing the layout yourself. The parts genuinely worth reusing are the ones nobody enjoys writing twice: split geometry, resize constraints, persistence.

UrDock keeps those and hands back the rendering.

Key features

• No stylesheet, no theme, no CSS variables to override
• Four layout primitives: Splitview, Gridview, Paneview, Tabview
• A reactive store that drives resize and collapse and persists the whole workspace
• Compound components that render real DOM elements carrying data-* state attributes, so styling is plain CSS
• asChild polymorphism, rendering as any element or component you supply
• One model behind both the Vue and React adapters

Tech stack

TypeScript

Vue

React

VitePress

• Core: TypeScript, reactive layout store
• Adapters: Vue, React
• Patterns: compound components, asChild polymorphism, data-* state attributes
• Docs: VitePress