El plano de localidades que tu público merece, sin construirlo tú.

Canvas renderiza los planos diseñados en Studio con el zoom de tres niveles característico, estados de localidad en vivo y tu tema: en web, móvil y dentro de cualquier framework. Con licencia, autoalojable y nunca tarifado por localidad.

Explorar capacidades

Un renderizador, todo tipo de recintos

La demo es Seatmap Canvas Next ejecutándose en esta página: elige un recinto y haz zoom desde el graderío hasta una sola localidad.

Del lienzo de Studio a la pantalla del comprador

Los planos se diseñan una vez en Seatmap Studio y Canvas los renderiza idénticos al píxel: aquí ves ambos lados de esa canalización.

Captura de la demo en vivo de Seatmap Canvas: un estadio de fútbol con tres plantas, categorías de localidad y una leyenda — La demo en vivo. La experiencia Canvas completa: cambio de planta, zoom de tres niveles y retenciones de localidades en vivo. Haz clic en la captura para abrirla.

Captura del editor de planos de Seatmap Studio — Planos diseñados en Studio. Dibujados una vez en Seatmap Studio: Canvas renderiza el mismo documento con tooltips ricos, categorías de precio y plantas.

¿Te suena?

La doble reserva es una trampa

Las condiciones de carrera de selección lectura-escritura fallan bajo carga, y una caché sola puede perder una retención en un failover. Canvas se conecta a retenciones y reservas respaldadas en base de datos que hacen estructuralmente imposible vender dos veces la misma localidad.

Contadores por localidad que penalizan el crecimiento

El SaaS de planos de localidades factura por asiento usado y deja caducar los no usados. Canvas se licencia a tarifa plana: una sala de 300 localidades o un estadio de 30.000, en las mismas condiciones.

Los widgets solo en la nube se quedan cortos

Cuando el área de compras exige residencia de datos, las herramientas solo alojadas son un callejón sin salida. Canvas corre en tu infraestructura, con tu marca.

Los detalles que el público nota

Selección de localidadesSelección con un clic con estados vendido, en retención y seleccionado, además de reserva de objeto completo para zonas de entrada general y palcos.Zoom en tres nivelesLos compradores pasan de la vista general del recinto al bloque y a su localidad exacta con un descenso animado. La interacción distintiva de Seatmap.Recintos de varias plantasHasta nueve plantas con selector de planta y vista de selección en todas las plantas. Teatros, cruceros y arenas en un solo plano.TematizaciónPaletas clara y oscura, formas de localidad personalizadas y ajustes de estilo granulares para cada elemento del plano.Envoltorios de frameworksReact, Vue, Next.js (RSC + ISR), Angular o JavaScript vanilla. Paquetes de primera clase, no añadidos posteriores.Autoalojado, sin tarifas por localidadMotor con licencia MIT en su infraestructura. La alternativa de código abierto a la facturación SaaS por localidad.

Comparar

Lo que puede sostener seatmap-canvas v1, y lo que abre Seatmap Canvas Next
	seatmap-canvas v1	Seatmap Canvas Next
Hasta dónde llega	Una sala de unos miles de localidades	Un estadio que sigue desplazándose y haciendo zoom
Arriba y abajo	Una sola planta	Nueve plantas — palco sobre patio, camarote sobre camarote
Lo que cabe en la noche	Localidades en bloques	Localidades, de pie, stands, mesas de banquete
El suelo donde puede vivir	Un plano interior	Un teatro, un recinto de festival, un circuito en un mapa
El camino hasta la localidad	Recinto, luego bloque, luego la localidad	Del mapa, por las plantas, hasta la localidad
Cómo nace el recinto	Lo escribes en JSON	Lo dibujas en Studio. El mapa lo reproduce.
Lo que puede decir una localidad	Un título y una nota	Precio, categoría, una foto — la oferta en la localidad
Cuando se llena la sala	Envías un JSON nuevo	Vendido y retenido llegan al mapa al momento
Sin puntero	—	Recorrer el mapa con el teclado

Técnico

Motor, API y empaquetado: seatmap-canvas v1 y Seatmap Canvas Next
	seatmap-canvas v1	Seatmap Canvas Next
Renderizador	D3.js · SVG	WebGL2
Formato del plano	blocks[] + seats[]	Studio ChartDocument (blocks, objects, floors, geo)
API de selección	SEAT.CLICK, select / unselect	Los mismos eventos host-toggle
Estado de localidad	El host reescribe el JSON	setSeatStatus, applyObjectAvailability
Tooltip	Título / nota	resolveTooltipOffer
Paquetes de framework	React, Vue 3, Next.js, Angular	Vanilla JS
Parser Pretix	Integrado	No se envía
Licencia	MIT	Comercial
Instalación	npm i @alisaitteke/seatmap-canvas	Bundle con licencia, no está en npm

Diseña una vez, renderiza en todas partes

01Dibújalo en StudioSecciones, plantas, mesas y zonas de entrada general: se diseñan una vez como plano canónico.
02Renderizado idéntico al píxelCanvas renderiza el mismo documento de plano que verá el público, hasta el último detalle del tema.
03Enchúfalo a tu flujoUnos treinta eventos tipados y una API programática: zoom, plantas y selección quedan bajo tu control.

seatmap.ts

1import { SeatMapCanvas } from "seatmap-canvas";
2import "seatmap-canvas/dist/seatmap.canvas.css";
3 
4const seatmap = new SeatMapCanvas("#seatmap", {
5  theme: "dark",
6  legend: true,
7});
8 
9seatmap.data.replaceData(chart);
10 
11seatmap.eventManager.addEventListener("SEAT.CLICK", (seat) => {
12  if (!seat.item.salable) return;
13  seat.isSelected() ? seat.unSelect() : seat.select();
14});

TypeScript · seatmap-canvasSEAT.CLICK

Licencia comercial
No está en npm
Tipos TypeScript
Builds ESM + CJS
API Vanilla JS
WebGL2

Mira tu recinto en Canvas

Abre la demo y haz zoom desde el graderío hasta la localidad exacta.