Excileboard
High-performance virtual infinite whiteboard engine
Built with TypeScript, Fabric.js, and MobX. Features reactive 60 FPS canvas sync and auto-persistence.
Tech Stack
Key Highlights
Built a full-featured whiteboard with drawing tools — rectangles, circles, diamonds, lines, arrows, freehand pencil, and text
Architected with a Manager Pattern using MobX for reactive state — RootStore orchestrates Canvas, Element, Tool, Style, Selection, Eraser, Board, and Shortcut managers
FabricSyncManager acts as a reactive bridge between MobX models and Fabric.js canvas objects with per-element geometry and style reactions
Board persistence with auto-save to LocalStorage — supports multiple boards with create, rename, delete, and search
Arrow element binding — arrows snap to bounding-box edges of connected shapes and re-draw when bound elements move
Zoom (pinch/ctrl+scroll) and pan (two-finger/wheel) via CanvasZoomManager and CanvasPanningManager
Keyboard shortcut system — tool selection (1–9), zoom (ctrl+/-), undo/redo, with a discoverable shortcut dialog
Eraser tool with hit-test detection and smooth 180ms opacity fade-out animation before element removal