690: Steve Ruiz and tldraw
Episode
72 min
Read time
2 min
Topics
Remote Work, Design & UX, Artificial Intelligence
AI-Generated Summary
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.
Episode Transcript
Hey there. Shop with me. Actually, you're listening to another episode of Shop dot Show podcast, front end, web design, development, all kinds of things. I'm Dave Rupert with Chris Coyer. Hey, Chris. How are you doing today? No. I'm doing absolutely I'm doing infinitely good, I would say. Oh, wow. That's how good I'm doing. We have a special guest, this week who I'm excited to talk to because he makes cool products along with his team. At TL draw, we have, Steve Steve Ruiz. Right? From from did I say it right? No. I think Ruiz, but, Ruiz. My my Spanish friends say, no. No. No. You're spell you're saying that wrong. It's Greek, you know, and everything. I'm like, oh, it's complicated. It's, Colombian via the Midwest. Or friends tell you it's wrong. Yeah. I mean, I have a last name, Coir, that ends in e r that's French, and people are like, it's Coir. I'm like, you know what? You're probably right, actually. It's my name. But yeah. Yeah. I sort of get a call the shots on my name. I'm I'm sorry. Yeah. Well, it says the the person with a, Anglophone compatible. Yeah. I'm like, Lord, British the third over here. Jesus. I ordered a cow. Two first names, oh my god. Yeah. Well, yeah. Thanks for having me on. I, I was saying just before we had recorded that I I probably listened to like over a 100, episodes of ShopTalk. It used to be a big part of the my my technical podcast rotation. So yeah, it's great to be on and chatting with you guys in person. Well, it's our pleasure for sure. Yeah. I use TL draw all the time. Oh, really? I didn't know what I mean. Well, this is maybe getting too far ahead, but there's just stuff like, I can just do it in my editor. I can be like new TL draw and then start documenting something and then just save it as a file. That's like, dude, that architecture diagrams, all that crap, and you just like, it's there in the repo now. It's super handy from that perspective for me even just to let's just do this but visual, we're not spinning up a Figma. We're not doing all that. We're just doing it right here. Right? Exactly. That's where I was gonna go with this too. You need a URL in your head where you're like, I need to draw some shapes and some text and some arrows right now. And and there's options, and they all suck except for TL draw. Like, for real. I appreciate that. I appreciate that. I I mean, they do, though, especially because, you know, you made this choice where when you get to tldraw.com, because you have some other domains that we'll get to, it's the canvas is right there. So that's great. And then there's just some simple tools and you draw and whatever. What …
Get the full transcript (13,328 words) + summary by email — free
One-time email with the complete transcript and AI summary of this episode. No account needed.
One email, no spam. We’ll also show you what SignalCast does.
You just read a 3-minute summary of a 69-minute episode.
Get Shop Talk Show summarized like this every Monday — plus up to 2 more podcasts, free.
Pick Your Podcasts — FreeKeep Reading
More from Shop Talk Show
731: Terminal UX, Running Multiple Services, Don’t Settle for an App
Sep 7 · 58 min
The Changelog
Selling SDKs in the era of many Claudes (Interview)
Feb 19
More from Shop Talk Show
730: A/B Testing with Charts, Music Recommendations, & Web Permissions
Aug 31 · 60 min
a16z Podcast
Steven Sinofsky: AI Doesn't Need New Rules Yet
Jul 27
Books, tools, and gear mentioned in this episode
SignalCast may earn commission on purchases via these links.
Tools
“tldraw, an open source infinite canvas SDK built with React and TypeScript”
by OpenAI
“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.”
“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”
- TLDrawBy guest
“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.”
“tldraw uses the same multiplayer system for both cross-tab browser communication via Broadcast Channel API and remote collaboration through WebSockets”
“This SDK includes schema versioning and per-record migration capabilities built into persisted files, handling 100,000 distributed databases across user browsers with IndexedDB storage.”
More from Shop Talk Show
We summarize every new episode. Want them in your inbox?
731: Terminal UX, Running Multiple Services, Don’t Settle for an App
730: A/B Testing with Charts, Music Recommendations, & Web Permissions
729: After Dark Edition! Microlighter, Tri-state Drama, and Editing Video Quickly
728: BIMI, Good Favicon Practice, and CSS @Layer Exploration
727: Front-End Complexity, AI Co-Authorship, and New CSS Navigation Patterns
Similar Episodes
Related episodes from other podcasts
The Changelog
Feb 19
Selling SDKs in the era of many Claudes (Interview)
a16z Podcast
Jul 27
Steven Sinofsky: AI Doesn't Need New Rules Yet
Practical AI
May 21
Hermes Agent: Agents that grow with you
Odd Lots
May 21
Why Cerebras CEO Andrew Feldman Built The World's Largest Computer Chip
NVIDIA AI Podcast
May 6
Harrison Chase of LangChain on Deep Agents, LangSmith, and Earning Trust | NVIDIA AI Podcast Ep. 297
Explore Related Topics
This podcast is featured in Best Cybersecurity Podcasts (2026) — ranked and reviewed with AI summaries.
Read this week's AI & Machine Learning Podcast Insights — cross-podcast analysis updated weekly.
You're clearly into Shop Talk Show.
Every Monday, we deliver AI summaries of the latest episodes from Shop Talk Show and 192+ other podcasts. Free for one show.
Start My Monday DigestNo credit card · Unsubscribe anytime