Supper Club × Steve Ruiz Building a Drawing App

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,

And And they could do it, like, in an afternoon with with their same web devs and with no special graphics all in SVG And in the end, it actually turned out pretty well.

At github.com/ turned developer, goodness into, teal dry as I can. Yeah. Microinteraction.

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

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

it's really pretty neat. So what was the main reason you said I I would

to help you do this because it's so complex. I mean, rendering in in general is, like, A really hard problem, but Like, So I just kept going with it. And, and continue to take it, I suppose. Yeah. It's pretty amazing, I would say, and it needs to And,

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, these weird primitives called globs, which are kinda 2 circles that are connected.

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

Oh, wait. So you're not supposed to do this without other tools

each time to read and redraw based on the new like, I just remember being very like,

You might just be kind of shocked at how cool this thing is. I wanna I wanna know a little bit about the inspiration

a vectorized drawing canvas built in React.

for building TL draw. Oh, look. What made you decide, hey. I'm gonna I'm gonna work on this this problem that seemingly

So

Yeah. Now the that same shape would be who

It's like Microsoft Paint. As soon as you put the pixels on the thing,

is just a it's a super hassle. Like Yeah.

or, For for the whole thing is is online.

So, used the digital ink that I had that I could just, you know, create shapes and etcetera, like rectangles and seems very difficult in my mind. Yeah. For sure. So there were a couple of things that kinda converged in in TealDry. 1,

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, an image like maybe like a a rectangle rather than kind of digital ink, Months just I like to to do and test the UI. Yeah.

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.

are are kinda drawn shapes, but yeah, still still getting to code, still getting to design, was

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,

So,

all of that's out the window. You have to reimplement it from from, basically, from scratch.

And it turned out to work fine.

And, you know, you can you can bait like, build I

this team that was building with TLDR was also able to throw together, like, a timer component that would have taken

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,

And they were like, you know, we wanna put, definitely check this out. It's it's 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,

in

the syntax

This is

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.

To Fahrenheit.

I sure hope you're hungry.

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

really interesting application.

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

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.

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

Doing pretty good. Pretty good. Excited to talk about,

Let's see.

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? those things in like a canvas based tool, like a design tool canvas.

We're happy to have you on.

baking out here in the 100 degrees.

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,

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?

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.

How how's it going this morning? 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.

Oh, I'm starving.

Yeah. What? Yeah. 35. I thought that's cold. Yeah. Celsius Okay. So let's get into it. Do we wanna kick it off with TL draw?

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,

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

so buckle up and grab that old handle because this ride is going to get wild.

supper club.

like, you would use HTML Canvas to build this type of canvas? Yeah.

You know, early 2021, regular DOM.

And you could move each one of those circles around, and the kinda the curves between them would will, All the things that you get when you're building for the web, Like, text wrapping or multiline text. You know? And, like,

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

And,

Doing it full time in July of 2021

And so, and a lot of, like, interesting kinda Directions that people took it,

But along the way, I made this entire design tool, essentially, like this kinda canvas, Yeah. You can pick the stroke width, but you can't make that stroke width change over time.

to create the the pressure sensitive line.

Triangles and circles using using this algorithm.

And I also, I open sourced the entire thing. So the whole website, the source code 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 teal draw/ teal draw.

for editing these globs.

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, Thank you. Longtime fan of the pod. I'm, Which is at globbs.design.

My digital ink is used used there.

Unlike any, kind of design tool you've ever used because the only thing you have to work with are these,

And so if you go on Excalidraw .com, which is an amazing also open source project, And then so suddenly, we were still able to make our shapes, And it turned out to work pretty well.

I was invited to integrate my ink into another tool called Excalidraw,

Gone through and and kind of figured out a lot of the interactions involved in, So I started working on that, like, a new design tool that Like, more complex things. Like, we wanna put, like, calendars or to do lists But the more I used just regular

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

build this type of what what I would normally consider, SVG and React, Yeah. It does. Yeah. That's both worlds. Yeah.

cool. I bet you could just do this, a, with only React React and SVG.

in the process

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

So I had this 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, had figured out a lot of, like, the the state machines sitting in my Yeah. Suddenly, people started

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

in the process of working on that project, I ended up working on a project called Globbs, 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, Kind of gained a lot more confidence in that. Like, you could

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.

And I I I was pretty sure that I could use these globs Trying to pack as much little microinteraction And Kinda shared my journey in the form of, like, little 8 second gifts, and so it's figuring out this algorithm.

for those things.

will always kinda smoothly connect those 2 circles.

So just a couple of months full time on it.

like, on the canvas like, regular HTML, and

I ended up working for, like, 6 months on this, like, problem for, HTML Canvas Once you have a canvas that can put React components arbitrary React components, which is a similar, like, drawing diagramming tool for for developers especially.

that kinda wrapped around those points.

I had this ink. I had

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 also I had been working on this algorithm for, mostly did it on Twitter.

And then,

So I was working in their code base, and I was, like, thinking, like, you know, this is kinda like This is really

Used, a lot of what I learned building globs, So it's been kind of a journey, but, contributing, which was great. I think it went to, like, the top of hacker news, which was amazing at the time.

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?

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.

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.

a kind of a designer sticky notes and such on the canvas. And, like, how do we do that? pretty cool algorithm that I could feed any points into, and it would give me back what looked like an ink drawn line, 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.

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,

So, my name is Steve. I am, and released it in November 2021.

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

That's kinda the name of the game in this thing because this, has a lot of,

And then one of my projects, teal 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

ended up being pretty popular. So now I get to work on that full time.

neat little interactions, neat little general

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,

and it's essentially a drawing canvas.