Picker Overview

What is the Picker?

The Picker is the end-user interface where attendees select their seats. It renders the layout you designed and lets users browse available seats, areas, and tables — view pricing, check availability, and build their selection before proceeding.

The Picker is optimized for performance, handling layouts with 1,000+ seats smoothly at 60fps.

What Can Be Selected

The Picker supports three types of bookable entities:

Row Seats

Individual seats within a row. Click a seat to see its details and add it to your selection. If the seat has multiple pricing categories (e.g., Adult and Child), you'll be prompted to choose one.

Areas

Bookable spaces like standing sections, VIP lounges, or general admission zones. Depending on the area's configuration:

General admission areas — select how many places you want (up to the area's capacity)
Private/VIP areas — book the entire area for your group

Tables

Circular or rectangular tables with seats. Tables can be configured for:

Individual seat booking — select specific seats at the table, just like row seats
Whole-table booking — book the entire table as one unit, specifying how many guests

How Selection Works

Hover over a seat, area, or table to see a tooltip with its details — label, pricing, characteristics, and availability
Click to open the pricing selector (if multiple categories) or add directly to your selection
Your selections appear in the Selection Panel on the right (or bottom drawer on mobile)
Click an already-selected item to remove it
Review your total and click Proceed when ready

Mouse wheel or pinch gesture (mobile): zoom in/out
Click and drag on empty space: pan around the layout
Zoom controls: use the on-screen buttons or keyboard shortcuts (Cmd/Ctrl+Plus, Cmd/Ctrl+Minus, Cmd/Ctrl+0 to reset)
Fit to view: the layout automatically fits the screen when first loaded
You can't get lost: zooming out stops at the fit-to-screen view (you can never shrink the layout to a dot in empty space), and panning is bounded so at least part of the layout always stays on screen

Sections

If the venue is split into Sections in the Designer (e.g. "Main Floor", "Balcony", "VIP Loge"), each one renders in the parent view as a labelled frame with a low-fidelity preview of its contents and a small "Click to view" hint when the frame is large enough. Clicking inside a section drills in: the camera fits to that section and its seats/areas/tables render at full fidelity, while a light grey spotlight dims the surrounding sections and any top-level (root) objects as low-fidelity context so the active section keeps a sense of place. A "Back to layout" pill appears at the top-left.

Drill in by clicking inside a section frame (empty space inside the frame, not on a top-level seat that overlaps it)
Drill out by clicking the grey spotlight (the dimmed area outside the active section frame), or via the "Back to layout" pill. Clicking directly on another section's frame switches straight into it.
Back to layout returns to the parent view and re-fits to the whole venue
Selections persist across drill transitions — you can select seats in one section, drill out, drill into another, and your previous selections remain in the unified Selection Panel
Holds and availability are layout-wide, so live availability stays accurate even when you visit a section a second time

Sections-in-Picker is supported on the multi-tenant SaaS (/picker/[id] and event pickers at /e/[slug]), the cloud-hosted picker embed, and self-hosted picker surfaces when the host provides onRequestSectionContent. Self-hosted layouts that contain Sections without a section-content fetcher strip the section shells at load with a one-time console warning.

Visual Indicators

Seats and areas display visual cues about their state:

Color coding reflects pricing categories assigned by the organizer
Checkmark appears on selected seats
Dimmed/grayed items are unavailable or unbookable
Characteristic badges in tooltips show accessibility info, restricted views, and more

Next Steps

Selection Types — detailed guide to selecting seats, areas, and tables with pricing
Picker Features — selection panel, mobile experience, availability states, and notices