Rearrange the interface, at runtime.

Recursive split-tree layout

A layout is a tree of leaf, split, and group nodes. Binary splits carry a ratio and an axis; the renderer is a controlled component driven by your layout state.

Drag-and-drop tiling

Hyprland-style live drag: the source detaches, the tree freezes, a cursor-following ghost hops between seats, and the move commits on release — resolving to swap, edge-insert, split-container-insert, or group-merge.

Resize & sizing modes

Drag split dividers, or pin a pane to a measured pixel extent per dimension (static) versus ratio-distributed (flexible). Panes can acquire space directionally.

Master / stack layout

Any subtree can switch to a master-area-plus-stack arrangement with a configurable master count and orientation — the classic tiling-WM master layout.

Tabbed grouping

Collapse several leaves into one slot as a stacked group with a tab strip; only the active member renders and is hit-tested.

Full keyboard control

Directional focus, a pane switcher (cycle / jump / overlay), maximize, keyboard move-mode, and master/group commands — all behind a remappable keymap and a typed command API.

Theming engine

Built-in themes, eight accent hues, a theme provider with hooks, and live theme switching with no remount. This page ships a bespoke mosaic theme.

Self-healing drag recovery

A frame-deadline animation backstop, an idle watchdog, transient-style teardown, and a visibilitychange reconcile guarantee a drag never strands the tree mid-transition.

A layout is a plain, serialisable tree: leaf nodes hold a tile, split nodes divide space along an axis by a ratio, and group nodes stack leaves behind tabs. You hold the tree in state; the renderer projects it to pixels, runs the interaction, and reports every edit back — nothing is hidden inside the component. It is yours to persist, diff, and restore.

Kudos to Hyprland

The interaction model is inspired by Hyprland, the dynamic-tiling Wayland compositor, and its tiling-first philosophy: detach-and-drop movement, master/stack layouts, and keyboard-driven focus. Kudos to its maintainers and contributors for advancing modern tiling workflow design.

Add the scoped package and its React peers. The library targets react and react-dom version 19.

pnpm add @n-uf/hypr-tiling react react-dom

The renderer is a controlled component: you own the layout tree in state and apply every change it reports through onLayoutChange.

import {
  DynamicTilingRenderer,
  DEFAULT_TILING_LAYOUT_CONFIG,
  type DynamicLayoutNode,
  type DynamicTile,
} from "@n-uf/hypr-tiling";
import { useState } from "react";

const tiles: DynamicTile[] = [
  { id: "a", title: "editor", content: <Editor /> },
  { id: "b", title: "preview", content: <Preview /> },
];

const initialLayout: DynamicLayoutNode = {
  kind: "split", id: "root", axis: "vertical", ratio: 0.5,
  first: { kind: "leaf", id: "l", tileId: "a" },
  second: { kind: "leaf", id: "r", tileId: "b" },
};

export function Workspace() {
  const [layout, setLayout] = useState(initialLayout);
  return (
    <DynamicTilingRenderer
      layout={layout}
      tiles={tiles}
      config={DEFAULT_TILING_LAYOUT_CONFIG}
      onLayoutChange={setLayout}
    />
  );
}