Supper Club × Steve Ruiz Building a Drawing App

I sure hope you're hungry.

Oh, I'm starving.

Wash those hands, pull up a chair, and secure that feed bag, because it's time to listen to Scott Tolinski and Wes Bos attempt to use human language to converse with and pick the brains of other developers. I thought there was gonna be food, so buckle up and grab that old handle because this ride is going to get wild.

This is the syntax supper club.

Welcome to Syntax. On this Syntax supper club, we're gonna be talking to Steve Hey, Ruiz, all about Google Sponsors and TL Draw, which is a really, really interesting application.

Little tiny it was a tiny little or what is it? Tiny drawing app? Tiny little drawing app is a little bit of a retcon. I could tell a story about how the name got started, but yeah. Yeah. We'll have to get into that. My name is Scott Tolinski. I'm a developer from Denver. And with me, as always, is Wes Bos. How's it going, Wes?

Doing pretty good. Pretty good. Excited to talk about, literally everything here and just playing with this app. I'm like, this is really cool. I have so many questions of how this works and what decisions he made. So yeah. Yeah. Pretty good. Yeah. So welcome, Steve.

We're happy to have you on.

How how's it going this morning? Yeah.

Thank you. Longtime fan of the pod. I'm, sitting in my Nice air conditioned office on the hottest day of the year in my life. So, yeah, it's not bad at all. It's been super hot here too. We've just been baking,

baking out here in the 100 degrees.

Wes, you're probably pretty psyched to be up there in

Canada. Yeah. Well, Canada gets really hot too. It's been, like, 35. Hold on. Let me convert 35.

Yeah. What? Yeah. 35. I thought that's cold. Yeah. Celsius

To Fahrenheit.

Let's see.

95 Fahrenheit. So certainly not a 100 just yet. But, yeah, Canada. That's one thing. People always Canada's cold, like, all the time. It's like, no. It's like wicked hot in the in the summer. And then it gets, like, cold for, Like February, and then it's, like, snowy for a couple more months past that. I I guess it depends where in Canada you are. People think that about Denver too. It's really funny. We were in line at LEGOLAND.

Some lady from Vegas was, like, talking to us, and she was like, oh, it's really cold in Denver. Like, no. It's like a 100 right now. It's we get a lot of sun. She's like, oh, it's really humid too. Right? I'm like, you know, it's It's like dry desert climate. Like, just, like, totally wrong about everything. We're we're, like, really far we're further south than Michigan or anything like that, so I don't know why people think it's so cold. Maybe just mountains. But Yeah. We get the wicked humidity here, which is, like, always, like people always say, oh, yeah. It's

it's 32, but it feels like 40. And then you always have to, like, convert for people because you'd be like, it actually feels feels like hotter than it actually is, I promise. You're in Hamilton. Right? Yeah. Yeah. Yeah, Ren. I've actually been there once.

I I'm originally from Chicago. Now now I live in London, but originally from Chicago. So I think we have kind of, like, similar weather. Oh, yeah. Yeah. Definitely. Brutal. Very humid. Yeah. Yeah. And, yeah, exactly. In Chicago, that's brutal winners too. Right? Yeah. It does. Yeah. That's both worlds. Yeah.

Alright. Well, let's, let's get in into the app there or get into it. Or do you wanna like, let's give you give us a quick rundown of who you are, Steve, and and what you do. For sure.

So, my name is Steve. I am, a kind of a designer turned developer, who I made my I I spent my career kinda doing prototyping and doing these Interactions and the trickier parts of design that just you had to build something in order to figure out how it should work.

And got a little bit into open source during the pandemic.

And then one of my projects, teal draw, ended up being pretty popular. So now I get to work on that full time.

So it's been kind of a journey, but, yeah, still still getting to code, still getting to design, and Trying to pack as much little microinteraction goodness into, teal dry as I can. Yeah. Microinteraction.

