Design the venue.Price every seat.Sell from one link.

import { useState } from "react";
import { createLayout, generateStraightRows } from "@openseat/core";
import { createRestAdapter } from "@openseat/adapter-rest";
import { BookingMap, useInventory } from "@openseat/react";

const layout = createLayout({ id: "hall", name: "Main hall", width: 1000, height: 800 });
layout.objects = generateStraightRows({
  idPrefix: "stalls",
  rowCount: 10,
  seatsPerRow: 20,
  origin: { x: 100, y: 100 },
  seatSpacing: 28,
  rowSpacing: 32,
  aisleAfter: [10],
}).objects;

const api = createRestAdapter({ baseUrl: "https://api.example.com" });

export function Venue() {
  const { statuses } = useInventory(api, "show-2026-11-20");
  const [selection, setSelection] = useState<readonly string[]>([]);
  return (
    <BookingMap
      layout={layout}
      statuses={statuses}
      selectedSeatIds={selection}
      onSelectionChange={(next) => setSelection(next)}
      rules={{ maxSeats: 8, preventOrphans: true }}
    />
  );
}

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}
        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" }],
});

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);