The Grid Behind Every Seating Chart

The simple trick BookMyShow actually uses to render any theatre's real seating shape: an imaginary grid, a sparse list of seats, and one crop on the frontend.

August 30, 20264 min read5 / 25

The real answer turns out to be something much simpler than either of them.

Reach for the Simple Idea First

There's an old rule in engineering worth keeping close for problems that look hard: KISS, keep it simple. Before reaching for a clever solution, check whether an obvious one already works.

This problem is a good test of that rule.

Imagine One Big, Empty Grid Behind Every Auditorium

Picture an imaginary grid sitting behind every auditorium, 100 rows by 100 columns. At first it's just empty space, like a big sheet of graph paper, representing nothing real yet.

When a theatre admin sets up a real auditorium, they place each real seat onto one cell of that grid. A seat might sit at row 2, column 3. Another at row 2, column 4. Another at row 7, column 10.

Those row and column numbers aren't what a customer sees printed on the seat. They're just coordinates on the virtual grid, nothing more.

What the Backend Actually Stores

This is the whole trick, and it's almost anticlimactic: the backend just stores a list of seats, and each seat has a row number and a column number. That's it. No image. No layout diagram. No shape data of any kind.

An Auditorium holds a list of Seat objects. Each Seat just holds its own row and column.

When the frontend asks for an auditorium's seats, the backend hands back exactly that: a flat list, something like { row: 2, col: 3 }, { row: 2, col: 4 }, { row: 2, col: 8 }, and so on. Nothing about shape. Just coordinates.

The Frontend Does the Actual Drawing

Here's where it gets clever. The frontend takes that flat list and rebuilds the same grid on its own side, with seats marked in the same cells.

Then it runs one simple crop:

  1. Find the topmost row that has a seat in it. Delete every row above it.
  2. Find the leftmost column that has a seat in it. Delete every column to its left.
  3. Find the bottommost row that has a seat in it. Delete every row below it.
  4. Find the rightmost column that has a seat in it. Delete every column to its right.
  5. Draw whatever is left.

That's the entire algorithm. Say the topmost filled row is 2, the leftmost filled column is 3, the bottommost filled row is 7, and the rightmost filled column is 10.

Everything outside that rectangle disappears. Only the box from row 2 to row 7, column 3 to column 10, gets drawn.

A sparse grid of seat coordinates gets cropped down to the smallest rectangle that contains all of them, with any empty cells inside that rectangle staying empty on purpose ExpandA sparse grid of seat coordinates gets cropped down to the smallest rectangle that contains all of them, with any empty cells inside that rectangle staying empty on purpose

The Empty Gaps You've Actually Seen Aren't a Bug

Here's the payoff, something you've probably already seen on BookMyShow without knowing why: a seating chart sometimes shows a blank gap mid-row, even though no seat was ever placed there.

That gap is real. It's a cell inside the cropped rectangle that never had a seat in it. It survives the crop because it sits between two filled cells, not outside the outer boundary.

Those gaps usually mean something too: a staircase, or extra spacing around a seat with a clean view of the screen. The backend never has to explain why the gap exists. It just never places a seat there, and the frontend's crop naturally leaves the space empty.

Why Row and Column Together, Not Just a List Per Row

One more idea worth ruling out: why not just group seats by row, without tracking each one's column?

Without a column number, there's no way to tell the frontend that seat three in one row lines up under seat five in the row above it. There's no way to show a two-seat gap in the middle of a row either. Row and column together are what let two different rows line up correctly, and what let a gap sit exactly where it belongs.

The Same Trick Is Running Your Screen Right Now

If this feels like an unusual idea, it isn't new. It's exactly how the screen in front of you works.

A display is just a big grid of tiny dots, pixels. Every letter, every curve, every image you've ever seen on a screen is just some of those dots colored in and the rest left alone.

Nobody draws a curve directly. The grid is what makes any shape possible, one dot at a time.

The seat matrix does the same job, just at a much coarser resolution: a big, boring, empty grid, with just enough of it filled in to represent one specific auditorium.