Mesh - Real-Time Collaborative Canvas Engine

About This Project

Overview: Mesh is an open-source, Figma-inspired collaborative whiteboard engine engineered to solve distributed state synchronization and high-frequency canvas networking challenges. Built from scratch, it eliminates database write lockups, socket backpressure, and concurrent edit collisions across distributed peers. Key Architectural Invariants: • Deterministic CRDT Convergence: Leverages Yjs binary update deltas to guarantee conflict-free state convergence across distributed clients without centralized database locks. • 60Hz Network Throttling: Clamps pointer awareness updates to approximately 16.6ms via an in-browser micro-ticker with Euclidean drift filtering, preventing WebSocket buffer bloat during rapid drawing. • Tiered Storage Pipeline: Decouples ephemeral in-memory state (Redis Hashes with 10-second TTL plus a Redis Streams append log) from durable relational storage (an asynchronous background compactor worker that commits compiled state to PostgreSQL 16 every 60 seconds or 100 deltas). • Affine Computational Geometry: Implements pure matrix transformations for an infinite Cartesian plane with focal-preserving zoom from 0.15x to 3.0x, along with Ramer-Douglas-Peucker point decimation paired with midpoint quadratic Bézier curve smoothing. Interactive Features: • Multiplayer Cursors & Presence: Real-time colored peer cursors with collaborator nameplates. • Peer Selection Outlines: Visual bounding boxes with name pills showing which elements teammates currently have selected. • Figma-Style Cursor Chat: Ephemeral floating chat bubbles triggered via the forward-slash shortcut. • Canvas Primitives: Markdown-enabled architecture cards, organic sticky notes with a deterministic 1.5-degree tilt angle, and dynamic auto-routing connector arrows. • Dual Aesthetic: Tactile, minimalist design system supporting Obsidian Dark mode and Warm Stone Light mode. • One-Click Export: Instant vector SVG and high-DPI PNG canvas downloads.

Tech Stack