HYPR TILING
hypr-tiling
dynamic tiling · for react

Rearrange the interface, at runtime.

hypr-tiling is a dynamic tiling layout engine for React: a recursive split-tree renderer that lets users drag, drop, resize, group, maximize, and keyboard-control resizable panes at runtime, with a theming engine and self-healing drag recovery — inspired by the Hyprland Wayland compositor.

Reach for it where users live inside dense, multi-panel screens — IDE-like tools, trading and operator consoles, analytics dashboards — and your app keeps strict, controlled ownership of the layout state.

This page is a hypr-tiling layout. Every section is a real pane: focus it, drag its header, resize the dividers, maximize it — or run a live tiling command from the shortcut bar below.

contributing

hypr-tiling is built in the open and welcomes collaboration — framework adapters, rendering backends, bug reports, and ideas from the roadmap. To get involved, reach out at metelin@gmail.com.

Open the full interactive showcaseGitHub
994 ch153 w~1 min
use cases

Use cases

Reach for hypr-tiling where users live across multiple panels and rearrange them as the work demands.

  • Dynamic / content sitesReal, SEO-indexable content arranged as tiles instead of a single scroll — this page dogfoods it: the docs live in prerendered panes.
  • DashboardsAnalytics, metrics, and monitoring consoles where several resizable panes share one screen.
  • IDE-like toolsEditor, preview, and terminal workspaces a user splits, stacks, and rearranges at runtime.
  • Trading & operator consolesDense, keyboard-driven control surfaces that pack many live panels into a fixed viewport.
  • Admin & data appsTable, detail, and activity panes side by side, resized to fit the task at hand.
  • Observability & log explorersQuery, results, and trace panes rearranged on the fly while chasing an incident.
  • Web terminals & consolesBrowser-based shells, multiplexed sessions, and live log streams split and resized Hyprland-style — the tiling homage made literal, in the terminal.
  • Realtime trading terminalsBloomberg-style desks — live charts, order books, watchlists, and order entry packed into dense panes that stream and rearrange in realtime.
1,138 ch172 w~1 min
features

Features

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.
1,478 ch220 w~1 min
model & kudos

The model

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.

654 ch101 w~1 min
roadmap

Roadmap

Where hypr-tiling is headed. These are planned directions, not shipped features today — the library currently renders to the DOM and ships a React adapter only. The items below describe where the project is going.

  • Framework-agnostic coreA dependency-free vanilla TypeScript core so the tiling engine runs without any framework — the layout tree, the drag/FLIP state machine, and the self-healing recovery logic decoupled from React, ready to drive any view layer.
  • First-class adapters for every major frameworkReact ships today; planned official adapters for Vue, Svelte, Solid, Angular, and standard Web Components, each a thin binding over the same vanilla core so behavior stays identical across frameworks.
  • Canvas rendering backendAn optional canvas / GPU-accelerated render path for very high pane counts and animation-heavy scenes where DOM reflow is the bottleneck. The semantic DOM path stays the default; canvas is opt-in for density.
  • Rust + WebAssembly corePorting the hot layout, drag, and geometry math to a Rust → WebAssembly core for deterministic, high-frame-rate behavior — unlocking more window-manager-like UX: virtual workspaces, snap zones, persistent session layouts, fully keyboard-driven tiling, and per-monitor-style multi-viewport arrangements.
1,273 ch185 w~1 min
install

Install & integrate

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 {
  TilingRenderer,
  DEFAULT_TILING_LAYOUT_CONFIG,
  type TilingLayoutNode,
  type TilingTile,
} from "@n-uf/hypr-tiling";
import { useState } from "react";

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

const initialLayout: TilingLayoutNode = {
  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 (
    <TilingRenderer
      layout={layout}
      tiles={tiles}
      config={DEFAULT_TILING_LAYOUT_CONFIG}
      onLayoutChange={setLayout}
    />
  );
}
971 ch134 w~1 min
seo + llm

SEO & LLM friendly

Tiling does not have to cost discoverability. Every pane body is real semantic markup — headings, paragraphs, lists, code — emitted into the document, never painted onto a canvas or hidden behind a transform. All panes render at once, so unfocused sections stay in the DOM.

Because the content lives in the DOM, it prerenders. This homepage ships its full text in the initial static HTML, with the interactive tiling layered on as progressive enhancement — so crawlers and LLM assistants that fetch and cite docs read the real content without running JavaScript. A /llms.txt mirror is served for the same reason.

612 ch102 w~1 min
focuswindowlayoutgroup