The SeatLayer web SDK puts a live seat map for one of your events on a web page. The buyer picks seats on the map, SeatLayer holds them for a limited time, and your checkout takes over from there. The map shows real availability, updates while other buyers book, and works on desktop and phone browsers. A 3D view of the venue is offered where the browser supports WebGL2.
All four packages share the same inventory, selection, hold, and checkout
rules. @seatlayer/js is the core; the React, Vue, and Angular packages wrap
it for their framework’s lifecycle. The current release of all four is
0.106.2 (checked 17 October 2026). The SDK catalog
always lists the latest verified versions. To compare the web SDKs with
native app SDKs, server SDKs, and REST, start at
Choose an SDK or API.
Choose a package
| Application | Package | What it provides | Guide |
|---|---|---|---|
| Plain HTML, JavaScript, or TypeScript | @seatlayer/js |
SeatPicker, SeatingChart, PerformanceGroupPicker, SeasonPicker, SeatManager |
Install the Buyer SDK |
| React or Next.js | @seatlayer/react |
SeatPicker, SeatingChart, and SeasonPicker components with refs |
React SDK |
| Vue | @seatlayer/vue |
SeatingChart and SeasonPicker components |
Vue SDK |
| Angular | @seatlayer/angular |
SeatLayerSeatingChartComponent and SeatLayerSeasonPickerComponent |
Angular SDK |
In Vue and Angular, use @seatlayer/js directly for the complete
SeatPicker flow. Without a build step, load the hosted script from the CDN
as shown on the install page.
Minimal example
Give the map a container with a real height, then render the picker with your event key and your account’s public key:
npm install @seatlayer/js<div id="picker" style="width: 100%; height: 640px"></div>import { SeatPicker } from "@seatlayer/js";
const picker = new SeatPicker({
container: "#picker",
event: "<YOUR_EVENT_KEY>",
publicKey: "<YOUR_PUBLIC_KEY>",
onCheckout: (_hold, _seats, handoff) => {
// Send the opaque hold id to your server, which books the seats.
beginCheckout(handoff.holdId);
},
});
await picker.render();The public key only works from browser origins you registered for the account. For presale, member, or partner inventory, pass a buyer access token from your backend instead; see install for both options.
Choose a buyer surface
Ready-made SeatPicker
Map, seat confirmation, prices, cart, hold timer, and checkout handoff in one component. Start here. See the SeatPicker reference.
Composable SeatingChart
The map alone. Your application draws the cart, selection controls, and hold workflow. See the SeatingChart reference.
To sell several dates as one package, use Performance Groups for a fixed run of dates or the Season picker for a renewable season.
Keep secrets on the server
Never put a secret key in browser code. The web SDK creates or resumes a temporary hold and hands its opaque identity to your backend. Your backend inspects the held items, calculates the charge, and books through a server SDK or the REST API.
Next steps
- Holds and checkout before you connect a production order flow
- Add a seat map to a React app, a step-by-step walkthrough
- 3D buyer view for the venue view and view from a seat
- Native app SDKs if you are building an iOS or Android app