Designer SDK API Reference

// Load a previously saved layout
const savedLayout = await fetchFromYourDatabase(layoutId);
designer.loadLayout(savedLayout);

// Trigger export callback
designer.getLayout();

// Enable read-only mode
designer.setReadOnly(true);

// Disable read-only mode
designer.setReadOnly(false);

designer.clearLayout();

if (designer.hasChanges()) {
  alert('You have unsaved changes!');
}

const lastExport = designer.getCurrentLayout();

if (designer.isDesignerReady()) {
  designer.loadLayout(data);
}

designer.destroy();

onReady: function() {
  console.log('Designer is ready');
  // Now safe to call loadLayout(), setReadOnly(), etc.
}

onLayoutLoaded: function(layoutData) {
  console.log('Layout loaded with', layoutData.totals.totalSeats, 'seats');
}

onExport: async function(layoutData) {
  // Save to your database
  await fetch('/api/layouts', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(layoutData)
  });

  alert('Layout saved!');
}

onLayoutChanged: function(data) {
  if (data.hasChanges) {
    document.title = '* Venue Editor'; // Add asterisk for unsaved
  } else {
    document.title = 'Venue Editor';
  }
}

onError: function(error) {
  console.error('Designer error:', error);
  alert('An error occurred: ' + error.message);
}

{
  type: 'seatSquirrelLayout',
  version: '1.0.0',
  layout: {
    sections: Section[],
    rows: SeatRow[],           // Each row contains its seats in row.seats[]
    areas?: Area[],
    pricingCategories: PricingCategory[],
    drawing?: Drawing,
    metadata: {
      name?: string,
      totalSections: number,
      totalRows: number,
      totalSeats: number,
      totalAreas?: number,
      totalPricingCategories: number,
      exportedAt: string,      // ISO 8601 timestamp
      dimensions: { width: number, height: number }
    }
  }
}

import { validateDesignerOutput } from '@seatsquirrel/sdk';

const result = validateDesignerOutput(layoutData);

if (result.success) {
  // result.data is typed as DesignerOutput
  console.log('Valid layout:', result.data);
} else {
  // result.error contains validation error messages
  console.error('Validation failed:', result.error);
}

{
  id: "cat_vip",
  name: "VIP",
  slug: "vip",
  price: 15000,        // e.g., $150.00
  color: "#8b5cf6",
  customerNotes: "Includes complimentary drinks"
}

{
  id: "seat_a1",
  rowId: "row_a",
  indexInRow: 0,
  row: "A",
  number: "1",
  pricingCategoryIds: ["cat_standard", "cat_child"],
  isAccessible: true
}

{
  type: 'seatSquirrelLayout',
  version: '1.0.0',
  layout: {
    sections: [{
      id: 'section_orchestra',
      name: 'Orchestra',
      pricingCategoryIds: ['cat_vip', 'cat_standard']
    }],
    rows: [{
      id: 'row_a',
      label: 'A',
      seatCount: 10,
      seatLabelType: 'numeric',
      seatLabelStart: 1,
      sectionId: 'section_orchestra',
      pricingCategoryIds: ['cat_vip'],
      drawing: {
        startX: 100,
        startY: 200,
        endX: 400,
        endY: 200,
        curve: 0.1,
        angle: 0
      },
      seats: [
        {
          id: 'seat_a1',
          rowId: 'row_a',
          indexInRow: 0,
          row: 'A',
          number: '1',
          pricingCategoryIds: ['cat_vip']
        },
        // ... more seats
      ]
    }],
    areas: [{
      id: 'area_ga',
      name: 'General Admission',
      displayLabel: 'Standing Area',
      purchaseType: 'multiple-customer',
      pricingMethod: 'per-person',
      pricingCategoryIds: ['cat_standard'],
      maxOccupancy: 200,
      displayUnit: 'standing',
      drawing: {
        shape: 'rectangle',
        shapeData: { x: 500, y: 100, width: 300, height: 200 },
        fill: '#e5e7eb'
      }
    }],
    pricingCategories: [
      { id: 'cat_vip', name: 'VIP', slug: 'vip', price: 15000, color: '#8b5cf6' },
      { id: 'cat_standard', name: 'Standard', slug: 'standard', price: 5000, color: '#3b82f6' }
    ],
    drawing: {
      backgroundColor: '#ffffff',
      rectangles: [{
        id: 'stage',
        x: 200,
        y: 50,
        width: 200,
        height: 60,
        fill: '#1f2937',
        cornerRadius: 4,
        text: 'STAGE',
        textColor: '#ffffff',
        textFontSize: 24,
        textAlign: 'center'
      }],
      textElements: [{
        id: 'label_exit',
        x: 50,
        y: 400,
        text: 'EXIT',
        fontSize: 16,
        color: '#ef4444'
      }]
    },
    metadata: {
      name: 'Main Theater',
      totalSections: 1,
      totalRows: 1,
      totalSeats: 10,
      totalAreas: 1,
      totalPricingCategories: 2,
      exportedAt: '2024-01-15T10:30:00.000Z',
      dimensions: { width: 800, height: 600 }
    }
  }
}