Build with Seatmap.pro
TypeScript SDK on npm, REST Booking API v2, code samples, a live playground, and a public demo key. Pick the surface that fits your stack — every path lands on a working integration in a day or two.
Five ways to start
Pick the surface that matches how you build. All five point at the same TypeScript SDK and Booking API v2.
Docs
Full TypeScript SDK reference, Booking API v2 schema, and the AI-friendly integration guide that AI coding assistants can ingest in one read.
Open the docsExamples Coming in SEAT-977
Working integrations on GitHub — React + Vite, Next.js App Router, vanilla JavaScript, and server-side Node. Clone, swap in your demo key, and run.
Browse examplesnpm
@seatmap.pro/renderer publishes a typed Booking Renderer SDK; @seatmap/renderer-types ships the TypeScript types separately for tooling-only consumers.
npm installPlayground
Live in-browser playground at booking.seatmap.pro — pick a venue preset, change pricing tiers, and watch the renderer paint 10,000+ seats at 60 fps.
Open playgroundEmbed snippet Coming in SEAT-977
Copy a single iframe snippet keyed with the public demo API key and drop it into any page to test the renderer end-to-end before signing up.
Get the snippet60-second quickstart
Install the SDK and mount a renderer in your page. Swap `YOUR_API_KEY` for the public demo key (in SEAT-977) or your own private key.
import { SeatmapBookingRenderer } from '@seatmap.pro/renderer';
const renderer = new SeatmapBookingRenderer({
publicKey: 'YOUR_API_KEY',
container: document.getElementById('seatmap'),
});
renderer.loadEvent('demo-event-id');
renderer.on('seatSelected', (seat) => {
console.log(`Selected: ${seat.sectionName} / Row ${seat.rowName} / Seat ${seat.seatName}`);
});
Where to next?
Developer FAQ
How developers ship a Seatmap.pro integration without surprises.
How do I embed a seating chart in my site?
Install the @seatmap.pro/renderer npm package, mount it on any container element with your public API key, and call loadEvent() with an event ID. The renderer handles WebGL rendering, real-time availability sync, and seat-selection callbacks. Embedding works in React, Vue, Angular, Svelte, or vanilla JavaScript with a few lines of code.
Is there an SDK for Seatmap.pro?
Yes. @seatmap.pro/renderer is a TypeScript SDK published on npm. It includes the Booking Renderer (for ticket-buyer interfaces) and the Admin Renderer (for backoffice seat-state management). Types-only consumers can install @seatmap/renderer-types separately. Both packages are framework-agnostic.
Where is the API reference?
The Booking API v2 reference lives at /knowledge-base/api/v2/ — it covers events, pricing, the lock-confirm flow, webhooks, and real-time availability. The TypeScript SDK reference is at /knowledge-base/renderer/spec/. An AI-friendly single-document guide is at /ai-integration-complete.md, designed to feed directly to Claude or ChatGPT.
Can I test the renderer without signing up?
Yes. The live playground at booking.seatmap.pro/playground renders sample venues with no signup, and the public demo API key (shipped in SEAT-977) will let you mount the renderer on your own page against a shared demo event. For production traffic, request a private key via /demo/.
What frameworks are supported?
The renderer is framework-agnostic and mounts on any DOM container, so React, Vue, Angular, Svelte, Lit, and vanilla JavaScript all work. We publish examples for React + Vite, Next.js App Router, vanilla JavaScript, and server-side Node — the SSR examples show how to hydrate the renderer after the server-rendered shell.
How long does an integration take?
A working renderer-on-page integration is 60 seconds with the snippet. A full lock-confirm booking flow wired into a ticketing backend is typically 2-5 working days. The TypeScript types and OpenAPI-described REST API mean AI coding assistants can scaffold most of the integration from the docs.
Ready to Get Started?
Request a demo, and see Seatmap Pro in action. Map out your success with a secure, user-friendly and versatile solution for ticketing platforms.
Request a Demo