Canvas

React, Vue, Angular y Next, nativo en tu stack.

Los wrappers oficiales convierten el plano en un componente idiomático: props dentro, eventos fuera. Next.js obtiene obtención de datos en server components con revalidación y un esqueleto mientras carga.

Explorar destacados

¿Te suena familiar?

Wrappers caseros que derivan

Tu wrapper React hecho a mano va tres versiones por detrás de la librería. Los wrappers oficiales viajan con el paquete.

Miedo al bloqueo por framework

Apostar la tienda a un solo framework duele en la reescritura. El mismo plano corre en React, Vue, Angular o vanilla.

Gimnasia SSR

Los widgets cliente pelean con el render en servidor. El wrapper Next.js obtiene datos del plano en un server component, con revalidación integrada.

Idiomático, donde renderices

01React y Next.jsUn componente con props tipadas para cada evento, más puntos de entrada App Router y Pages Router.
02Obtención en server componentSeatmapServerWrapper carga datos del plano en el servidor con ventana de revalidación, SEO y velocidad.
03Un esqueleto mientras cargaSeatmapSkeleton mantiene el layout hasta que el plano está listo, sin salto de contenido.
04Plugin Vue 3Registra el plugin, emite eventos con @handlers. El plano se siente nativo en Vue.
05Angular, de verdadComponente, directiva, módulo, servicio y standalone, no un iframe fino.
06Vanilla cuando quierasSin framework. La librería core se monta en cualquier sitio con contenedor y config.

De la instalación a la interactividad

venue-page.tsx
import { SeatmapServerWrapper } from "seatmap-canvas/nextjs/app-router";
 
// Server component: datos del plano con revalidación
export default function VenuePage() {
  return (
    <SeatmapServerWrapper
      dataSource={() => fetchChart("main-hall")}
      revalidate={60}
      config={{
        theme: "dark",
        multi_select: true,
        onSeatSelect: (seat) => cart.add(seat),
      }}
    />
  );
}
TypeScript · seatmap-canvas/nextjsSeatmapServerWrapper

Monta en tu stack

React, Vue, Angular o vanilla, la demo corre encima.