690: Steve Ruiz and tldraw

November 10, 2025

72 min episode · 2 min read

Steve Ruiz

Episode

72 min

Read time

2 min

AI-Generated Summary

Published Dec 25, 2025

Key Takeaways

✓Canvas Architecture Choice: tldraw uses DOM-based rendering with individual SVGs and divs instead of WebGL canvas elements, enabling iframe embedding and React component integration directly on the canvas while maintaining performance for most use cases, though sacrificing ceiling for design-heavy applications like Photoshop.
✓Data Migration System: The SDK includes schema versioning and per-record migration capabilities built into persisted files, handling 100,000 distributed databases across user browsers with IndexedDB storage. This architecture requires careful planning since schema changes must work across all local installations without breaking existing documents.
✓Real-time Sync Implementation: tldraw uses the same multiplayer system for both cross-tab browser communication via Broadcast Channel API and remote collaboration through WebSockets, treating local and remote sync as identical messaging problems with different transport layers, preventing stale document conflicts across sessions.
✓AI-Powered Workflows: The Make Real feature converts hand-drawn wireframes into working HTML prototypes using GPT-4 Vision, allowing iterative refinement by drawing annotations directly on generated websites. This approach enables rapid visual prototyping without writing code, particularly valuable for creative agencies exploring concepts with clients.
✓Business Model Strategy: tldraw charges $6,000 annually for teams under 10 developers, positioning as infrastructure rather than consumer software. The source-available licensing with CLA requirements ensures commercial users obtain proper licenses while maintaining GitHub visibility, solving monetization challenges many open source JavaScript libraries face.

What It Covers

Steve Ruiz discusses tldraw, an open source infinite canvas SDK built with React and TypeScript that powers both a free whiteboard app and commercial developer tools for building Figma-like applications with built-in multiplayer capabilities.

Key Questions Answered

•Canvas Architecture Choice: tldraw uses DOM-based rendering with individual SVGs and divs instead of WebGL canvas elements, enabling iframe embedding and React component integration directly on the canvas while maintaining performance for most use cases, though sacrificing ceiling for design-heavy applications like Photoshop.
•Data Migration System: The SDK includes schema versioning and per-record migration capabilities built into persisted files, handling 100,000 distributed databases across user browsers with IndexedDB storage. This architecture requires careful planning since schema changes must work across all local installations without breaking existing documents.
•Real-time Sync Implementation: tldraw uses the same multiplayer system for both cross-tab browser communication via Broadcast Channel API and remote collaboration through WebSockets, treating local and remote sync as identical messaging problems with different transport layers, preventing stale document conflicts across sessions.
•AI-Powered Workflows: The Make Real feature converts hand-drawn wireframes into working HTML prototypes using GPT-4 Vision, allowing iterative refinement by drawing annotations directly on generated websites. This approach enables rapid visual prototyping without writing code, particularly valuable for creative agencies exploring concepts with clients.
•Business Model Strategy: tldraw charges $6,000 annually for teams under 10 developers, positioning as infrastructure rather than consumer software. The source-available licensing with CLA requirements ensures commercial users obtain proper licenses while maintaining GitHub visibility, solving monetization challenges many open source JavaScript libraries face.

Notable Moment

Steve demonstrates spatial AI agents called fairies that collaborate on the canvas, with one fairy acting as project manager distributing wireframing tasks to other fairies. Each agent maintains spatial awareness and can see work from other agents, pointing toward future collaborative workflows between humans and AI.

Know someone who'd find this useful?