Seatmap Canvas

// est. 2016 · mit licensed · retired in honor

seatmap-canvas, our veteran

Released in 2016 and frozen in place, yet still quietly doing its job in production all over the world. Long may it run.

Explore Seatmap Canvas NextNew versionView on GitHubRead the docs
  • MIT license
  • @alisaitteke/seatmap-canvas
  • D3.js · SVG
  • TypeScript
seatmap.io/demo
The original seatmap-canvas v1 demo, zoomed into its seats
the original demo, circa 2016, still live at /demo

Frozen, not forgotten

v1 is done, deliberately. Here is what that means for you.

Feature-frozen

No new features, no new releases: what is on npm is final. What you integrate today behaves the same tomorrow.

MIT, forever

The license never changes. Self-host it, ship it in anything you build, owe us nothing: no per-seat fees, ever.

Same addresses

Docs, examples and the demo keep their long-standing URLs on seatmap.io, so cited links and bookmarks keep working.

Up and running in minutes

Bring your own venue JSON and backend: v1 is the renderer and selection widget, not a ticketing stack.

  1. Install

    npm install @alisaitteke/seatmap-canvas adds the renderer and the TypeScript types.

  2. Feed it your venue

    Pass blocks and seats as plain JSON via replaceData(). Inventory, pricing and holds stay in your backend.

  3. Catch the clicks

    SEAT.CLICK fires on every tap; toggle selection, then read getSelectedSeats() at checkout.

Official wrappers

  • Vanilla JS
  • React
  • Vue 3
  • Next.js
  • Angular
venue-picker.tsx
import { SeatmapCanvas } from "@alisaitteke/seatmap-canvas/react";
import "@alisaitteke/seatmap-canvas/dist/seatmap.canvas.css";
 
export function VenuePicker({ blocks }) {
  return (
    <SeatmapCanvas
      options={{
        legend: true,
        style: { seat: { hover: "#8fe100", selected: "#8fe100" } },
      }}
      data={blocks}
      onSeatClick={(seat) =>
        seat.isSelected() ? seat.unSelect() : seat.select()
      }
    />
  );
}
React · @alisaitteke/seatmap-canvasSEAT.CLICK

Don't want to hand-write venue JSON? Seatmap Studio is the visual chart editor of the maintained platform.

See Seatmap Studio →

The original demo, still live

The same playground the community has used for years: zoom from the venue down to the seat, try shapes and selections.

seatmap.io/demoseatmap-canvas v1 demo interface with two seating blocks and a selection panel
The v1 playground: untouched, unauthenticated, free to try. Open the live demo →

Documentation and source

Compare

What seatmap-canvas v1 can hold, and what Seatmap Canvas Next opens
seatmap-canvas v1Seatmap Canvas Next
How far it can goA hall of a few thousand seatsA stadium bowl that still pans and zooms
Above and belowOne floorNine floors — balcony over stalls, cabin over cabin
What the night can holdSeats in blocksSeats, standing room, booths, banquet tables
The ground it can sit onAn indoor planA theatre, a festival field, a racetrack on a map
The path to a seatVenue, then block, then the seatFrom the map, through the floors, down to the seat
How the venue is bornYou write it in JSONYou draw it in Studio. The map plays it back.
What a seat can sayA title and a notePrice, category, a picture — the offer on the seat
When the house fillsYou send a new JSONSold and held land on the map as they happen
Without a pointer—Walk the map with a keyboard

Technical

Engine, API, and packaging: seatmap-canvas v1 and Seatmap Canvas Next
seatmap-canvas v1Seatmap Canvas Next
RendererD3.js · SVGWebGL2
Chart formatblocks[] + seats[]Studio ChartDocument (blocks, objects, floors, geo)
Selection APISEAT.CLICK, select / unselectSame host-toggle events
Seat statusHost rewrites JSONsetSeatStatus, applyObjectAvailability
TooltipTitle / noteresolveTooltipOffer
Framework packagesReact, Vue 3, Next.js, AngularVanilla JS
Pretix parserBuilt-inNot shipped
LicenseMITCommercial
Installnpm i @alisaitteke/seatmap-canvasLicensed bundle, not on npm
Explore Seatmap Canvas Next