Official JavaScript and React SDKs for SeatLayer reserved seating. Embed the complete buyer picker or a headless seating chart, hold inventory in the browser, and complete the booking from your trusted server.

Website · Developer docs · Demo hub · Try the buyer experience · AI Toolkit

Most buyer integrations should start with SeatPicker from @seatlayer/js or @seatlayer/react. Use SeatingChart only when your product intentionally owns the surrounding selection, pricing, confirmation, and hold UI.

npm install @seatlayer/react

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

export function Tickets() {
  return (
    <SeatPicker
      event="ev_9f3a"
      style={{ width: '100%', height: 640 }}
      onCheckout={(_, __, handoff) => {
        beginCheckoutOnYourServer(handoff.holdId);
      }}
    />
  );
}

Plain JavaScript:

npm install @seatlayer/js

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

const picker = new SeatPicker({
  container: '#picker',
  event: 'ev_9f3a',
  onCheckout: (_, __, handoff) => {
    beginCheckoutOnYourServer(handoff.holdId);
  },
});

await picker.render();

The embed container needs an explicit usable height. See the installation guide for hosted script, browser ESM, npm, React, and responsive-container examples.

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

• Never expose a SeatLayer secret key in browser or mobile code.
• Calculate the charge from server-inspected hold items, not client input.
• Reuse your stable order id as bookingRef for safe retries.
• Treat 409 inventory conflicts and expired holds as expected recovery paths.

Read how the integration works before building checkout.

See the mobile SDK guide for the current installation and release status.

• Embedding recipes
• Complete checkout example
• Live demo hub
• SeatLayer AI Toolkit
• React Native SDK
• Agent-readable docs index

pnpm install
pnpm sync:core
pnpm build
pnpm typecheck
pnpm test

The rendering engine is synced from SeatLayer's private platform source. Do not hand-edit packages/core/src/{core,engine,picker}; update the platform source and run pnpm sync:core. The public barrel in packages/core/src/index.ts is owned here.

All npm packages and CDN channels use one version. Releases are created from a vX.Y.Z tag only after pnpm release:prep passes. The GitHub workflow builds, uploads and verifies the immutable CDN release, publishes all npm packages with provenance, and then promotes the compatible CDN alias.

Do not run npm publish manually. Follow RELEASING.md.

MIT © SeatLayer