gitwtfhub

wtf is tilery?

yangshun/tilery — explained in plain English

Analysis updated 2026-07-06 · repo last pushed 2026-06-18

7TypeScriptAudience · developerComplexity · 3/5ActiveSetup · moderate

TL;DR

Tilery is a TypeScript layout engine for building web apps with resizable, draggable, multi-panel workspaces like VS Code or Figma. It handles dividers, drag-and-drop, and tab switching, and lets you save and restore layouts.

Mindmap

mindmap
  root((repo))
    What it does
      Resizable draggable panels
      Tab drag and drop
      Layout serialization
    Tech stack
      TypeScript core
      React adapter
      Zero dependencies core
    Use cases
      Cloud IDEs
      Design tools
      Data dashboards
    Audience
      Frontend developers
      Product builders

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Why would anyone build with this?

REASON 1

Build a cloud IDE with resizable code editor and terminal panels

REASON 2

Create a data dashboard where users arrange their own charts and tables

REASON 3

Make an email client with a draggable sidebar and reading pane

REASON 4

Build a design tool with split panels that remember their layout

What's in the stack?

TypeScriptReact

How it stacks up

yangshun/tileryadguardteam/ruleseditorbymilon/aether-nexus-dashboard
Stars777
LanguageTypeScriptTypeScriptTypeScript
Last pushed2026-06-182026-07-01
MaintenanceActiveActive
Setup difficultymoderateeasyeasy
Complexity3/52/52/5
Audiencedeveloperdevelopervibe coder

Figures from each repo's GitHub metadata at analysis time.

How do you spin it up?

Difficulty · moderate Time to first run · 30min

Requires React as a peer dependency and you must provide render functions for tab headers and content.

Wtf does this do

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.

Yoink these prompts

Prompt 1
Install Tilery and create a React component with a left sidebar panel and a main content panel that can be resized by dragging the divider between them
Prompt 2
Using Tilery, build a layout with three horizontal panels where each panel holds multiple tabs that users can drag between panels
Prompt 3
Set up Tilery with a layout that serializes to localStorage so a user's panel arrangement is restored on page reload
Prompt 4
Configure Tilery panels with minimum and maximum sizes, and lock one panel so it cannot be dragged or closed
Prompt 5
Style Tilery panels using CSS variables to match a dark theme with custom colors for active tabs and dividers

Frequently asked questions

wtf is tilery?

Tilery is a TypeScript layout engine for building web apps with resizable, draggable, multi-panel workspaces like VS Code or Figma. It handles dividers, drag-and-drop, and tab switching, and lets you save and restore layouts.

What language is tilery written in?

Mainly TypeScript. The stack also includes TypeScript, React.

Is tilery actively maintained?

Active — commit in last 30 days (last push 2026-06-18).

How hard is tilery to set up?

Setup difficulty is rated moderate, with roughly 30min to a first successful run.

Who is tilery for?

Mainly developer.

View the repo → Decode another repo

This repo across BitVibe Labs

Don't trust strangers blindly. Verify against the repo.