1. Knowledge base
  2. renderer

Initializing SDK

The Booking Renderer SDK (@seatmap.pro/renderer) is the embeddable seat picker that runs on your selling page. It connects to the Booking API, renders the venue layout using WebGL, and fires callbacks when customers select or deselect seats.

Prerequisites

  • Node.js 18+ (LTS recommended)
  • npm, yarn, or pnpm package manager
  • A published schema and event created via the Getting Started guide
  • Your Public API Key from the Editor Admin panel (Organization Settings)

Step 1: Install the package

npm install @seatmap.pro/renderer

yarn add @seatmap.pro/renderer

pnpm add @seatmap.pro/renderer

Package details: @seatmap.pro/renderer on npm

Step 2: Add a container element

The renderer mounts into a DOM element on your page. Give it explicit dimensions:

<div id="seatmap-root" style="width: 100%; height: 600px;"></div>

The renderer fills the container completely. Use CSS to control the chart size within your page layout.

Step 3: Initialize the renderer

import { SeatmapBookingRenderer } from '@seatmap.pro/renderer';

const container = document.getElementById('seatmap-root')!;

const renderer = new SeatmapBookingRenderer(container, {
  publicKey: 'YOUR_PUBLIC_API_KEY',
  onSeatSelect: (seat) => {
    console.log('selected', seat);
  },
  onSeatDeselect: (seat) => {
    console.log('deselected', seat);
  },
});

await renderer.loadEvent('YOUR_EVENT_ID');

Required values:

  • publicKey – from Organization Settings in the Editor Admin panel
  • eventId – returned when you create an event via the Booking API v2 or the Events Hub UI

Step 4: Handle seat selection

The onSeatSelect callback fires each time a customer clicks an available seat. Use it to sync the selection with your cart or backend.

For production ticketing, the recommended pattern is lock-per-click: lock the seat in your backend immediately on selection, and unlock on deselection.

const renderer = new SeatmapBookingRenderer(container, {
  publicKey: 'YOUR_PUBLIC_API_KEY',
  onSeatSelect: async (seat) => {
    await fetch('/api/cart/lock', {
      method: 'POST',
      body: JSON.stringify({ seatId: seat.compositeKey }),
    });
  },
  onSeatDeselect: async (seat) => {
    await fetch('/api/cart/unlock', {
      method: 'POST',
      body: JSON.stringify({ seatId: seat.compositeKey }),
    });
  },
});

For the full callback and settings reference, see the Renderer Spec.

Try it live

Open the Renderer Playground to experiment with the SDK interactively – no setup required.

A complete working example is also available on CodePen.

Troubleshooting

Container not visible – the renderer needs a container with non-zero width and height. If nothing appears, check that the container element has explicit CSS dimensions.

CORS errors – the renderer fetches data from booking.seatmap.pro. If you use a proxy or custom domain, ensure your server forwards requests to the Booking API with the correct Origin header.

No seats displayed – verify that the event has prices assigned to seats. The renderer only shows seats with at least one price assignment.

Learn more