---
title: "Web SDKs"
description: "Choose the SeatLayer JavaScript, React, Vue, or Angular SDK and decide between the complete SeatPicker flow and a custom SeatingChart experience."
---

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.

<Aside type="note" title="Install from current release evidence">
  Use the [SDK catalog](/sdk-catalog.json) for current package and release
  status. The linked framework guide remains the source for exact imports,
  runtime requirements, and supported exports.
</Aside>

## Choose a package

| Application | Guide | Use it for |
|---|---|---|
| JavaScript or TypeScript | [Install the Buyer SDK](/buyer-sdk/install/) | Direct browser integration with `SeatPicker` or `SeatingChart` |
| React or Next.js | [React SDK](/buyer-sdk/react/) | Typed React components and framework lifecycle integration |
| Vue | [Vue SDK](/buyer-sdk/vue/) | A Vue component with typed events and refs |
| Angular | [Angular SDK](/buyer-sdk/angular/) | An Angular component with typed inputs and outputs |

For an end-to-end React walkthrough, use
[Add a seat map to a React app](/buyer-sdk/react-seating-chart/).

## Choose a buyer surface

<CardGrid>
  <Card title="Ready-made SeatPicker" icon="ph:cursor-click">
    Use the [SeatPicker reference](/buyer-sdk/seat-picker/) when you want the
    standard selection summary, confirmation, and checkout handoff.
  </Card>
  <Card title="Composable SeatingChart" icon="ph:layout">
    Use the [SeatingChart reference](/buyer-sdk/seating-chart/) when your
    application owns the cart, selection controls, and hold workflow.
  </Card>
</CardGrid>

## 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](/server-sdk/) or the [REST API](/server-api/).

Continue with [holds and checkout](/buyer-sdk/holds-and-checkout/) before
connecting a production order flow.