Seatmap Pro Playground is a fast, visual way to explore everything the Renderer can do – directly in your browser, with zero setup.

It’s designed for anyone working with interactive seating maps: developers integrating the SDK, designers experimenting with themes, or product teams reviewing how map behavior matches the user experience. You can preview rendering behavior, test cart logic, fine-tune parameters, and explore live presets –all without writing code or deploying anything.

Explore Real Maps Instantly

At the heart of the Playground is a growing gallery of presets – preconfigured setups that showcase how different features behave. You can load high-performance WebGL maps, navigate seating by row or explore general admission layouts.

Each preset comes ready to run, and you can tweak parameters in place to see how the Renderer responds. It’s the fastest way to understand how map settings translate into visual behavior – especially useful when you want to share configurations across teams or validate ideas before implementation.

Browse the full gallery here: Presets Collection →

Configure Every Detail — Visually

The Playground exposes all the key configuration sections of the Seatmap Pro Renderer:

  • General – controls for rendering type, padding, visibility toggles, zoom behavior, and the required publicKey;
  • Events – callback hooks like onSeatSelect, onRedrawStart, onZoomEnd, and onBeforeSeatDraw, so you can test how the Renderer reacts to user actions;
  • Theme – full styling options for seats, rows, labels, and pricing (including support for colors, images, fonts, and shadows);
  • Zoom – settings to define zoom scale, animation duration, and when elements like seats or outlines appear.

Each of these can be changed directly in the Playground interface. Adjust a value, hit “Load” and instantly see the result. It’s a smooth workflow for testing and understanding complex behaviors without needing to rebuild your integration.

Simulate Cart Behavior in Real Time

In addition to rendering, the Playground supports cart interactions. You can initialize a cart, select or deselect seats, and watch how the Renderer updates availability and triggers status messages.

This gives you a complete view of user interactions – including seat locking, selection limits, and price group behavior – exactly as they would appear in production. It’s a powerful way to verify logic or demonstrate flows before your backend is fully connected.

Built for Collaboration

The Playground is designed to be useful beyond development. Designers can test theme changes or layout behavior. Product managers can explore interaction patterns. QA teams can quickly reproduce issues and experiment with fixes.

Because everything runs in the browser and uses real event data, it’s easy for teams to explore ideas, share configurations, and reach alignment — without extra tooling or local builds.

Try It with Your Own Maps

You can start exploring today using the built-in presets, or load your own event by entering:

  • Event ID
  • Public API key from your Seatmap Pro Editor workspace

If you don’t have these yet, just request a demo – once you are ready to go, we’ll provide test access to the Editor, along with your own sample event so you can try the Playground with real data.