How to build a seating chart in JavaScript and make it safe to sell from

01 · The prototype

Can you build a seating chart with plain JavaScript?

Yes, for a prototype. Every available seat is a button with a stable ID and an aria-pressed state, a Set holds the current selection, and sold seats stay disabled. Select a few seats below, then read exactly what that demo does and does not prove.

// <button data-seat="A-1" aria-pressed="false">A1</button>// <p id="summary" aria-live="polite"></p>const summary = document.querySelector('#summary');const selected = new Set();document.querySelectorAll('[data-seat]').forEach((seat) => {  seat.addEventListener('click', () => {    const id = seat.dataset.seat;    const active = !selected.has(id);    active ? selected.add(id) : selected.delete(id);    seat.setAttribute('aria-pressed', String(active));    renderSummary([...selected]);  });});function renderSummary(ids) {  summary.textContent = ids.length    ? `Selected locally: ${ids.join(', ')}`    : 'No seats selected.';}

That selected set is buyer intent, not inventory. Nothing here reserves a seat, so never label a locally selected seat as reserved. Everything above it is progressive enhancement: the markup ships as plain buttons, JavaScript upgrades them, and a reader without JavaScript still sees the seat labels, the sold states and the rest of this guide.

02 · React

How do you build a seating chart in React?

Keep the same contract: one button per seat, a stable id, aria-pressed for the selected state, and the selection in a Set. Hold that Set in useState and replace it on every toggle so React sees a new reference. Mutating the existing Set will not re-render.

import { useState } from 'react';export function SeatingChart({ seats }) {  const [selected, setSelected] = useState(new Set());  const toggle = (id) => setSelected((prev) => {    const next = new Set(prev);    next.has(id) ? next.delete(id) : next.add(id);    return next;  });  return seats.map((seat) => (    <button key={seat.id} type="button" disabled={seat.sold}      aria-pressed={selected.has(seat.id)}      onClick={() => toggle(seat.id)}>{seat.label}</button>  ));}

This component is the React equivalent of the vanilla snippet: it renders seats and tracks intent, nothing more. It still has no inventory, no hold and no expiry, so two browsers can each “select” seat C-3.

03 · Rendering

DOM, SVG, Canvas or WebGL for a seat map?

A renderer solves pixels, hit testing and navigation. It never decides who owns a seat when buyers compete. Choose by interaction cost and by how much accessibility work you are willing to rebuild. Whatever you pick, the accessible name, the focus order and the selected state have to survive it.

Pick a layer to see what lands in the page and what you still have to build.

Primary implementation references reviewed 10 Aug 2026: Konva’s React canvas reservation example, an open React/Konva seating editor, and the package documentation surfaced for react-seat-charts, seat-picker, and @seatsio/seatsio-react. Package status and APIs can change; confirm them at evaluation time.

04 · The production checklist

What does a seating chart need before you can sell from it?

The browser can ask for a seat. Only a server can decide who gets it. Six systems sit around the renderer. Miss one and the failure is not cosmetic: a seat sold twice, a hold that never releases, or an order your server cannot prove it was allowed to take.

05 · Concurrency

How do I stop two buyers taking the same seat?

Not in the browser. A client may optimistically highlight a seat, but only the server can decide who gets it: selection asks for a hold, exactly one buyer gets the seat, and every other open map is told. Design the browser for the conflict response and not only the happy path: take the lost seat out of the map, keep the rest of the selection intact, and let the buyer carry on choosing.

1. Browser01Seat selectedselection only
2. Seat map service02Hold requestedone buyer gets the seat
3. Every buyer03Held or takenall open maps update
4. Your server04Booked or releasedconfirmed with your secret key and a booking reference

The diagram explains the contract, not a universal throughput claim. SeatLayer’s released evidence includes one scoped 30-way race for one contested seat: one hold succeeded and the other requests received conflicts.

06 · The decision

Should you build a seating chart or use a library?

Build the parts that differentiate your product. DIY is a fair choice when the scope stays narrow; evaluate a maintained seating layer when seating itself is becoming a programme. The honest test is whether the seat map is the thing your customers pay for, or the thing standing between them and what they pay for.

If you evaluate one, the SeatLayer packages on npm are @seatlayer/js for plain JavaScript and TypeScript, plus @seatlayer/react, @seatlayer/vue and @seatlayer/angular.