Supper Club × Steve Ruiz Building a Drawing App

Sep 2nd, 2022

In this supper club episode of Syntax, Wes and Scott talk with Steve Ruiz about how he built tldraw, how he manages state, what was done to support mobile, and more.

Gatsby - Sponsor

Today’s episode was sponsored by Gatsby, the fastest frontend for the headless web. Gatsby is the framework of choice for content-rich sites backed by a headless CMS as its GraphQL data layer makes it straightforward to source website content from anywhere. Gatsby’s opinionated, React-based framework makes the hardest parts of building a performant website simpler. Visit gatsby.dev/syntax to get your first Gatsby site up in minutes and experience the speed. ⚡️

Show Notes

00:34 Welcome
03:23 Who is Steve Ruiz?
Steve Ruiz
04:45 What is tldraw and what was your inspiration for it?
tldraw
Globs
Excalidraw
tldraw on GitHub
11:04 Why didn't you use canvas?
16:15 How do you make an algorithm?
Perfect Free Hand
19:33 Do you use pointer events?
23:44 What are you using to manage state?
29:42 How do you handle zooming?
Creating Zoom UI
32:28 Where do you store the data for tldraw?
Project Fugu
37:08 Why use indexdb?
38:05 Sponsor: Gatsby
39:49 How difficult was it to make it work on mobile?
React Use Gesture
41:59 Does it work offline?
43:25 Supper Club Questions
Monokai Pro
Framer Classic
Hacker News
One Lone Coder on YouTube
Displaced Gamer
Coding Secrets
52:28 SIIIIICK ××× PIIIICKS ×××

Supper Club × Steve Ruiz Building a Drawing App