Canvas

Every hover, click, and zoom is an event.

Subscribe to seat, block, object, section, floor, and zoom events with one listener API, and get your own seat metadata echoed back in every payload.

Explore highlights

Sound familiar?

A map that won't talk

DOM scraping a widget for what the user clicked is fragile archaeology. A real events API reports every interaction.

Polling for state

Reading selection out of a timeout loop is a race condition wearing a hat. Events push the moment things change.

Payloads without context

A click that says 'seat 42' and nothing else makes you re-derive everything. custom_data echoes your ids, prices, and refs.

The map is a component, not a black box

01One subscribe calladdEventListener with plain event names, seat_click, zoom_level_change, floor changes, and friends.
02The full surfaceSeats, blocks, objects, sections, floors, zoom levels, and ready. Every interaction reports.
03Framework-native propsReact gets onSeatClick and friends; Vue emits @seat-click, same events, idiomatic shape.
04Metadata in the payloadYour custom_data comes back with every event. The cart integration writes itself.
05Hover-level granularityMouse enter and leave on seats power tooltips and previews without guesswork.
06Lifecycle awareREADY tells you when the map is truly interactive, no racing the render.

Wire it in minutes

seatmap.ts
seatmap.addEventListener("ready", () => {
  console.log("map is live");
});
 
seatmap.addEventListener("seat_click", (seat) => {
  // your metadata echoes back on every event
  cart.preview({
    priceId: seat.custom_data.priceId,
    label: seat.label,
  });
});
 
seatmap.addEventListener("zoom_level_change", (level) => {
  breadcrumbs.sync(level); // "venue" | "block" | "seat"
});
TypeScript · seatmap-canvasseat_click · zoom_level_change

Listen to the map

Events with your metadata, live in the demo.