@seatlayer/vue

SeatLayer Seat Map SDK for Reserved Seating: React, Vue and Angular

The official React, Vue and Angular components for the SeatLayer seat map SDK. @seatlayer/react, @seatlayer/vue and @seatlayer/angular add an interactive seating chart and seat picker to a ticketing app, show live seat availability, and let buyers take temporary holds on the seats they choose. SeatLayer is seating chart and reserved-seat ticketing software built for venues up to stadium scale.

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 · All live demos · 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

Two-step shape: the buyer picks and holds seats in the client with your public key, then your server confirms the booking with your secret key while your platform keeps checkout and its own payment provider.

Start here: Quickstart · Holds and checkout · React, Vue and Angular guides · SDK catalog · Pricing: $0 entry, 100 free confirmed-sold-seat credits per organization each month, then $0.10 down to $0.05 a credit, and credits never expire.

Scale evidence

Benchmarked on public 100,000-, 150,000- and 200,000-seat venue fixtures on 15 September 2026: 200,000 seats chart-ready in 1.95 s, desktop, local production build. Fixtures, method and run logs: https://github.com/seatlayer/seatlayer-performance. Live 200,000-seat stadium demo: https://app.seatlayer.io/demo/play/century-stadium-200k. This is renderer evidence, not a concurrent-buyer claim.

Packages in this repository

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

Install

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

For plain JavaScript without a framework, install the browser SDK directly:

npm install @seatlayer/js

React quick start

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.

Examples

Two complete applications you can clone and run:

• seatlayer-react-example: a Vite and React app that renders the headless SeatingChart, picks best available seats, takes a hold, and hands the hold id to checkout.
• seatlayer-nextjs-example: the same flow on Next.js 15 App Router, with an /api/hold server route that shows where the trusted half of the integration belongs.

Each one reads an .env.local with your event key and public key, copied from the .env.example in its repository. Deploy buttons are in both READMEs: Vercel and Netlify for the React example, Vercel for the Next.js example.

Choose the buyer surface

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.

Security boundary

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.

Public/private boundary

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.

Frequently asked questions

What is the best JavaScript library for seat maps and seat booking?

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.

Which package should I install?

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.

Are TypeScript types included?

Yes. Every package ships its own declarations, with 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.

How do temporary seat holds work?

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.

Can I use my own payment provider?

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.

Continue your JavaScript integration

• 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 200,000-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.

SeatLayer SDK ecosystem

Development

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.

Licence

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