1. Knowledge base
2. Renderer SDK

Admin Renderer

The Admin Renderer is a variant of the Seatmap renderer designed for building internal tools and venue management interfaces. Use it when you need to let staff select, inspect, or manage sections rather than book seats.

Overview

Import and instantiate the Admin Renderer:

import { SeatmapAdminRenderer } from '@seatmap.pro/renderer';

const renderer = new SeatmapAdminRenderer(document.getElementById('renderer-container'), {
  publicKey: 'your-public-key',
});
renderer.loadEvent('your-event-id');

Activating selectSections mode

The Admin Renderer supports four interaction modes: 'pan', 'select', 'selectRows', and 'selectSections'. To activate section selection mode:

renderer.setMode('selectSections');

The other three modes ('pan', 'select', 'selectRows') are unaffected by this change and can be set the same way.

Interaction in selectSections mode

• Click — toggles the selection state of the clicked section (selected / deselected).
• Drag — draws a rectangle over the canvas and selects all sections that intersect it.

Keyboard modifiers for drag selection

When drawing a drag selection rectangle, the following modifier keys change how the selection is applied:

onSectionsSelectionChange callback

Use the onSectionsSelectionChange callback to receive the final selection after each user interaction:

const renderer = new SeatmapAdminRenderer(document.getElementById('renderer-container'), {
  publicKey: 'your-public-key',
  onSectionsSelectionChange: (sections) => {
    sections.forEach((section) => {
      console.log(section.id, section.name, section.seatCount);
    });
  },
});
renderer.loadEvent('your-event-id');

Each element in the sections array is an ISection object. The primary fields for this use case are:

• id — unique section identifier.
• name — display name of the section.
• seatCount — number of seats in the section.

ISection contains additional fields; the three above cover the most common admin use cases.

onSectionsSelectionChange fires once after the full selection is finalized — once per click and once per completed drag. By contrast, onSectionClick fires once for every affected section: once on a single-click toggle, and once per intersecting section during a drag. Consumers relying on onSectionClick in selectSections mode should be aware that it fires multiple times per drag operation.

seatCount on ISection

seatCount is available on ISection in both onSectionsSelectionChange and onSectionClick callbacks.

Flat section view

Flat section view flattens a single section onto its seating grid, the same way the schema editor shows it. The rest of the venue is dimmed behind a backdrop, and row and seat labels are drawn over the flattened grid.

const flattened = await renderer.setFlatSectionView(sectionId);

await renderer.setFlatSectionView(null);

setFlatSectionView resolves:

• true when the view is flat for that section, or when null was passed to exit.
• false when the section cannot be flattened — general admission, tables, an unknown id, or a section with no grid.

Requesting the section that is already flat resolves true and does nothing, so the call never toggles the view off. Exiting always resolves true, whether or not anything was flat.

To be notified of every entry and exit, including the ones the renderer initiates itself on teardown or a schema reload, pass onFlatSectionViewChange:

const renderer = new SeatmapAdminRenderer(document.getElementById('renderer-container'), {
  publicKey: 'your-public-key',
  onFlatSectionViewChange: (sectionId) => {
    console.log(sectionId === null ? 'venue view' : `flat: ${sectionId}`);
  },
});

The callback must be supplied at construction time. Assigning it afterwards has no effect, because the renderer keeps a copy of the settings object it was constructed with.

Selecting a block of seats

selectSeatBlock selects the rectangular block of seats spanning the grid coordinates between an anchor seat and a focus seat. It works on the section’s own row and seat grid rather than on screen geometry, so the block follows the seating layout even when the section is curved or rotated.

import { RendererSelectMode } from '@seatmap.pro/renderer';

await renderer.selectSeatBlock(anchorSeatId, focusSeatId);

await renderer.selectSeatBlock(anchorSeatId, focusSeatId, RendererSelectMode.ADD);

The third argument is the selection algebra, and defaults to RendererSelectMode.REPLACE. ADD and SUBTRACT combine the block with the current selection.

The promise resolves false when either seat is unknown, the two seats belong to different sections, or grid coordinates are unavailable for that section; true otherwise.

Keyboard shortcuts

The Admin Renderer handles keyboard input while the pointer is over the stage. Keystrokes typed into an input, textarea, select, or any editable element are ignored.

Mod is Cmd on macOS and Ctrl elsewhere. A hold binding is active only while the key is held: Space pans temporarily and returns to the previous mode on release, and F flattens the hovered section for as long as it is held.

Custom bindings

Pass a hotkeys map to rebind or disable individual actions. Keys are the action ids from the table above; a value replaces the default combo, and null disables that action.

const renderer = new SeatmapAdminRenderer(document.getElementById('renderer-container'), {
  publicKey: 'your-public-key',
  hotkeys: {
    selectAll: 'Mod+E',
    flatSection: null,
  },
});

Set hotkeys: false to disable keyboard handling entirely — useful when the surrounding admin UI owns the keyboard.

Combos are written as an optional Mod+ prefix plus a single key: a letter, a digit, =, -, or a key code such as Space or Escape. The HotkeysSetting and AdminHotkeyAction types are exported from the package.