yangshun/tilery

Tilery is a layout engine that lets you build web interfaces with multiple resizable, draggable panels, think of the multi-pane workspace in VS Code, Figma, or a browser-based IDE. Users can drag tabs between panels, split panels into new sections, resize dividers by dragging them, and maximize any panel to fullscreen. It preserves content state when tabs move around, so nothing reloads or resets. At its core, it's a framework-agnostic TypeScript library with a React adapter. You describe your layout as a tree of "groups" and "panels", horizontal groups lay children out left-to-right, vertical groups stack them top-to-bottom. Each panel holds tabs, and you provide functions that tell it how to render each tab's header and content. Everything else, the dividers, drag-and-drop, tab switching, resize handles, is handled for you. Layouts can be serialized to JSON and saved, so a user's arrangement persists across sessions via localStorage or server-side rendering. This would appeal to anyone building a product with a complex, multi-panel workspace: a cloud IDE, a design tool, a data dashboard, an email client with a sidebar and reading pane, or a file manager. If your app needs users to arrange their own workspace and have it remembered, this handles the hard parts. You can lock specific panels or tabs to prevent dragging or closing, set min/max sizes on panels, and customize the look entirely through CSS variables. A notable design choice is the separation between the core engine and the React adapter, the core has zero dependencies, so it could theoretically be adapted to other frameworks. The React adapter is what you'd typically install, and React is the only peer dependency. Everything is TypeScript-first with full type coverage, and resize dividers are keyboard-accessible out of the box.