A powerful, visual, and interactive organizational design tool built with React 19, Vite, and Tailwind CSS. Organization Canvas allows you to build, manage, and present organizational structures using a flexible "infinite" canvas approach.
- Infinite Workspace: Pan and zoom across a large radial-grid workspace.
- Drag & Drop: Easily place roles and people onto the canvas from your library.
- Multi-Selection: Select multiple elements to move or group them together.
- Role Templates: Define reusable role definitions with summaries.
- People Directory: Manage a library of individuals with avatars and names.
- Smart Assignment: Drag people onto roles to suggest or assign them.
- Container Tracks: Group related roles into departments, squads, or functional teams.
- Dynamic Resizing: Tracks automatically adapt or can be manually resized to fit your structure.
- Ungrouping: Easily dissolve tracks while keeping the underlying role cards.
- State Capture: Record "snapshots" of your organization at different stages.
- Smooth Transitions: Use Presentation Mode to animate between recorded states with professional Framer Motion transitions.
- Step Navigation: Navigate forward and backward through your org design narrative.
- Local Persistence: All changes are automatically saved to your browser's local storage.
- Backup & Restore: Export your entire organization design (including templates and history) as a JSON file for sharing or safe-keeping.
- Multi-Org Support: Create and switch between multiple independent organizations.
-
Clone the repository:
git clone https://github.com/JustMeGaaRa/org-structure-web-app.git cd org-structure-web-app -
Install dependencies:
npm install
-
Start the development server:
npm run dev
-
Open your browser and navigate to
http://localhost:5173.
- Core: React 19
- Build Tool: Vite
- Styling: Tailwind CSS 4
- Animations: Framer Motion
- Icons: Lucide React
- State Management: React Hooks & Local Storage
- Routing: Minimal page-switching logic (Canvas vs. Library Editor)
- Use the Library Sidebar (on the right) to drag roles onto the canvas.
- Change the Tool Mode in the bottom toolbar:
Select(Pointer): Move cards around.Pan(Hand): Move the entire canvas.Track(Box): Group selected items into a new container.
- Click "Manage Library" in the sidebar to enter the Library Editor.
- Here you can add new Role templates or Person entries that will be available globally for your organization.
- Click the
Capturebutton to capture a snapshot of the current organization structure. - Click the
Resetbutton to reset the canvas to its initial state. - Switch to
Presentmode to play back your snapshots. Use the arrow controls in the bottom toolbar to navigate.
- Use the Settings icons in the sidebar to export your current org to a JSON file.
- You can restore any organization by dragging the JSON file into the restore area or selecting it via the file browser.
This project is licensed under the Apache-2.0 License - see the LICENSE file for details.