Skip to main content

Installation

Install Seatmap Canvas in your project.

Prerequisites​

  • Node.js: Version 18.0.0 or higher
  • Package Manager: npm, yarn, or pnpm

NPM Installation​

Install the package using your preferred package manager:

npm install @alisaitteke/seatmap-canvas

Framework-Specific Installation​

Vanilla JavaScript​

For vanilla JavaScript projects, simply install the core package:

npm install @alisaitteke/seatmap-canvas

Then import in your JavaScript file:

import { SeatmapCanvas } from '@alisaitteke/seatmap-canvas';
import '@alisaitteke/seatmap-canvas/dist/seatmap.canvas.css';

Or use a CDN:

<!-- CSS -->
<link rel="stylesheet" href="https://unpkg.com/@alisaitteke/seatmap-canvas/dist/seatmap.canvas.css">

<!-- JavaScript -->
<script src="https://unpkg.com/@alisaitteke/seatmap-canvas/dist/cjs/seatmap.canvas.js"></script>

React​

Install the core package (React wrapper is included):

npm install @alisaitteke/seatmap-canvas
info

React 18.0.0 or higher is required.

Vue 3​

Install the core package (Vue wrapper is included):

npm install @alisaitteke/seatmap-canvas
info

Vue 3.3.0 or higher is required.

Next.js​

Install the core package (Next.js wrapper is included):

npm install @alisaitteke/seatmap-canvas
info

Next.js 13.0.0 or higher is required. Supports both App Router and Pages Router.

Angular​

Install the core package with Angular dependencies:

npm install @alisaitteke/seatmap-canvas @angular/core @angular/common rxjs
info

Angular 14.0.0 or higher is required. RxJS 7.0.0 or higher.

Package Contents​

After installation, you'll have access to:

  • Core Library: @alisaitteke/seatmap-canvas
  • React Components: @alisaitteke/seatmap-canvas/react
  • Vue 3 Components: @alisaitteke/seatmap-canvas/vue
  • Next.js Components: @alisaitteke/seatmap-canvas/nextjs
  • Angular Components: @alisaitteke/seatmap-canvas/angular
  • TypeScript Types: Included in the package
  • CSS Styles: dist/seatmap.canvas.css

Build Outputs​

The package includes multiple build formats:

  • CommonJS: dist/cjs/seatmap.canvas.js
  • ESM: dist/esm/seatmap.canvas.js
  • TypeScript Definitions: dist/types.d.ts

Next Steps​

Now that you have Seatmap Canvas installed, you can:

Troubleshooting​

TypeScript Errors​

If you encounter TypeScript errors, make sure your tsconfig.json includes:

{
  "compilerOptions": {
    "moduleResolution": "node",
    "esModuleInterop": true
  }
}

CSS Not Loading​

Make sure to import the CSS file in your application:

import '@alisaitteke/seatmap-canvas/dist/seatmap.canvas.css';

For more help, visit our GitHub Issues.