That's kinda the name of the game in this thing because this, has a lot of, neat little interactions, neat little general general touches, I think. So we'll be getting a bit into the tech of that as well. For sure. This episode is sponsored, by the way, by Gatsby. We'll be talking a little bit more about Gatsby through the course of this episode.

Okay. So let's get into it. Do we wanna kick it off with TL draw? I I think that'd be a good place to start considering it's So, yeah, I think a lot of people will find a lot of inspiration in this thing. So if if you're out there and you're you're Wondering what what is this thing? Go to tldraw.com, and it's essentially a drawing canvas.

And it It's really super neat. There's a lot of really cool things about it, but just toying around with it, play around with it, dive into the source. Look at this thing if you especially you're in front of a computer because it is essentially a drawing canvas, a vectorized drawing canvas built in React.

So You might just be kind of shocked at how cool this thing is. I wanna I wanna know a little bit about the inspiration for building TL draw. Oh, look. What made you decide, hey. I'm gonna I'm gonna work on this this problem that seemingly

seems very difficult in my mind. Yeah. For sure. So there were a couple of things that kinda converged in in TealDry. 1, was I had been working on this algorithm for, kind of digital ink, like a a variable width line. So if you if you're in SVG, for example, right, and you wanna make a a path or a line, Yeah. You can pick the stroke width, but you can't make that stroke width change over time.

And so if you're, like, used to maybe drawing on an iPad or something with a with With a stylist, you know, like, if you push hard, the line gets bigger. If you if you don't push as hard, the line gets smaller.

And I ended up working for, like, 6 months on this, like, problem for, you know, for for SVG, for for anything really. Like, how do you make a variable width line that's, like, sort of digital ink? And, mostly did it on Twitter.

Kinda shared my journey in the form of, like, little 8 second gifts, and so it's figuring out this algorithm.

And in the end, it actually turned out pretty well.

So I had this pretty cool algorithm that I could feed any points into, and it would give me back what looked like an ink drawn line, that kinda wrapped around those points.

I in the process in the process of working on that project, I ended up working on a project called Globbs, Which is at globbs.design.

And definitely check this out. It's it's Unlike any, kind of design tool you've ever used because the only thing you have to work with are these, these weird primitives called globs, which are kinda 2 circles that are connected.

And you could move each one of those circles around, and the kinda the curves between them would will, will always kinda smoothly connect those 2 circles.

And I I I was pretty sure that I could use these globs to create the the pressure sensitive line.

I turned out not to be able to to do that. The algorithm doesn't use globs.

But along the way, I made this entire design tool, essentially, like this kinda canvas, all in SVG SVG and React, for editing these globs.

And so, You know, early 2021, I would say, I had this ink. I had Gone through and and kind of figured out a lot of the interactions involved in, like a canvas based tool, like a design tool canvas.

And I also, had figured out a lot of, like, the the state machines for those things.

So, like, what what is the state chart for a for a Kind of an application like that look like.

I was invited to integrate my ink into another tool called Excalidraw, which is a similar, like, drawing diagramming tool for for developers especially.

And so if you go on Excalidraw .com, which is an amazing also open source project, My digital ink is used used there.

So I was working in their code base, and I was, like, thinking, like, you know, this is kinda like This is really cool. I bet you could just do this, a, with only React React and SVG.

And and, b, I I bet I could do this using Using my own kinda ink.

So I started working on that, like, a new design tool that Used, a lot of what I learned building globs, used the digital ink that I had that I could just, you know, create shapes and etcetera, like rectangles and Triangles and circles using using this algorithm.

And then, yeah, just kinda kinda put it together and see if I could make a little drawing tool, a little Kinda whiteboarding tool.

And it turned out to work pretty well.

And I also Kind of gained a lot more confidence in that. Like, you could build this type of what what I would normally consider, Like, like, you would use HTML Canvas to build this type of canvas? Yeah.

