Canvas

React, Vue, Angular, Next, native in your stack.

Official wrappers turn the map into an idiomatic component: props in, events out. Next.js gets server-component data fetching with revalidation and a skeleton while it loads.

Explore highlights

Sound familiar?

DIY wrappers that drift

Your hand-rolled React wrapper lags the library by three versions. Official wrappers ship with the package.

Framework lock-in fear

Betting the storefront on one framework stings at the rewrite. The same map runs in React, Vue, Angular, or vanilla.

SSR gymnastics

Client widgets fight server rendering. The Next.js wrapper fetches chart data in a server component, with revalidation built in.

Idiomatic, wherever you render

01React & Next.jsA component with typed props for every event, plus App Router and Pages Router entry points.
02Server-component fetchingSeatmapServerWrapper loads chart data on the server with a revalidate window, SEO-friendly and fast.
03A skeleton while it loadsSeatmapSkeleton holds the layout until the map is ready, no content shift.
04Vue 3 pluginRegister the plugin, emit events with @-handlers. The map feels native to Vue.
05Angular, properlyComponent, directive, module, service, and standalone, not a thin iframe hack.
06Vanilla when you want itNo framework required. The core library mounts anywhere with a container and config.

From install to interactive

venue-page.tsx
import { SeatmapServerWrapper } from "seatmap-canvas/nextjs/app-router";
 
// Server component: chart data fetched with revalidation
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

Mount it in your stack

React, Vue, Angular, or vanilla, the demo runs on it.