Le plan de salle que vos spectateurs méritent, sans le construire vous-même.

Canvas affiche les plans dessinés dans Studio avec le zoom signature à trois niveaux, les états des places en direct et votre charte, sur le web, le mobile et dans n'importe quel framework. Sous licence, auto-hébergeable, et jamais facturé à la place.

Découvrir les fonctionnalités

Un moteur d'affichage, tous les types de salles

La démo, c'est Seatmap Canvas Next qui tourne sur cette page. Choisissez un lieu et zoomez de la vue d'ensemble jusqu'à une seule place.

Du canevas Studio à l'écran du spectateur

Les plans se dessinent une fois dans Seatmap Studio et Canvas les affiche au pixel près. Voici les deux bouts de ce pipeline.

Capture de la démo Seatmap Canvas en direct, un stade de football à trois niveaux, avec catégories de places et légende — La démo en direct. L'expérience Canvas complète, changement de niveau, zoom à trois niveaux et options de places en direct. Cliquez sur la capture pour l'ouvrir.

Capture de l'éditeur de plan Seatmap Studio — Des plans dessinés dans Studio. Dessinés une fois dans Seatmap Studio. Canvas rend le même document, avec infobulles riches, catégories de tarifs et niveaux.

Ça vous parle ?

La double réservation est un piège

Sous charge, deux sélections qui lisent puis écrivent se marchent dessus, et un cache seul peut perdre une option en cas de bascule. Canvas s'appuie sur des options et des réservations en base qui rendent structurellement impossible de vendre deux fois la même place.

Un compteur à la place qui pénalise la croissance

Les SaaS de plan de salle facturent à la place utilisée et laissent périmer les places non vendues. Canvas est en licence forfaitaire, une salle de 300 places ou un stade de 30 000, mêmes conditions.

Les widgets 100 % cloud se heurtent au mur

Quand les achats exigent la résidence des données, les outils uniquement hébergés chez l'éditeur mènent à une impasse. Canvas tourne sur votre infrastructure, à vos couleurs.

Les détails que le public ressent

Sélection de placesClic pour sélectionner avec états vendu, en option et sélectionné, plus la réservation d'ensemble pour les zones en placement libre et les loges.Zoom à trois niveauxLes acheteurs passent de la vue d'ensemble de la salle au bloc puis à leur place exacte avec un zoom animé. L'interaction signature de Seatmap.Salles multi-niveauxJusqu'à neuf niveaux avec ascenseur d'étage et vue de sélection tous niveaux. Théâtres, croisières et arènes dans un seul plan.Personnalisation visuellePalettes clair et sombre, formes de places personnalisées et surcharges de style granulaires pour chaque élément du plan.Wrappers frameworkReact, Vue, Next.js (RSC + ISR), Angular ou vanilla JS. Des packages de première classe, pas des ajouts tardifs.Auto-hébergé, sans frais par placeMoteur de rendu sous licence MIT sur votre infrastructure. L'alternative open source à la tarification SaaS au siège.

Comparer

Ce que seatmap-canvas v1 peut porter, et ce que Seatmap Canvas Next ouvre
	seatmap-canvas v1	Seatmap Canvas Next
Jusqu'où ça va	Une salle de quelques milliers de places	Un stade qui se déplace et zoome encore
Au-dessus et en dessous	Un seul niveau	Neuf étages — balcon sur parterre, cabine sur cabine
Ce que la soirée peut tenir	Des places en blocs	Places, debout, stands, tables de banquet
Le sol où ça peut vivre	Un plan indoor	Un théâtre, un champ de festival, un circuit sur une carte
Le chemin jusqu'à la place	La salle, puis le bloc, puis la place	De la carte, à travers les étages, jusqu'à la place
Comment naît la salle	Vous l'écrivez en JSON	Vous la dessinez dans Studio. La carte la rejoue.
Ce qu'une place peut dire	Un titre et une note	Le prix, la catégorie, une image — l'offre sur la place
Quand la salle se remplit	Vous renvoyez un JSON	Vendu et optionné arrivent sur la carte au fil de l'eau
Sans pointeur	—	Parcourir la carte au clavier

Technique

Moteur, API et distribution : seatmap-canvas v1 et Seatmap Canvas Next
	seatmap-canvas v1	Seatmap Canvas Next
Moteur de rendu	D3.js · SVG	WebGL2
Format du plan	blocks[] + seats[]	Studio ChartDocument (blocks, objects, floors, geo)
API de sélection	SEAT.CLICK, select / unselect	Mêmes événements host-toggle
État des places	L'hôte réécrit le JSON	setSeatStatus, applyObjectAvailability
Infobulle	Titre / note	resolveTooltipOffer
Paquets framework	React, Vue 3, Next.js, Angular	Vanilla JS
Parseur Pretix	Intégré	Non livré
Licence	MIT	Commerciale
Installation	npm i @alisaitteke/seatmap-canvas	Bundle sous licence, pas sur npm

Dessinez une fois, affichez partout

01Dessinez-le dans StudioBlocs, niveaux, tables et zones en placement libre, dessinés une fois, plan canonique.
02Affichez au pixel prèsCanvas rend le même document que verront les spectateurs, jusqu'à la charte.
03Branchez-le dans votre parcoursUne trentaine d'événements typés et une API programmatique. Zoom, niveaux et sélection restent sous votre contrôle.

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

Licence commerciale
Pas sur npm
Types TypeScript
Builds ESM + CJS
API Vanilla JS
WebGL2

Voyez votre salle dans Canvas

Ouvrez la démo et zoomez du stade jusqu'à la place exacte.