HYPR TILING
hypr-tiling
dynamic tiling · for react

Rearrange the interface, at runtime.

A controlled tiling renderer for React — drag, resize, group, and keyboard-drive panes.

Built for dashboards, IDE-like tools, and operator consoles. You own the layout tree.

PolyForm Perimeter 1.0.1 · source-available · free commercial use · no competing use · Kudos to Hyprland — detach-and-drop, master/stack, and keyboard focus.
GitHub
366 ch53 w~1 min
seo + llm

SEO & LLM friendly

Every pane is real semantic HTML, prerendered. Crawlers and LLMs read it without JavaScript. A /llms.txt mirror ships too.

122 ch19 w~1 min
features

Ships today

core tiling
Split tree
You own a leaf, split, and group layout.
Drag & drop
Live ghost; swap, insert, or group-merge.
Resize
Drag dividers, or pin a pane in pixels.
Tab groups
Stack leaves; only the active tab paints.
Keyboard
Focus, cycle, maximize; remappable commands.
since 26.9.x
Pane collapsesince 26.9.x
Titlebar-only pin; chrome resize floor.
Compact ghostsince 26.9.x
Chip ghost plus host external-drop claim.
Drag chromesince 26.9.x
Themeable ghost; overlay portal for tokens.
Pane identitysince 26.9.x
Same React instance through drag and drop.
Persist layoutsince 26.9.x
Save and heal the tree on load.
Workspacessince 26.9.x
Several layout trees over one tile pool.
581 ch92 w~1 min
install

Install

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

Versioning

Versions follow calendar alignment, YY.M.R (year, month, release). The number does not carry SemVer major semantics. The library is in active development; any release may break backward compatibility. Pin an exact version in your manifest and read the per-release notes in the changelog before you upgrade.

import { TilingRenderer, DEFAULT_TILING_LAYOUT_CONFIG } from "@n-uf/hypr-tiling";

<TilingRenderer
  layout={layout}
  tiles={tiles}
  config={DEFAULT_TILING_LAYOUT_CONFIG}
  onLayoutChange={setLayout}
/>

React 19 peers. Full walkthrough in the quickstart.

You own the tree; apply every edit from your app.

340 ch36 w~1 min
use cases

Use cases

Any screen with several panes the user rearranges.

  • DashboardsMetrics panes that share one screen.
  • IDE-like toolsEditor, preview, and terminal, rearranged live.
  • Trading consolesDense, keyboard-driven panels in one viewport.
  • Content sitesSEO tiles — this page is one.
269 ch40 w~1 min
workspacefocuswindowlayoutgroup