The official SeatLayer SDKs — a framework-agnostic core plus per-framework wrappers. Render an interactive seat picker, let buyers select and hold seats in the browser, then book them from your server. Docs: https://docs.seatlayer.io
| Package | What it is | Use it when |
|---|---|---|
@seatlayer/core |
The shared rendering engine (Konva, no framework) | You almost never depend on this directly — it's the shared brain. |
@seatlayer/js |
The vanilla SDK (SeatingChart class) |
Plain HTML, or any framework via its lifecycle hooks (Vue, Svelte, Angular…). |
@seatlayer/react |
React component wrapper | React apps — the flagship wrapper. |
New frameworks are added as thin wrappers over @seatlayer/js as needed
(@seatlayer/vue, @seatlayer/svelte, @seatlayer/react-native, …).
// React
import { SeatingChart } from '@seatlayer/react';
<SeatingChart
event="ev_9f3a"
onHold={({ holdId }) => bookOnYourServer(holdId)}
/>;// Plain JS / any framework
import { SeatingChart } from '@seatlayer/js';
const chart = new SeatingChart({ container: '#chart', event: 'ev_9f3a' });
await chart.render();pnpm install
pnpm sync:core # pull the latest engine from the main app (see below)
pnpm build # build every package
pnpm typecheckThe rendering engine is currently shared with the main SeatLayer app. Until the app
migrates to consume @seatlayer/core directly, packages/core/src/{core,engine,picker}
is synced byte-for-byte from the app with:
pnpm sync:core # assumes ../seatmap
SEATMAP_REPO=/path/to/seatmap pnpm sync:core # or point at itDo not hand-edit files under packages/core/src/core, .../engine, or .../picker —
edit them in the app and re-sync. packages/core/src/index.ts (the barrel) is owned here.
npm publish is a manual, credentialed step (run by a maintainer with npm access).
Publish order respects the dependency graph: core → js → react.