Tiled windows form a binary tree. Every split divides its area between two sides at a ratio; every window is a leaf.

Dropping into the tiling

Drag a window by its title and bring the pointer to a screen edge. The tile holding that edge is split, and the rest of the layout reflows live while you hover, so you see the result before you let go.

• The end thirds of an edge put the window before or after that tile across the edge: the lower third of the left edge puts it under the left tile.
• The middle of an edge puts it beside that tile, on the edge's side.
• Hold Shift to split whichever tile is under the pointer, anywhere, toward its nearest side.
• An empty desktop edge makes the window the whole layout.

Dragging a tile out by its title floats it again, and its sibling grows to fill the space. Press Escape mid-drag to put everything back.

Resizing

The gutters between tiles are the resize handles: drag one to move its split. Where one gutter ends against another there's a junction: drag it to move both at once. Gutters are keyboard-operable too: Tab to one, then the arrow keys (Shift for bigger steps), Enter to even it out.

What happens to space

• Closing a tile gives its space to its sibling.
• Minimizing keeps its place: the sibling fills in meanwhile, and restoring puts it back exactly where it was.
• Maximizing keeps its tile too, so restoring returns it to the layout.

Keyboard

In the engine

The tree is plain data in the workspace state (tiles), and every operation is a pure function you can use directly: insertTile, removeTile, layoutTiles, dropTargetAt. Layout is computed as fraction of the desktop + pixels per coordinate, so the same result gives exact pixels for gestures and calc() CSS for a first paint that's right at any size.