An interactive seat layout editor built with React (or your stack). Create, customize, and arrange seating layouts visually — ideal for theaters, events, restaurants, and more. . Create, customize, and arrange seating layouts visually — ideal for theaters, events, restaurants, and more.
!Preview
---
- 🎨 Drag-and-drop interface for adding and moving seats
- 🪑 Support for various seat shapes: square, circle, table with seats
- 🔤 Editable text labels
- 🔁 Rotate, resize, and duplicate components
- 🧠 Smart snap alignment (optional)
- 💾 Save & Load layout data
- 🔍 Zoom and pan the canvas
- 🧰 Modular component-based structure
---
``tsx
"use client";
import { useState } from "react";
import { SeatEditor } from "seat-editor";
export default function Home() {
const [componentProps, setComponentProps] = useState([]);
const [extraComponentProps, setExtraComponentProps] = useState([]);
const handleCurrentStateChange = (currentState: any) => {
console.log("Current state changed:", currentState);
};
const handleSelectComponent = (selectedComponent: any) => {
console.log("Selected component:", selectedComponent);
};
return (
For only View
`tsx
"use client"
import LayerView from "@/features/view/index";
import { dataDummy, dummyImage } from "./constant";
const OnlyView = () => {
return (
<>
componentProps={dataDummy}
mappingKey="properties"
extraComponentProps={dummyImage}
statusKey="status"
colorMatchKey={[
{
color: "red",
key: "1",
},
{
color: "blue",
key: "2",
}
]}
/>
>
);
};
export default OnlyView;`
🔧 Props
| Prop | Type | Description |
|-----------------------|-------------------------------------------|------------------------------------------------------------------------------|
|
componentProps | any[] | List of main components (e.g., tables, chairs) to render. |
| extraComponentProps | any[] | List of extra components (e.g., backgrounds, decorations) to render. |
| onCurrentStateChange| (state: any) => void | Callback triggered when component state updates. |
| onSelectComponent | (component: any) => void | Callback triggered when a component is selected (clicked). |
| mappingKey | string | Key name used to map nested shape data from component. |
| selectedTableColor | string | Color value for highlighting selected components. |
| colorMatchKey | { color: string, key: string }[] | Array to match status keys with specific colors. |
| statusKey | string | Key name used from each component to determine its current status. |
| action | File | You can put logic to this props|
| mappingProps | any` | responseMapping?: { add tailwind prefix node add-tailwind-prefix.js --prefix=my-
remove prefix tailwind node remove-tailwind-prefix.js --prefix=my-