But the more I used just regular Dom, like, you know, divs and and images and stuff. I was like, actually, this is pretty fast. Like, browsers these days can actually handle this.

So I just kept going with it. And, Once you have a canvas that can put React components arbitrary React components, like, on the canvas and move them around and reorder them, then So, suddenly, there's a lot of, like, really interesting opportunities to to kinda develop with that. Yeah. So I I worked on it, started Doing it full time in July of 2021 and released it in November 2021.

So just a couple of months full time on it.

I open sourced the entire thing. So the whole website, the source code For for the whole thing is is online.

At github.com/ teal draw/ teal draw.

And Yeah. Suddenly, people started contributing, which was great. I think it went to, like, the top of hacker news, which was amazing at the time.

And, what was fun was, like, other teams started building with this and saying like, oh, cool. Like, a a canvas that you could put React components on the canvas. Like, You know, we could we could use that with our app or we could use that. You know? And so we we started getting a lot of cool integrations, and a lot of, like, interesting kinda Directions that people took it, and continue to take it, I suppose. Yeah. It's pretty amazing,

especially if you look at it. Like you mentioned, Canvas. Like, the first thing that I thought of when I saw it was, oh, this is probably done in in Canvas only because The types of tools that I've seen like this are typically done in Canvas. And so when you when you get into it and you find that it's DOM elements, SVG, it's really pretty neat. So what was the main reason you said I I would

Prefer not to do this in Canvas. It was actually another team that was working with it. Originally, it was just 1 big SVG.

And they were like, you know, we wanna put, Like, more complex things. Like, we wanna put, like, calendars or to do lists or, sticky notes and such on the canvas. And, like, how do we do that? And, you know, you can you can bait like, build those things in HTML Canvas is just a it's a super hassle. Like Yeah.

All the things that you get when you're building for the web, Like, text wrapping or multiline text. You know? And, like, all of that's out the window. You have to reimplement it from from, basically, from scratch.

So, yeah, I just kinda, like, ran it as an experiment. I'm like, alright. Well, what if instead of using SVG elements and everything inside of SVG, like, what if we just Switch to just full, you know, divs and and stuff, like, regular HTML, regular DOM.

And it turned out to work fine.

So, yeah, an image like maybe like a a rectangle rather than originally, this was like a, you know, SVG path inside of a group That was inside of the 1 big SVG that was the whole page.

Yeah. Now the that same shape would be it's still an SVG, but it's own SVG shape inside of a div that we're kind of positioning on the canvas that way.

And then so suddenly, we were still able to make our shapes, are are kinda drawn shapes, but this team that was building with TLDR was also able to throw together, like, a timer component that would have taken Months just I like to to do and test the UI. Yeah.

And they could do it, like, in an afternoon with with their same web devs and with no special graphics

Engineering, you know, need needed. And that that's a game changer, I think. That that's always been the, like, the hang up for me with Canvas is that, like, It's like Microsoft Paint. As soon as you put the pixels on the thing, you can't go get them and change the color, You can't select them, and and you gotta like, essentially, you have to just, like, maintain a huge array of every single thing that was done. If you wanna change something about it, then you gotta, like, redraw the entire thing, and that's really frustrating. And then, like you said, like, in the past, I wanted to, like,

Overlay some text or something like that. It's such a pain in the butt to to do. So it's amazing. Do anything, yeah, in Canvas. I I remember just doing a simple animation and just being like, wait. I have to clear the animation each time to read and redraw based on the new like, I just remember being very like, Oh, wait. So you're not supposed to do this without other tools

to help you do this because it's so complex. I mean, rendering in in general is, like, A really hard problem, but what what's fun is that the browser still has to solve that problem. You know, like, the browser is We're looking at essentially an image. Right? Like, there's a there's a paint cycle. Right? The the browser is painting the screen, and it needs to Paint only the parts that have changed. And it needs to paint certain things on different textures and then composite them together and, like, flatten them together.