All SeatLayer web SDKs use the same inventory, selection, hold, and checkout contracts. Choose the package that matches your application framework, then choose whether SeatLayer or your application owns the buyer controls around the map.
Choose a package
| Application | Guide | Use it for |
|---|---|---|
| JavaScript or TypeScript | Install the Buyer SDK | Direct browser integration with SeatPicker or SeatingChart |
| React or Next.js | React SDK | Typed React components and framework lifecycle integration |
| Vue | Vue SDK | A Vue component with typed events and refs |
| Angular | Angular SDK | An Angular component with typed inputs and outputs |
For an end-to-end React walkthrough, use Add a seat map to a React app.
Choose a buyer surface
Ready-made SeatPicker
Use the SeatPicker reference when you want the standard selection summary, confirmation, and checkout handoff.
Composable SeatingChart
Use the SeatingChart reference when your application owns the cart, selection controls, and hold workflow.
Preserve the browser/server boundary
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 authoritative hold items, calculates the charge, and books through a server SDK or the REST API.
Continue with holds and checkout before connecting a production order flow.