Supper Club × Steve Ruiz Building a Drawing App

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 ××× ××× SIIIIICK ××× PIIIICKS ××× Last Call BBS

Shameless Plugs Steve: tldraw.dev

Tweet us your tasty treats Scott’s Instagram

LevelUpTutorials Instagram

Wes’ Instagram

Wes’ Twitter

Wes’ Facebook

Scott’s Twitter

Make sure to include @SyntaxFM in your tweets