Onirigiri

The library

Onirigiri owns window layout and interaction. Your application owns everything inside the panes.

1. 01Columns & planesTile panes in columns, then stack whole rows above and below.
2. 02Follow cameraFocus moves the camera. Panes keep their size; the world scrolls.
3. 03OverviewZoom out to see everything at once, then dive back in.
4. 04Resize & maximizeDrag edges, fit to content, or fill the viewport.
5. 05Live contentYour components stay mounted, stay interactive, stay yours.
6. 06HTML-in-CanvasGPU pane pictures for smooth motion, with a native DOM fallback.
7. 07Serializable layoutgetLayout() and restoreLayout() — undo, persistence, sharing.
8. 08ThemeableTyped tokens, slot class names, and swappable chrome.

Quick start

$ pnpm add @riteofstring/onirigiri

import { OnirigiriWorkspace } from "@riteofstring/onirigiri";
import "@riteofstring/onirigiri/styles.css";

const panes = [
  { paneId: "docs", surfaceKind: "document", title: "Docs" },
  { paneId: "preview", surfaceKind: "preview", title: "Preview" },
];

export function App() {
  return (
    <OnirigiriWorkspace
      initialPanes={panes}
      renderPane={(pane) => <YourPane pane={pane} />}
    />
  );
}

Give the workspace a sized container. Everything else — focus, camera, overview, resizing — comes with it.

Controls

Onirigiri is keyboard-first. Shortcuts stay inside the workspace, so typing in a pane never moves the camera.

Alt←↑→↓

Focus the neighbouring pane

AltH J K L

Same, on the home row

AltHome

First column

AltEnd

Last column

AltO

Toggle overview

AltShiftHome

Return home

AltCtrl←↑→↓

Carry the focused pane

CtrlShiftEnter

Split right

AltShiftG

Select the pane group

Pointer: click to focus, drag pane edges to resize, and use the on-screen arrows in the corner.