Seatmap Canvas
Build performant seatmaps for stadiums, theaters, and event spaces. Built with D3.js and TypeScript.
Features
![Customizable]()
Highly Customizable
- Custom Shapes - Circles, rectangles, paths, and SVG files
- Styling Options - Full control over colors, sizes, and appearance
- Background Images - Global and per-block backgrounds
![Fast]()
Developer Friendly
- Framework Agnostic - Works with vanilla JS, React, Vue, Angular, Next.js
- TypeScript - Full type definitions included
- Event System - Simple and powerful event handling
![Performance]()
Performance
- Built with D3.js - Smooth rendering and interactions
- Zoom & Pan - Three-level zoom (VENUE, BLOCK, SEAT)
- Optimized - Handles thousands of seats efficiently
![Easy]()
Easy to Use
- Simple API - Get started in minutes
- Custom Data - Attach any data to seats
- Block Organization - Organize seats logically
Quick Links
Framework Support
🌐 Web Frameworks
| Framework | Status | Package | Documentation |
|---|---|---|---|
| Vanilla JS | ✅ Available | @alisaitteke/seatmap-canvas | 📖 Docs |
| React | ✅ Available | @alisaitteke/seatmap-canvas/react | 📖 Docs |
| Vue.js 3 | ✅ Available | @alisaitteke/seatmap-canvas/vue | 📖 Docs |
| Next.js | ✅ Available | @alisaitteke/seatmap-canvas/nextjs | 📖 Docs |
| Angular | ✅ Available | @alisaitteke/seatmap-canvas/angular | 📖 Docs |
| Svelte | 🔜 Coming Soon | - | - |
📱 Mobile Frameworks
| Framework | Platform | Status |
|---|---|---|
| React Native | iOS • Android | 🔜 Coming Soon |
| Flutter | iOS • Android | 🔜 Coming Soon |
| Expo | iOS • Android | 🔜 Coming Soon |
🎯 What Can You Build?
Stadium Seating
Interactive seat maps for sports venues
Theater Booking
Seat selection for concerts and shows
Event Spaces
Flexible seating for conferences
Restaurants
Table and seat management
Transportation
Bus, train, airplane seating
Classrooms
Student seating arrangements
🚀 Getting Started
Ready to dive in? Head over to the Installation Guide to get started!
npm install @alisaitteke/seatmap-canvas
Quick Start
Check out our Quick Start Guide to create your first seatmap in less than 5 minutes! ⚡
Community & Support
- GitHub Issues: Report bugs or request features
- NPM: @alisaitteke/seatmap-canvas
License
Seatmap Canvas is MIT licensed.