The official framework wrappers for SeatLayer reserved seating. Add an interactive seating chart and seat picker to a ticketing app, show live seat availability, and let buyers take temporary holds on the inventory they choose.

Each wrapper is a real component for its framework with a typed imperative handle: the browser selects and holds, and your trusted server books.

Start with the package-specific guide after installation: React, Vue, or Angular. Choose the complete picker when you want SeatLayer's ready buyer flow; choose the seating chart when your application owns the surrounding controls and sends the opaque hold to its trusted checkout server.

SeatLayer reserved-seating platform · Buyer SDK documentation · Buyer seat-map demo · SeatLayer JavaScript seat map SDK · SeatLayer React Native SDK · SeatLayer iOS seat map SDK · SeatLayer Android seat map SDK · SeatLayer Flutter seat map SDK · SeatLayer AI Toolkit

Plain JavaScript and the browser runtime API live in @seatlayer/js, which every wrapper here depends on.

npm install @seatlayer/react   # or @seatlayer/vue, @seatlayer/angular

import { SeatPicker } from '@seatlayer/react';

export function Tickets() {
  return <SeatPicker event="ev_9f3a" style={{ width: '100%', height: 640 }} />;
}

Each package README carries the framework's own quick start, props, events, and imperative handle.

The complete picker can opt into buyer WebMCP seat-selection tools with webMcp: true. This registers describe, find, select, and read-selection tools in compatible browsers. webMcp: { holds: true } separately enables the hold tool; payment and booking remain on the trusted checkout path.

The browser selects and holds inventory. Your trusted backend inspects and books the hold after payment or order validation.

• Never expose a SeatLayer secret key in browser or mobile code.
• Send only the holdId and your normal checkout context to your backend.
• Calculate the charge from server-inspected hold items, not from browser input.
• Reuse your stable order id as bookingRef so a retried booking is idempotent.

Read how the integration works before connecting checkout, and see SECURITY.md for private vulnerability reporting.

This repository contains the reviewable React, Vue, and Angular integration layers. The production renderer, designer, 3D engine, inventory implementation, and runtime build pipeline are proprietary SeatLayer components maintained in a private repository and distributed as compiled npm and CDN artifacts.

The boundary is enforced in CI. A contribution that introduces core renderer, designer, 3D source, or public source maps fails pnpm boundary:check.

That depends on what you need to own. SeatLayer ships a browser runtime plus first-party React, Vue, and Angular components, a matching set of native mobile SDKs, and server SDKs for the booking half — so the same event and inventory can be reused across supported clients while booking stays on your server. If you only need a drawing surface, a generic canvas library is lighter; if you need live availability, temporary holds, and inventory that cannot be double-sold, that is the part SeatLayer provides.

Install the wrapper for your framework — @seatlayer/react, @seatlayer/vue, or @seatlayer/angular. Use @seatlayer/js directly for plain JavaScript or a framework without a first-party wrapper. It provides the shared browser runtime; your application owns the framework lifecycle around it.

Yes. Every package ships its own declarations — no @types/* package to add. React and Vue publish both ESM (dist/index.d.ts) and CommonJS (dist/index.d.cts) declarations; Angular ships an Angular Package Format build with dist/index.d.ts. Types are checked at release by publint and arethetypeswrong.

When a buyer commits to a selection, the SDK reserves that inventory against concurrent buyers for a limited checkout window and returns an opaque holdId. The hold lapses on its own if checkout never completes, and it can be resumed after a checkout navigation or reload. Your server then books the hold with a secret key, which is what prevents double-selling without locking seats forever.

Yes. Nothing in the browser takes a payment. Your backend receives the holdId and priced line items, charges through whatever provider you already use, and books the hold through the server-side checkout flow.

• Follow the buyer SDK installation guide for the full browser integration, options, and events.
• Read the SeatingChart reference for the complete chart API.
• Connect seat holds to secure server-side checkout without putting booking credentials in the browser.
• Run the complete checkout example to connect a buyer hold id to payment and idempotent booking.
• Compare SeatLayer's mobile seat map SDKs when the same event also has to render in native apps.
• Explore the 3D seating chart for the interactive venue view available in the complete picker on supported browsers.
• Try the 53,018-seat stadium demo and read the renderer performance and measurement guide.
• Point AI coding agents at the SeatLayer docs index (llms.txt) for an agent-readable map of the documentation.

pnpm install
pnpm verify

pnpm verify runs the public boundary check, builds every package, typechecks, runs the test suite, and lints the published package manifests.

The wrappers resolve the released @seatlayer/js runtime from npm. Runtime changes are released independently before wrapper dependency versions move. See MIGRATION.md for repository ownership, release order, artifact rules, and the 0.52.x to 0.53.0 migration boundary, and CONTRIBUTING.md before opening a pull request.

The framework wrapper source in this repository is MIT licensed. The separately distributed SeatLayer runtime is not covered by this repository's MIT licence.