Pixel-Collab is a high-performance, professional-grade collaborative whiteboard application built for the modern web. It features a custom-built HTML5 Canvas engine, advanced drawing tools, and a sophisticated "mock" collaboration system that simulates a real-time multi-user environment.
Experience the board: https://pixel-collab-chi.vercel.app/
Built from the ground up with a pure JS renderer (CanvasRenderer.js), Pixel-Collab offers:
- Professional Toolset: Pencil (with smoothing), Shapes (Rect, Circle, Line, Arrow), Text, and Sticky Notes.
- Infinite Canvas feel: Seamless Zoom (10% - 400%) and Pan support.
- Dynamic Minimap: A persistent viewport overview that renders real-time stroke previews using a specialized low-fidelity drawer (minimapDraw.js).
- High-DPI Support: Automatically scales for Retina/4K displays for crisp lines.
- Magnetic Snapping: Figma-style alignment that "snaps" elements to edges and centers of other elements with visual guide rails (snapAlignment.js).
- Snap-to-Grid: A customizable dot grid that guides placement while remaining visually subtle.
- Z-Index Controls: Full "Bring to Front" / "Send to Back" stack management.
- Element Locking: Secure your work by locking elements to prevent accidental modifications.
- Mock Presence: Simulated multi-user activity with dynamic cursors, name tags, and color-coded avatars.
- Typing Indicators: Real-time visual feedback when other "users" are adding text.
- Activity Feed: A scrolling sidebar log capturing every move, resize, and creation on the board.
- URL Persistence: Share your entire board state via compressed URL hashes. We use the CompressionStream API (GZIP) to keep links short and shareable even with complex drawings.
The project follows a modular architecture designed for performance and maintainability:
Pixel-Collab/
├── src/
│ ├── canvas/ # Core rendering engine
│ │ ├── CanvasRenderer.js # Pure JS drawing logic (High Performance)
│ │ ├── minimapDraw.js # Optimized drawer for the viewport overview
│ │ ├── useCanvasEvents.js # Event orchestration (The Brain of the canvas)
│ │ └── SelectionOverlay.jsx # DOM-based handles for resizing/moving
│ ├── components/ # React UI Layer
│ │ ├── collaboration/ # Cursors, Activity Feed, Typing Indicators
│ │ ├── elements/ # Canvas-aligned DOM overlays (Text inputs, Stickies)
│ │ ├── layout/ # Shell, TopBar, Side panels
│ │ └── toolbar/ # Main tools, color pickers, and tool options
│ ├── hooks/ # Custom Logic
│ │ ├── useKeyboard.js # Global hotkeys (V, H, T, P, Ctrl+Z, etc.)
│ │ ├── useMockCollaboration.js # The simulation engine
│ │ └── useViewport.js # Camera math (Zoom/Pan transformations)
│ ├── store/ # Global State
│ │ └── useStore.js # Central Zustand store with undo/redo & history
│ ├── tools/ # Modular Tool Logic
│ │ ├── SelectTool.js # Complex selection/move/marquee logic
│ │ └── ... (Pencil, Shape, Text, Eraser, Pan)
│ └── utils/ # Math & System Helpers
│ ├── snapAlignment.js # Magnetic alignment math
│ ├── persistence.js # GZIP compression for URL state
│ └── geometry.js # Hit-testing and bounding box math
└── tests/ # Vitest + React Testing Library suite
| Technology | Usage |
|---|---|
| React 19 | Modern UI components and hooks |
| Vite 8 | Ultra-fast build tool and HMR |
| Zustand | Lightweight, high-performance state management |
| Tailwind CSS 4 | Utility-first styling with the new v4 engine |
| Lucide React | Clean, consistent iconography |
| CompressionStream | Native browser GZIP for URL state serialization |
| jsPDF | Professional PDF export capabilities |
| Vitest | Reliable unit and integration testing |
-
Clone the Repository:
git clone https://github.com/rishab11250/HackStreet-2K26.git cd HackStreet-2K26/Pixel-Collab -
Install Dependencies:
npm install # or pnpm install -
Run Development Server:
npm run dev
-
Build for Production:
npm run build
We maintain high code quality with 27+ automated tests.
npm run testCreated for HackStreet 2026. Open source under the MIT License.