Build with the OpenSeat SDK

import { useState } from "react";
import type { LayoutDocument } from "@openseat/core";
import { createRestAdapter } from "@openseat/adapter-rest";
import { BookingMap, useHold, useInventory } from "@openseat/react";

// Create the adapter once (module scope or useState), never inline in render.
const api = createRestAdapter({
  baseUrl: `${location.origin}/api`,
  credentials: "same-origin",
  realtime: { kind: "sse", url: (id) => `${location.origin}/api/v1/events/${encodeURIComponent(id)}/stream` },
});

export function Tickets({ layout, eventId }: { layout: LayoutDocument; eventId: string }) {
  const { statuses } = useInventory(api, eventId); // live over server-sent events
  const hold = useHold(api, eventId, { maxTickets: 6, layout });
  const [selection, setSelection] = useState<readonly string[]>([]);

  return (
    <>
      <BookingMap
        layout={layout}
        statuses={statuses}
        selectedSeatIds={selection}
        onSelectionChange={(next) => setSelection(next)}
        rules={{ maxSeats: 6, preventOrphans: true }}
        categoryPrices={{ vip: "₹1,499", stalls: "₹499", balcony: "₹299" }}
      />
      <button disabled={!hold.canHold || selection.length === 0} onClick={() => hold.hold(selection)}>
        Hold {selection.length} seats
      </button>
      {hold.state.status === "held" ? <p>Held for {Math.ceil(hold.remainingMs / 1000)} s</p> : null}
    </>
  );
}

import { useState } from "react";
import type { LayoutDocument } from "@openseat/core";
import { createRestAdapter } from "@openseat/adapter-rest";
import { LayoutEditor } from "@openseat/editor";
import "@openseat/editor/styles.css";

const api = createRestAdapter({
  baseUrl: "https://tickets.example.com/api",
  credentials: "include", // staff cookie session
  sendManifest: true, // PUT body: { layout, manifest }
});

export function OrganiserPage({ layout }: { layout: LayoutDocument }) {
  const [prices, setPrices] = useState<Record<string, string>>({ vip: "₹1,499", general: "₹299" });
  return (
    <div style={{ height: "100dvh" }}>
      <LayoutEditor
        initialLayout={layout}
        // Sends If-Match: "<baseRevision>". A 409/412 resolves as { status: "conflict", remote },
        // and the editor offers "Load their version" or "Overwrite with mine" (force: true).
        onSave={(request) => api.saveLayout(request)}
        categoryPrices={prices}
        onCategoryPricesChange={setPrices}
      />
    </div>
  );
}

import { createLayout, createBlockSection, updateSectionSeating, validateLayout } from "@openseat/core";

const empty = createLayout({
  id: "hall",
  name: "Main hall",
  width: 1200,
  height: 800,
  categories: [{ id: "general", name: "General", colour: "#2563EB" }], // "colour", not "color"
});

const { layout, sectionId } = createBlockSection(empty, {
  position: { x: 600, y: 400 },
  categoryId: "general",
  seating: {
    kind: "block",
    rows: 10,
    seatsPerRow: 20,
    seatSpacing: 24,
    rowSpacing: 30,
    curvature: 20, // -100..100; > 0 arcs around the stage in front
    align: "center",
    aisles: [10],
    aisleWidth: 30,
    seatShape: { kind: "circle", radius: 9 },
    seatLabeling: { format: "numeric", start: 1, step: 1, direction: "ltr" },
  },
});

// Change a parameter later: seats that still have a slot keep their IDs.
const { layout: bigger, report } = updateSectionSeating(layout, sectionId, { rows: 14, curvature: 35 });
console.log(validateLayout(bigger).valid, report.removedSeatIds); // true []

import { arenaPreset, createArenaLayout, estimateArenaSeats } from "@openseat/core";

const options = { ...arenaPreset("hockey"), idPrefix: "a", center: { x: 0, y: 0 } };
console.log(estimateArenaSeats(options)); // 9758, exact and effectively free

const arena = createArenaLayout({ ...options, layoutId: "arena" });
// Presets: "hockey" | "basketball" | "concert-in-round" | "football"

// A separate, lazy entry point: buyer pages never load it.
const { buildTemplate, searchTemplates } = await import("@openseat/core/templates");

const [hit] = searchTemplates("farewell banquet", { limit: 1 }); // social.banquet-hall.rounds-dance

const { layout, summary } = buildTemplate("performance.auditorium.annual-day", null, {
  name: "Annual Day 2026",
  targetCapacity: 400, // fits rows to the audience
  zonesOnly: false, // true: "Sections only (no seats)", sold by quantity
});
summary.totalCapacity; // 408
summary.notes; // every clamp, in plain words

import { writeFileSync } from "node:fs";
import { buildTemplate } from "@openseat/core/templates";
import { layoutToSvg } from "@openseat/renderer-konva"; // not @openseat/core

const { layout } = buildTemplate("performance.auditorium.annual-day", null, { name: "Annual Day 2026" });
writeFileSync("annual-day.svg", layoutToSvg(layout)); // standalone, deterministic, no canvas or DOM