See how OpenSeat works, live.

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

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 TicketPage({ layout, eventId }: { layout: LayoutDocument; eventId: string }) {
  const { statuses } = useInventory(api, eventId); // live availability
  const hold = useHold(api, eventId, { maxTickets: 6, layout }); // server-timed countdown
  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" }}
      renderActions={({ valid }) =>
        hold.state.status === "held" ? (
          // after your payment flow succeeds:
          <button onClick={() => hold.confirm("payment-ref-from-your-gateway")}>Confirm booking</button>
        ) : (
          <button disabled={!valid || !hold.canHold} onClick={() => hold.hold(selection)}>
            Hold seats
          </button>
        )
      }
    />
  );
}

import { createInMemoryBookingAdapter } from "@openseat/booking";
import { useHold, useInventory } from "@openseat/react";

// For demos and tests only: the inventory lives in this tab.
const demo = createInMemoryBookingAdapter({
  eventId: "demo",
  layout,
  holdMs: 10 * 60_000, // the 10:00 countdown
  maxTicketsPerHold: 6,
});

// "Another buyer" holds two seats: every subscribed map updates at once.
// Use the layout's seat ids ("sec-stalls:r5:s4" is Stalls, row E, seat 4 in this sample).
demo.setStatus(["sec-stalls:r5:s4", "sec-stalls:r5:s5"], "held");

// In the component: the same hooks as with a real backend.
const { statuses } = useInventory(demo.adapter, "demo");
const hold = useHold(demo.adapter, "demo", { maxTickets: 6, layout });