Back to portfolio

Excileboard

Active

High-performance virtual infinite whiteboard engine

Built with TypeScript, Fabric.js, and MobX. Features reactive 60 FPS canvas sync and auto-persistence.

Tech Stack

ReactReact
TypeScriptTypeScript
TailwindTailwind
MobXMobX
FabricJSFabricJS
shadcnshadcn

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

Built by Prateek. The source code is available on github