One drag, four tiling algorithms, four different screens

Grab a window and drag it into the bottom-right corner. In one pane the screen splits cleanly down the middle. In another the layout winds inward like a nautilus. In a third almost nothing moves, and in the fourth the leftover space keeps halving toward the corner until the last window is a sliver. Same window, same drop, four completely different screens, all reacting in the same frame.

What it is and why

Reflow puts four tiling window manager layout algorithms on one page, fed by a single shared window list. Add a window, remove one, or drag one to reorder, and all four panes retile at once from the exact same state.

Every tiling window manager (i3, dwm, Hyprland, xmonad, bspwm) ships a different layout algorithm, and the difference is not cosmetic: it changes how your screen feels every time you open a terminal. But you cannot compare them without installing four window managers and switching between them, or reading descriptions like "BSP recursively splits the largest region" that never show you what that looks like in motion. Reflow is the side-by-side that a paragraph of pseudocode can't be.

The four layouts, watched instead of read

• BSP recursively halves the largest region, alternating vertical and horizontal cuts. This is the i3 and bspwm feel: clean binary splits.
• Spiral (Fibonacci) carves a shrinking slice off the remaining space for each new window, so the layout winds around the screen. Common in Hyprland and dwm patches.
• Master-stack parks the first window in a big master area and stacks the rest down one side. The classic dwm and xmonad default, and the reason dragging often barely disturbs it.
• Dwindle halves the leftover region toward one corner on every insertion, so each new window is smaller than the last.

The point isn't the definitions, it's the divergence. Drop the same window in the same place and watch which algorithm keeps your master pane stable, which one shrinks your newest window into uselessness, which one you'd actually want to live in.

One window list, four pure functions

The design that makes this trustworthy is boring on purpose. Each algorithm is a pure function of the form (windows) => rects, with zero DOM or canvas dependency. All four consume the same TileWindow[] array, so no pane can quietly drift out of sync with what you actually did; the rendering layer is a thin consumer that just draws whatever rectangles come back.

The other half of the trick is coordinates. Windows and their computed rectangles live in normalized [0, 1] space, not pixels. A layout function doesn't know or care that one pane is 480px wide on a phone and another is 900px on a desktop; it returns fractions, and each pane scales them independently at draw time. That's what lets the same math render into a 2×2 grid on desktop and a stacked column on a phone without a single special case in the algorithms.

The invariant that has to hold

Here's the part I'd steal for any layout code. A tiling algorithm has one job it must never botch: the rectangles it returns have to cover the whole space with no gaps and no overlaps. Eyeballing that across four algorithms and arbitrary window counts is hopeless, so Reflow leans on fast-check property tests. The suite (103 cases in all) fuzzes each algorithm across 0 to 40 windows and asserts every layout tiles the unit square exactly: total area sums to 1, and no two rectangles intersect. If some future refactor makes dwindle leave a one-pixel seam at 37 windows, a test goes red before it ever reaches a pane.

That invariant is why the panes can animate a ~130ms ease-out tween between states without ever flashing a gap: the geometry is guaranteed sound at both ends of every transition.

Try it

Open the live grid; it starts seeded with four windows. Drag any one of them onto another to reorder the shared list, and watch all four panes reflow together. Prefer keys? Tab into a pane, arrow to a window, Enter to pick it up, arrows to move, Enter to drop. Nothing installs and nothing saves; refresh to start over.