Steve Ruiz and tldraw (ep690)

Hey there, Shop Maniacs. You're listening to another episode of Shop Talk Show podcast, front end web design development, all kinds of things. Uh, I'm Dave Rupert. This is Chris Coyier. Hey Chris, how are you doing today?

No, I'm doing absolutely, I'm doing infinitely good. Let's say.

Oh wow.

Really? That's how good I'm doing. We have a special guest, uh, uh, this week who I'm excited to talk to cuz he makes cool products along with his team, uh, um, at TL Draw. We have, uh, Steve, Steve Ruiz, right? From, from, did I say it right?

Steve Ruiz, but Ruiz, my Spanish friends say, no, no, no, you're spelling it, you're saying that wrong. It's Ruiz, you know, and everything. I'm like, ah, it's complicated. It's Colombian via the Midwest.

Your friends tell you it's wrong? Yeah. I mean, I have a last name, Coyier, that ends in -er, that's French, and people are like, it's Coyier. I'm like, you know what, you're probably right, actually.

It's my name.

But yeah, I sort of get to call the shots on my name.

I'm, I'm sorry.

Yeah. Well, it says the person with a, uh, uh, Anglophone compatible.

Yeah. I'm like Lord British the Third over here.

Jesus.

Um, two first names. Oh my God.

All right. Well, yeah, thanks for having me on. I, uh, um, I was saying just before we hit record that I, I I've probably listened to like over 100, uh, episodes of Shop Talk. Uh, it used to be a big part of the— my, my technical podcast rotation. Um, so yeah, it's, it's great to be on and chatting with you guys in person.

Well, it's our pleasure for sure.

Yeah, um, I use TLDraw all the time, so like, it's— yeah, I mean, well, I, I— this is maybe getting too far ahead, but like, there's just stuff like you know, I can just do it in my editor. I can be like new TLDraw and, you know, and then start like documenting something and then just save it as a file. And that's like, dude, that like architecture diagrams, all that crap, and you just like, it's there in the repo now.

It's awesome.

I just, it's super handy from that like perspective for me, even just to like, 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.

Yeah.

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 TLDraw. Like for real.

I appreciate that. I appreciate that.

I, I mean, they do though, especially cuz you know, you made this choice where when you get to tldraw.com, cuz you have some other domains that we'll get to, um, it's the canvas is right there. So that's great. And then there's just some simple tools and you draw and whatever. This story gets infinitely more interesting because I think it locked in a lot of our heads as like the good one for, for that job. And then the next time you're in the news, you're like, also, anything you draw can be code in a UI or a computer. I'm sorry.

Yeah, yeah, yeah.

That, that box you drew, it's a computer.

So like your news cycle went from from a little dry.

So should I give it a, give it a quick intro?

I know we're kind of, let's do it.

Totally. Yeah.

Yeah. Let us, let us know.

All right. So, I'm Steve Ruiz. I'm the founder of a startup called TealDraw, which grew out of an open source project of mine called TealDraw. And we make a product called TealDraw, which is a, a very good free whiteboard. But that is also built with the TealDraw SDK, which is a TypeScript and React library for building infinite canvas apps in React. And that, that is the thing that we commercialize. So if you wanted to build something that kind of worked like, like Miro or worked like Figma, but you wanted to do it on the web and you wanted to do it in React, and I mean like all React, like every shape on the canvas being a little React component, you could do that with TealDraw. And it's very good. And if you're not a developer, you can totally use tldr.com. It's free, it's good, it's collaborative, and it should be like, like you guys are saying, pretty lightweight. We also have a VS Code extension, so you can work with files if you don't even want to go online. And yeah, we put a lot of time and effort into making it, getting all the little things right, essentially. Right. It should be, should be a high quality experience, whether you're building with it or just, just using it. And then we—

so when you go to tldraw.com, essentially you're looking at angle bracket tldraw.

Pretty much, yeah. There's like, you know, there's, uh, there's some kind of application glue kind of, kind of code of like, oh, use this bucket for images, or, or, you know, here, use this particular, uh, multiplayer service. Um, but it's the same canvas, the same multiplayer service even, that we make available to, uh, to developers through the SDK. It's like a good reference implementation essentially, but it just happens to be also very popular reference implementation. It's like a kind of a demo that's grown beyond being just a demo.

I see that.

Yeah.

And like it has like auth, right? You don't get auth for free with it, right?

Although you don't have to log in. You can still use it if you don't log in. It's a— I don't care. Just don't reset your browser storage because that's where the—

You lose your diagrams.

Yeah, that's funny.

What is it?

Is it just local storage or IndexedDB? What's cool is if you, if you open TealDraw without logging in, in two different tabs, the document will sync between the two different tabs, which you kind of have to do in order to prevent these like kind of stale document bugs from like overwriting.

Don't I know it?

Yeah, but that's all happening locally. That's, that's happening using like browser messaging. Uh, it's like a real, it's one of the, one of the many flexes, the little detail flexes that I do when I'm—

that is a heck of a flex. People listening, you should be impressed by this because that's, that means that you're using, because you can also do it on a computer in another country and that's real time as well, which means you have two different real time implementations.

It is the same system, believe it or not. It's just how the messaging is being handled. Is it being handled via browser, what is it called, broadcast message, browser broadcast? You guys are the web podcast, you should know.

That's it.

Broadcast API. And the other is handling the messaging via WebSockets. But it—

Broadcast Channel API.

Broadcast Channel API. Oh, very good job. Good job.

I guess, I don't, yeah. I don't, yeah, I don't use that. I don't think I've ever used it. I've done some cross-browser-y stuff like syncing, but never, I don't think I use this.

So you can make tabs and windows talk to each other, which is kind of fun.

That's handy.

Yeah. Oh gosh. That's blowing my mind a little. I almost wish I didn't learn that just now. Cause we have, you know, you know, we have that real live, you know, collab stuff on CodePen. Actually Dave found this bug not long ago, you know, where you had two tabs open on CodePen and we do real time automatically. That way too. And that just two tabs in the same browser counts as that, you know, we need to reconcile for that situation, but we don't do it with broadcast channel. We just send it all through the same stuff. We use Ably, some kind of WebSockets, real-time thing.

Same, same thing. It's just, if you're, if you're offline, like it, then, then you can get into those, those, those, those problems.

Yeah. Yeah. It was, it was weird. It was like, I would. Looked at the thing on my phone and then closed my laptop because a kid had to go to bed. And then my phone said, great, I'm now in charge, and I'm like 10 versions behind. And it just saved, you know. And so then I opened my laptop up to like get cooking again, and it was like 10 versions ago. And I was just like, oh no, that's all right, right, right. Fun.

If you're— yeah, if you're logged in, well, we fixed it. You can fix—

yeah.

It was, uh, yeah, this stuff is hard.

That's all I'm really getting at is distributed.

Like I stare at the ceiling every, every night thinking about how, uh, TealDraw's data lives on like 100,000 different little computers all over the world. You know, like I have 100,000 little databases that all need to be migrated when people like go to the website after.

That's gotta be hard, huh? Like you just— what you're— I don't even know what you'd save. I guess I could dig into a TLDR file, but like, like what, you know, if you changed it, it's probably bad news, huh?

No, no, we have— I mean, this is the, uh, yeah, being an SDK really does keep you honest. Like, you, you do have to think about all these problems because, you know, someone else is going to do it, uh, as well. We have a really good system for handling migrations. Per record, per like the whole version. And that's baked into the schema, the actual files that we persist. We include that schema and those versions and things. And yeah, it just works. I have a very good engineer working for me, David Sheldrick, who has designed a lot of the systems that are including the multiplayer sync and other things. And we went, I just invested a lot of time and money into that migration system alone because I knew that it would be like a, it had to be really good. And it also had to be easy enough to use that people actually used it. Like downstream users. So yeah, very, very proud of that. Although it's less visible and less showy than the crosstab sync and some of these other things.

That's funny. Yeah. The best engineering is like just a 10,000-line TypeScript file or something. It's just like on how to move whatever from version 1 to version 2. But, um, that's cool. Well, and so that, so a lot's into this. It's an infinite canvas. It's multiplayer. It's multi-browser on the same system. We're saving data. We're, we're in. Were also like plugging into VS Code, but like, that's, I mean, if I, I watched a talk of yours, like from an AI conference, I think recently. And, um, like that's kind of where it starts sort of now, right? Like what's new in TLDraw?

Yeah. Well, the, the, especially on the SDK side, the proposition that I'm making is like, you can build cool stuff on top of TLDraw that we've solved all the kind of undifferentiated part of, uh, of the canvas. And you can use it in the same way that you'd probably use like, I don't know, Monaco editor or like Mapbox or these other things, which is like, I'm not gonna, I'm not gonna build that, but I will build products on top of it. Right. I will like use it inside of stuff.

Does make sense as an add-on or part of the core proposition. Like it, I don't know, it makes sense. I use it in Zoom, but not, it's not built into Zoom, but it's just, if I happen to be on a Zoom call, I'll just be like, well, let's look at a TLDraw quick. Cause I need to draw some crap for you.

If you're, uh, their own whiteboard inside of Zoom. I don't know if you've ever found it, but, uh, I have, right?

And I'm surely— they're big enough that they wrote their own, but they could just pay you, right?

They should just pay me. Come on. Yeah, Steve, Steve@fieldro.com, you know, get into Zoom.

Uh, I hear they have a chat app too inside. I've never seen it.

Yeah, I've never seen that. Apparently you could talk to people. It's incredible how far you can get. little indie project.

But that's open to any company that wants to slide in.

Yeah. But yeah, it's, it's, uh, it's a, it's a good foundation and it's meant to be a really good foundation for, for other things. Uh, and if I'm talking, you know, if I've set up this beautiful situation where I'm like, uh, I, now I have to prove it, you know, I have to prove that you can build cool things and interesting things on top of the foundation as well, which gives me the very, uh, Yeah, a great position of having a very business-aligned, uh, screwing around type of a, uh, um, job. So we've done a lot of starting to make more sense now.

All these little experiments you do are examples of cool stuff you could build on the TLDraw Foundation.

Absolutely. They're examples, they're marketing, they're, uh, references. A lot of them are open source, uh, and they're just us like trying to put some pressure on the SDK and say like, you know, what, what more do we have to build? Uh, ShieldDraw.com as an application, as a whiteboarding app, you know, gives us a lot of feature set things that we have to handle. But like at one point we were doing autocomplete on the canvas and using AI to generate the autocomplete.

Wow.

Yeah. Which was nuts. And, uh, hilarious also, cause it was, this is not a thing that draws well.

The hangman setup or something. It might be like, oh, I see what you're trying to do.

Exactly. But it would, and it was, it was really quite cool because it would— it was nuts. I mean, like, the model was just out of its mind with its suggestions. Like, it would— you draw a circle and then like another circle inside of it, smaller, kind of off to the side. And it's like, oh, yeah, you're drawing a face. Let me draw the other eye on the face. Right. And then, you know, you'd accept that. But then it would say, oh, look, the user is drawing circles. In a row, you know, they've done 2 already. Let me add the 3rd one, which suggests like an eye off to the side of the head, like a 3rd eye. And it would just keep going like that. So it would fall into these, I don't know, patterns and things that were just totally nuts. And it was beautiful and fun. But as part of that, like we had to handle this case where there's like a suggested shape on the canvas. So something that, is there, but it's also not there.

And, you know, opacity 0.5, bro. Yeah.

But it's also a collaborative app. So like if it's in the document, it's going to be suggested for everyone, you know? So you'll see my auto-completed too. So we had to be like, oh yeah, this would actually be, uh, yes, transparent and, you know, grayed out, but also like we need to handle this case where a shape is like within a certain person's domain, but like no one else's and stuff. So there's, yeah, those types of things. We just wouldn't run into them unless we were building cool stuff with it. I see. But our users would run into them and our system doesn't handle those things. So we should be kind of working ahead of them. And I just like, I want to learn to use, I want to play with the AI toys too. I want to build this stuff myself. And boy, we've had some interesting projects in that direction.

So one of them was, wasn't it? I don't think I ever saw the autocomplete one, but I did see the one where you do a little sketch in TL;DRAW and then it would like make it better.

Yeah, it was called Make Real. And this was the, you know, I would never say this, but it was described to me by one of the people at Lovable as the world's first vibe coding app. But, you know, I wouldn't claim it myself, but I'm just repeating what other people have said.

Put it on LinkedIn, but don't, like, don't, you know.

And what it was is that the GPT-4 with vision had just dropped. This is almost exactly 2 years ago. And that was the first time that developers could use a model that could see, essentially, that could work with images. And there was a designer named Sawyer Hood who was actually working at Figma at the time, who built this prototype of using TealDraw as a place where you would draw like a user interface or like a wireframe, essentially, and click a button and it would send that screenshot, it would extract the screenshot from TealDraw. You can do that in TealDraw. And send it to the AI and say, hey, AI, you're a developer, you're TypeScript or a Tailwind expert, you're a whatever, create a working prototype based on this wireframe. And it would, I mean, it could write code back then, now it could see, and it would make a really pretty good one-pager, like single file project based on what you had drawn.

And so the prompt was just what you drew, and your own secret sauce behind the scenes of a prompt that did— yeah. Okay. And one time, or did it go back and forth a little bit?

In Sawyer's demo, uh, which I think he got into a little bit of trouble at Figma for, um, since it was built with TealDraw. Anyway, uh, in Sawyer's demo, it was just that. It was just like the one shot. But for us, I mean, like, TealDraw's canvas is like a normal website thing. There's no, like, canvas element. Like, it's participating in normal browser rendering, right? So you look at a diagram and it's like a whole bunch of SVGs and divs and stuff like that on the canvas, which means it also supported iframes, which means you could put the website that you just created back on the canvas. And that was already like really cool because now you could kind of have multiple generations in, in parallel and other things. And then we're like, what happens if you draw on top of the website and use that as the next prompt. Like if they gave me like a, if I drew like a login screen or whatever, and you know, it said on the top, it said like, welcome back, you know, and then it had an input and a button, you know, for a username, password, whatever, continue. You could double-click into that. You could use it, you know, it's a really working website here, right? It's just sitting inside of the canvas. But then if you, if you took the pen or something and like crossed out the welcome back, the title, and then you use that as the next input, the, uh, the AI would just treat that as like a markup of its previous work and treat that as like an annotation. And it would create another one that was the same code, but without the welcome back thing. And the, so suddenly it went from like being this like kind of one-shot, like wow toy to being like, oh, that's like the— you could actually work with that. You could, you could really iterate towards, you know, particular behaviors or add complexity. Like, it's a workflow.

I think it is actually vibe coding, because didn't the guy who coined vibe coding say like, you don't even look at the code, it's not about that, it's about—

yeah, there's no code. Now everybody just uses it. Yeah, it's the vibing. Vibious vibe coding, uh, you know, we set the bar high. It was nothing but vibes. Um, but it was amazing what people had built with it, like You could put in a screenshot of like Stripe and say like, hey, make this look like this and stuff. We'll just do it.

That's cool. I was doing like a vibe coding thing this morning and a lot of it was, okay, get this div named this with this class and then remove the margin, you know, and like, or like, you know, make it not purple, you know?

And so like, totally there was a structured language for this type of thing. Yeah.

Well, I just. I, so I just, um, it would be a total flip to be like, no, I'm just iPad and watching my screen change, you know, but like, that would be kind of cool. I don't know, from, from like a whatever, let's just see what we can do perspective. I, yeah, the, the demo is impressive.

I guess I also want to say it's just very like, whoa, it's so cool that it's almost surprising to me that you're like investors or whatever and we're like, this is just as cool or cooler than TLDraw itself.

So there are, there are so many startups that we could have done in TLDraw. Yeah. Uh, but you know, we're starting to see, uh, I mean, we saw it immediately, like it was a huge moment, by the way, this like went massively viral in the end of 2023. Um, but you know, now Google's a customer and what is Google using it for? It's for annotation. Like it's for this, this type of, uh, workflow. So I think we're still the— that's great— a great kind of leader in the space of like using drawing and using visual kind of tooling in order to, to prompt, um, prompt models. And they're still good at it and it's massively underexplored. And if you're building one of these tools, you should definitely, um, whether it's us or something else, like include the, that, that annotation ability because it's just so easy to do things which in text would become like terribly hard of like moving things from, from exactly here to exactly here. Yeah.

All that stuff. Yeah. I tend to agree. Under, under, underexplored indeed. This all really comes together with the computer thing. So I'd love to get you to talk about that because that one's still, that one's working great, right?

I was using it today. It's awesome. Were you? Yeah. All right.

That's great. Well, I knew you were coming on, so I wanted, I had an excuse to play with it, but You know, it's not— I don't know, I'll let you talk about it first because it's— we need to make sure people understand what it does.

This is going to be hard on a— because it's, you know, these are all visual products. But if you can imagine a whiteboard where you have different components that are connected with arrows and like pretty loosely connected with arrows. So it's not like a patch programming type of thing where you have like input and output values and you're wiring things up in particular ways. You're just like this points to this, this points to this, this points to this. And some of those things on the canvas are what we call components, but whatever. They're just like blocks. Maybe we should call them blocks. And each one of them, each one of them does a kind of a thing using AI, right? So you might have an a thing that creates an image. And so it has a kind of an internal, what we call procedure that says, look at all of your inputs. So other components that are connected to you with an arrow that points towards you. And based on those inputs, create a prompt for like an image model, you know, and then run the image model prompt and then get the image back and put it inside of the block or inside the component. And whatever is pointing into, like, whatever those inputs are is going to determine the image that gets connected or created. And those inputs could be other images, it could be text, they could be, you know, an entire website, it could be anything, right? There's a kind of a shared interface for what these pieces of data can be, these inputs and outputs. And yeah, they could be other AI-powered components, right? Like, it could be a different image that was also created based on its inputs, right? So it's kind of like a directed graph of these little components connected to each other. And there are also block or whatever components named instructions, where you type in a natural language thing that you want this thing to do based on its— or produce based on its inputs. And the AI comes up with the procedure, right? You say write a poem, and the AI is going to write a procedure like, based on your inputs, you know, scan for thematic context and poetic valence and write a poem and then export it as a text data object or whatever like that. And we thought this would be a cool way of like just generating content and like, you know, chaining all these like multimodal prompts together. But really, really quickly we realized like, oh, you could just do computer stuff with this. Like you could have a text thing that has, you know, JSON in it, like state is 0 or count is 0. And with the right kind of instructions and arrows and stuff, you could have it, you know, make that number go up, right? Because this thing can include cycles. So it'll just loop, you know, and take the state as the input, update the state that is 1 more in the output and go, go, go. And then we added condition statements of like evaluate the statements and, you know, the answer could be yes, no, or since we're using AI for everything here, it could also be maybe. And then now you have a branching system that essentially have an exit condition. And there's really nothing that you can do with code that you couldn't do with this. It's just, A, it's not running, I mean, it is running code, but it's not like using the code to process any of this. It's using AI to process anything. So it is the world's most expensive and wasteful counter or whatever. And it's much slower than normal code. And it's much harder to express certain things with Tildra computer than it is with normal code. But it's fascinating because like, again, the thing that's running, that's evaluating everything, is a language model. And so it can, like, let's say you have an instruction that says, add up all of your inputs and output it as a number. All right, cool. You give it two little text blocks and one of them says 1 and one of them says 3, and it's going to output a 4, right? Easy. But if you give it like 1 and 3 and and like a hand-drawn drawing of an octopus, it'll give you 12 because an octopus is kind of 8, I guess. Like, it symbolizes 8. Or if you give a photo, a photograph of you holding up 4 fingers, you know, it'd be like, uh, yeah, like, that's wild. You know, the prompts that we give it are like, um, actually the thumb is not a finger.

Yeah. That door.

I can share my little one that I did this morning.

Just course for the YouTube people.

To be what you want it to be. And it's just a lot of fun. I think as an introduction to AI and as an introduction to like multi-stage prompting and workflows and all this stuff, like it's a great— Maybe I'll try to show the one I did today.

Where's my computer one? Can you see that okay?

Oh yeah.

I was like, I was like, I'm thinking of getting a sleeve tattoo, right? So I was like, I'm going to have it like draw a dude with his arms out, you know? And then I'm going to have it draw some overlapping circle stuff. Cause I didn't, I didn't like trust image generation to do it in one prompt, like circles on an arm. So I was like, I'm going to do them separately. And then I'm going to combine. I'm sure I did this all wrong. It probably can.

It looks fine. I mean, it works.

Whatever. Yeah. And then it smashes into this into this arm tat, like, which is exactly what I wanted to see. Really? You know, like, hey, that's a cool idea. And then I was like, oh, he's got set interval in there. I could just like make this thing. Every 30 seconds. Yeah. Just go baby. Show me it on different arms. That's awesome. I didn't spend that long on it, but that's the kind of thing. And you can see why TLDraw is a great foundation for this because it has all this crap, the cool arrows and the I don't know. It just seems like a great demonstration of why TLDRAW as a foundation is so cool to build these types of ideas. Yeah. I don't know. Awesome.

That's great to hear. I mean, like, I think like the, uh, there's a bunch of guys in like, well, I don't know, a bunch of people within the HCI community, the human-computer interaction community, which are, you know, really into building these types of experimental essentially demos, like demos of theories about direct manipulation apps and like canvases and stuff. But it's always been a frustration that like, you know, the core idea, the part that is like unique to that research for them is like really quite small. But in order to like demonstrate it, they have to build like the canvas and then the canvas doesn't have alt-drag. So if you're like using it and, you know, or whatever, you can't rotate stuff or all that stuff and like You know, TealDrop Computer, uh, it took us like 6 weeks, you know, end to end. I built the first prototype in a weekend and, you know, showed it to my 6-year-old daughter and she got it immediately. And I'm like, all right, we're shipping this. Yeah, it's a good sign. And, you know, all the stuff that we didn't have to build just sort of worked because we'd already built it. It's just part of the, part of the canvas.

That's interesting that it's so DOMmy instead of you know, it's a different approach than Figma's, like, whatever it is. I think it is a canvas, right? And yeah, it's like a canvas elements, WebGL.

Yeah. Um, which means you ain't putting an iframe on it.

You ain't putting all this other stuff on it.

Uh, it's, it's a trade-off. And I think graphical apps like Figma make the right decision there of, of let's make the ceiling as high as possible. Let's like, you know, make sure that you're, um, like the DOM is many things, but it's not. you, you get a lot, you have to sacrifice a lot in terms of, yeah, like ceiling, I suppose. Uh, the floor is still pretty good. And, and honestly, most people who use TealDraw won't ever hit a, like a performance issue at all. Like it works. We've done a really good job at making it fast, but it wouldn't, I wouldn't build a design tool in it necessarily. Well, or like a Figma style graphical design tool. I wouldn't build Photoshop or, or Illustrator inside of the DOM. But most people aren't building that. Most people, most people that I talk to are building like, like, oh, we want a place to, you know, basically a whiteboard except with this extra stuff on top of it. Or we want to build a tool for doing UI design that, that, you know, connects to my codebase and where we want to see our AWS dashboards on the canvas. And all these other things where, yeah, it's not about building 10 million nested, uh, frames and making sure that you, you know, can, can still, I don't know, um, zoom in and out without crashing your browser on mobile. I don't know, it doesn't work on mobile anyway, but yeah, or yeah, GeoDraw does. But anyway, these tools with canvas don't. But the, uh, uh, it's more about just making sure that the interactive content works, about making sure that you can actually practically develop it, which is hard to do on, uh, on other things.

Does it make, it makes me wonder, you've seen anybody hook up their own? Cause you think, you know, wireframing fine. Cause the default of TL;DR is like these, you know, black rectangles on white background and stuff. But that black rectangle is like a div, right? Div with an SVG in it. Yeah. Yeah. So, but it doesn't have to be right. Like if you paid for TL;DR and did your own thing, it could be a, uh, angle bracket image comparison slider or whatever else from your design system. Yeah. Yeah.

People like a lot of times, uh, I mean, the real, like at one point TealDraw's canvas was just one big SVG, uh, because I built a different app before this called Globs, uh, which was a design app that, that used globs, uh, as the only primitive that you could use. It's still there. globs.design. It's really fun. but that's just one big SVG. TealDraw was the same way. And then, what if like an early sponsor of the project, so kind of design partner was like, hey, we want to put a to-do list on the canvas and we already have the to-do list like elsewhere in our app. Um, is there any way for us just to use that to-do list exactly? And I was like, well, SVG foreign object, kind of, you could do foreign object. And then I'm like, no, you know what? I don't, I don't think that's not really well supported on all the browsers and there's kind of some other stuff and I did my research and it turned out that the browser is just way better at rendering hundreds or thousands of SVGs inside of a div than it is rendering a single SVG with a lot of different things inside of it. So I was like, you know, 2 days later, I'm like, all right, I've changed everything. But yes, now you can put in your custom custom to-do list on the canvas. And a lot of our customers do that. Their users just take— it's like ClickUp is a customer. They use TealDraw for their whiteboard. And yeah, you can put your to-dos or your documents or whatever on the canvas. And it's the exact same editor, like the exact same React component that they use. I don't know, elsewhere in the ClickUp app. But it's rendering inside of one of our little little shapes. So I see, I see.

That's not only can it not— doesn't have to be a div or a DOM element, it could be an interactive React node.

Yeah, it could be. I mean, whatever you got, you could, you could even— I mean, whether it's like an iframe, like literally anything that you can put on the canvas. It's a lot like if you guys use like Notion. Notion is a structured document editor, but it's, it's built with the web. So anything you can put on, on a website will, will work inside of Notion. Uh, and so that's how they get things like embeds or that's how they get things like videos and images.

Cause it's just, yeah, there are some parallels there. Just it's, you know, they enforce some constraints over where it can go and stuff. For sure.

We're, we're an extra dimension or two.

Oh yeah. Yeah.

They're infinite canvas in the, it only goes in one direction. Oh yeah.

Yeah. Boring. I, I think this is like sorely needed, or like this tool like Computer, um, it is sorely needed in this like AI workflow system because I mean at its core like, like an LLM has like a system prompt and a developer prompt, right, that's configured by the builders, and then the user prompt like make me a cat or whatever, and then the engineer's prompt like always make the coolest thing that they want, you know, make it Studio Ghibli. And then the like system prompt is like, no pornography, no drugs, you know, stuff like that, right? Like, so it's like just very like, you know, and having that visualized. And now we're in this whole other era, like this has been like my week or whatever, but it's just like, you know, agents, and then these agents call other skills and all this, you know. And so it's just this like tree of context happening, and I just have to know, you know, even like Claude, if you like run through Claude and be like, add a kitty cat to my homepage, it like, it's going through a flow that it thinks is correct. It will then like go step by step, ask a question, yes/no trees or whatever. Um, and it's cool, but I think, you know, if you're like a designer or somebody who doesn't live in terminal all day, that can be sort of opaque to be like, let's just terminal our way through this, you know. So I, I just, I like this kind of visual medium of like, here's kind of where we're going through or drawing our way through like building what you said, or this is our decision tree that we're kind of making.

Um, I think that's sorely needed for like stuff like these, you know, cursor needs a little TL draw in the corner so you can be like, no, no, no, like this. And then you just draw.

Yeah, basically, like, don't, like, don't— I, I had the situation where it's like it scaffolded the whole application in like 1 second, you know, and that's like amazing, good job, way to go. But then it's like, then I'm like, okay, update some this, and it's like, oh, there's just like so much stuff. Brought, you know. And so it's like, yeah, you just wrote all that stuff, like, what do we do, you know. So I just, I think like, you know, it would be kind of like, hey, build this piece first and then we'll build this piece, you know. Like, that would be kind of cool to tell a computer to do, you know. Yeah.

Um, which I guess I could type all that out, but man, you know, like, yeah, the, uh, I mean, I'm, I'm with you that I'm like kind of like discovering this, like discovering this as I'm working. Like I'm like, I don't have any specific edge on knowledge about AI. Like I don't have an ML background or I've never built, like first AI stuff was probably with GPT-3 where we were trying to get it to do like a pen plotter type of thing, but it wasn't good. Because I couldn't see yet and all that stuff. So I'm definitely with you that I'm trying to catch up, constantly trying to catch up or stay on top of the way that these things are happening. But I think that the candidates kind of gives you a lot. How do I say this? A lot of the problems in AI, I would say, the UX problems of AI, are the same kind of UX problems that you have when working with other people or working, you know, on any projects. And the tooling is just way behind that. Like, we've solved a lot of problems around collaboration using various interfaces or whatever. Like, we know how to do a to-do list. I do feel like we're kind of rediscovering this within the context of AI. Like, I feel that all the time of like, oh wait, isn't this like this other thing? Like, aren't we just reinventing email, but just between these agents, like, oh yeah, like, all right, well, let's just use email, like, or let's use some sort of thing that works like it. We've done a lot recently with, with kind of agents inside of TealDraw. If this works, I'll, I'll give you a demo because I'm so proud. I don't know if people follow me on Twitter, they've probably seen this fairies, the fairy stuff. Have you seen the fairy stuff at all? No idea. New to you guys? All right. Let me see if Let me see, let me share my screen. Like F-A-E, like, you know, like little, like floating flying.

Okay, okay, gotcha. Just making sure we're talking about—

yeah, we're talking about Peter Pan, Tinkerbell, Tinkerbell. You got it. Um, give me one second. This is a video podcast as well, right?

I'll try and, uh, we have, we have YouTubes and we can mouth blog it. So good.

I'll try and be as, uh, as talky as possible for the benefit of the people listening. This is normal TealDraw. I've enabled fairies for myself, whatever. And in the bottom right corner, there's a little panel where you can, you can talk to, grab these fairies. And these fairies are essentially agents that are spatially kind of like aware. They're placed on the canvas and I can talk to it. I can say, Hey, make me a task list for my app I'm making called Cat Delivery, where a person can order cats. If you need a couple of cats, you got it. All right. So this is, you could see it thinking.

So not the UI for a cat list, but just a list of tasks.

Yeah, just give me like all the tasks, the things that I need to do. And now it's making the stuff on the canvas. Oh, wow. This is, it looks a little crowded here. I think they're overlapping. So we'll see if it recognizes that. So it should review its work, but no, it's, there we go. Created it. One, looking at the image. There's some issues with overlapping. Yeah. Yeah. So let's see if it can figure out the, uh, the fact that all of the notes are overlapping. Oh, there we go.

It's dealing in, it's doing in coordinates. Oh gosh. There's some self-awareness here. Oh, that's a lot of tickets. Yeah. Wow.

It's quite a lot. We have to do some, some, uh, backend stuff as well. Yeah.

Watch out, Notion. Look at that. I can't.

Yeah. And now let me, uh, do the next one.

I like that the fairy is flapping its wings while it's doing that.

Yes. Well, you know, this is the thing that the, like I was saying, like we, you know, one of the problems, I don't know if you guys use Cloud Code, but I like am constantly running like a bunch of Cloud Codes all at the same time. And I have such a hard time just remembering which ones are which. And so, or like which ones are active, which ones are waiting on me, all that. And so I think, you know, like here you can customize the fairies, uh, hat, which should help to, uh, uh, to differentiate between the fairies because, uh, you can also have a bunch of fairies, uh, at the same time. So let me, uh, let me select all these guys.

Uh, see, this is what people want to see. Where's Maggie Appleton, right? She's always writing about like, you need to start thinking about AI, it's not just a chatbot, it could be any kind of thing. And everybody's like, how about a, how about an input? You know, Steve's like, how about little fairies? Dear friend of the draw.

She's a dear friend. Let me select this guy as the leader. Make the wireframes for my app. And so sometimes you need some— You're going to get them all to work. Yeah, you want to have agents working together, right? I mean, this is a collaborative canvas. This should have the ability for not just the things to work with me and they can see my stuff and I can see their stuff, but they should also be able to work with each other. So this is stuff that we're working on right now. This will probably be the next kind of some marketing-driven, Twitter-driven development project that we work on where, yeah, they, I think they've, they've split up the task into, here's the to-do list where, yeah, into, into the different staged wireframes.

So one of them makes a plan and then it starts giving them the other fairies' jobs.

Yes, exactly. This one's in, in, in boss mode. And so it's created the plan and distributed it to the other ferries. Now, much like Make Real or much like TealDraw Computer, this is firmly in the realm of kind of crappy, but also kind of amazing, I hope. These models are not great at doing stuff on the canvas, but I think it hopefully kind of points towards a future where we have, where we have more collaboration on the canvas potentially with these agents.

Yeah, it does make you want to see this in Claude Code, doesn't it? Because yeah, I constantly use the— or in Cursor, you know, you select some code and then you hit like Command K or add to chat or whatever it is because you're always like, please work on the code that I'm pointing you towards. Right. Um, and it's a little bit like that. Like, yeah, I think we can— I've given you some instructions and some like, I don't know, stay here-ish. Yes.

I think the, the kind of like, I don't know, we, we have all sorts of, uh, fun things that we want to try with these, uh, with these guys, uh, of having, uh, different agents that are kind of like responsible for different parts of the canvas. You can imagine a, uh, kind of like—

AI companies love this. They're like, you, you just burned 5x the tokens because you have 5 little fairies floating around.

Every, every, uh, managed to the bottom line. Um, but you know, those aren't bad wireframes and they're, they're actual stuff on the game. It's not like a, an image or anything like that.

So I've been to hackathons where it took us till 2:30 in the afternoon to get this far.

Yeah, I know, they just need to know how to not make things on top of each other. It's a shame.

Yeah, uh, well, but you know, some of it too is like just, it's getting a wireframe or prototype or something that you can react to and be like, yep, nope, nope, yep, nope, you know, like, and I'm, you know, I do like the prototyping and wireframing part of the job, you know, like, I think that does, I think people who are good at it are good at it and all that, like, they should be able to do that as a job, but I just, I think it's just kind of this interesting, like You know, it gives you, I think somebody, I've read a post or something is like, AI is good when you need a lot of options or you need to like react to an option to see if it's the right thing. And, um, I think this is a great example.

I also love the, like, it's like Google image search or whatever with my tattoo. I just, I like, I know what I kind of want, but I also want to look at like 100 examples. Just, you know, and in, in a sense, AI, it's not, it's not its only job, but it could be one thing that it's good at is just like get me a little further down the road so I can compare stuff.

You know, I've heard that one of the, uh, one of like the customer categories or something for TealDraw is, uh, creative agencies where there's like a phase where you're like sitting down with the creative director and you're like, all right, let's come up with a bunch of ideas for the, uh, marketing campaign or something like that, ad campaign. And you know, if you've watched like, like Mad Men, like, you know, they used to have a guy in the corner with a sketchpad and be like, you know, do you want it to look like this? You know, or do you want it to look like this? and, uh, you know, none of those were going to become the thing that you put in front of your customers. It was all just kind of just sketching, right? Uh, and apparently the, uh, doing like AI slop, especially on a canvas, like in a, in something like Miro or, or in my customers' cases and something like TealDraw, uh, just accelerates the hell out of that process of just like, let's whip out tons and tons of like throwaway visual media so that we can like dial in what this customer wants, you know, do they want it, uh, you know, okay, they love this Western, uh, you know, theme for the, the, the beer campaign, you know, like what if we, uh, you know, well, what if it wasn't a Western? What if it was in space instead? You know, and they'd say, oh no, no, no, definitely a Western. Or like, well, actually, you know what, I think could be better if it was something else. And like, oh, let's see that, you know, because the output isn't, you're not like making the ad, you're not making the videos, you're not making the images, but you're, yeah, you're trying to make that decision, right? Like, just show me your, show me all the options and, and guide me through that.

Yeah. And if you can just see a little bit of it, you might know the vibes are way off.

Yeah. Quicker. I mean, designers do this all the time. Like the alt drag to, to copy, you know, in, in Figma is probably like the most used My most used feature. Alt-drag to draw. It makes all differences to, uh, to this 100 times. Yeah. You know what I mean? The, the kind of clone drag, the, uh, the, the duplicates that modify this.

Oh, oh, oh, I see. Alt-drag and you just get an exact copy. Yeah. You can do that in TLDraw too, right?

Yeah.

Um, so what's the best thing that could happen to, you know, TLDraw the company? Ooh, best thing that could happen to TealDraw the company.

I think if we end up being like the default choice for this kind of software, like if someone's building a canvas thing or integrating a canvas or wants that type of feature, if like, if it was impossible not to use TealDraw or if like, then that, or, you know, not that, but if it was, if it didn't make sense, if it never made any sense, couldn't make sense not to use TealDraw, then that would be good. That means we've done our job right, right? But also I think that the canvas itself becoming more popular or becoming like a more expected part of productivity software or just an expanded category would be great for like, I would be very happy about that. Yeah.

And it's so— Make the canvas cool again.

It's just massively underexplored. Like all the, the big Canvas apps that I can think of are fairly traditional. They're whiteboards, they're design tools, they're, you know, maybe batch programming, maybe workflow tools. But, uh, boy, you can do a lot with, with the Canvas. Like, um, there is— I mean, people have used this to— as authoring environments for, for games and Liquid simulations. Uh, folks have built essentially 3D chat or like 2D chat, you know, situations. And certainly all this AI stuff is really pushing the boundaries of the types of software where you could use this. People have built all sorts of stuff that don't look like or work like whiteboards or design tools. And who knows, maybe the killer use case of the canvas is still out there. Uh, it might be discovered, you know, they're expensive to make. So yeah.

The infinite part is interesting too, is that, you know, there's been, I, I, I don't, I wish I had the, the, the research of this, but maybe it was, I think of it as Adobe Illustrator, but there was like, there was like a time before in Illustrator where you had to define the rectangle you're about to draw in. And then there was some release. At some point where they stopped. You still can do that if you want to, but by default they said just draw wherever. And that was like a, I was like, oh my gosh, you know, that was the first like infinite canvas moment I had. That's like, actually, I think that's really smart. You know, I don't know if Adobe was the first or whatever, but then it started to become a little bit more the norm that it's like, I don't know, you just have infinity space, I guess.

It's, it's great. It's, um, because yeah, most people don't use it. Like, uh, a lot of folks, most people don't use all of infinity, uh, when they, when they work. But, uh, semi, like Figma is not an infinite canvas. It feels like an infinite canvas, but it's actually just a very large canvas, right? Like it has a interesting, uh, and it's not even comparatively, it's not even that large. It's like, you know, 30,000 by 30,000 or something like this. Uh, but you know, you just don't. Ever reach the borders, but the borders are very big.

I've never even thought to just keep dragging. Yeah.

You could find it. Yeah. Uh, TealDraw is infinite, but I, I'm sure there's some sort of like, uh, 64-bit, you know, memory that'll roll over. I'm sure you can find the error screen or the, the kill screen in, uh, in TealDraw if you, if you go far enough. Uh, it has made certain feature work a lot more interesting. Like the, the minimap actually is like a really gnarly piece of coding. Uh, just cause like, yeah, how do you do a minimap on an infinite canvas? And so it's—

Well, isn't it a UX concern, right? You're like, I know I drew a little flower. Where the hell is it? Oh yeah.

But it needs to be there. It needs to. Right. But like how you show, yeah, it's just like dynamically defining the size of the bounds of the canvas that are shown in the minimap based on, cause it's showing the whole canvas. It's just the canvas is infinite. So we're showing just where the shapes are.

Um, but yeah, that's, that's a, that was crazy piece of, uh, of, uh, and then when it comes to exporting, isn't it like, I don't, I don't need 30,000 pixels. I need wherever, whatever I happen to draw.

Yeah. If, if you, uh, if you export the whole canvas, sometimes you will, and your canvas is large, sometimes you will end up with like a, you know, 50 megabyte PNG that's like, you know, gigantic and will, will crash your, uh, preview app on Mac or something. But, uh, You know, you have, you have, that's on you. That's what you asked for. Yeah, man. There is, I did learn that there is a maximum size of the canvas element on all of the different browsers as well. Every browser has its own definition of what that maximum size can be. Oh, interesting. And so you cannot make a canvas that's larger than that. But you only use, we only use that canvas element when we're exporting an image cuz you have to like, oh yeah, you just draw to it real quick and then yeah. But if your, if your image is, yeah, depending on your browser, if your image is like 100,000 by 100,000 or 100,001 by 100,000, it'll, it'll say like, nope, sorry, too big. Can't do that. Gotta, gotta respect, uh, memory. Yeah.

I bet there's all kinds of edges. Like what if there's a, you know, you're at like minute 1 and 29 seconds into a YouTube video. You don't get that in the export, do you?

Like the, the— No. Uh, hold on. Wait, like on the canvas, you mean?

When you export? Yeah. If you like have a pause— Yeah.

Like if you have a YouTube video on the canvas, no, you won't, you won't, you won't, that won't be included in the export. Cause the other, I mean, working in the browser is one of those other trade-offs that we had to make, right? Is that like, uh, the browser does not give you a way to get a texture of an element. You can't say, hey, give me this HTML element, give me this div but as an image. Like, does the browser have that knowledge? Yeah, it definitely has that knowledge, right?

It totally does, because you can do it in DevTools, you know.

Yeah, but, uh, yes, but when you do it in DevTools, it's not giving you the raw, um, texture that's in memory. It— if you ever do, like, have you ever noticed how it like kind of flashes on the screen for a second? When you do like an export screenshot, uh, in, in the dev tools. Oh, right. Yeah, yeah. Because it has to render it. It like has to paint it. It has to put it on the screen. Uh, and then the thing that is exporting it is like Chrome, right? Like Chrome will give you the, the, the texture or something like that, but it'll— it still needs to like paint it first, uh, and like kind of load that texture in, and then, and then Chrome will do that. But, uh, Chrome won't do that for me.

I guess we know that it does through view transitions now, right? Cause it aren't those, they, all the view transitions, people tell you that they're not screenshots, but they're kind of screenshots, right? Like when, yeah.

But that's not screenshots. Again, I swear. Again, you can't, I mean, like you can screenshot something just by saying like, whatever, will-change transform. It's just like, hey, don't repaint this, treat it like a texture, put it on its own layer or whatever. Um, but like there's no API, there's no JavaScript API that I can call that says, hey, grab that texture from here and, um, I don't know, download it or put it on a canvas or do something else. And I think that's for security reasons, but either way it makes my life super hard because we have to then, uh, assemble our screenshots ourselves essentially, um, and, and, you know, create an SVG and then Create a PNG of that SVG and then, then put that SVG onto the canvas and export the canvas. It's like a juggling act. And I— That's funny because you're like— or anything else.

What? Well, I don't know. I don't— I'm one user, not a very huge one probably, but I don't need it or want it, you know, like I don't care that, that I can export from TLDraw. Like what if only 18% of your users even cared that they even could do that? But it was 82% of your, of your, I don't know, paying users or your development time.

I think you spent all your time. Yeah. Yeah. The promise, especially to developers, is that we've thought of all the basics and we've thought probably too much about all the basics. And, and we've, it's like, it's handled. It's like solved. Essentially. But even for users, like, there's a lot of, like, there's like a ton of edge cases and like many, many situations that most people won't get into. But if you're doing creative work, if you're putting ideas into a website, like real ideas of this is, you know, I'm making decisions around what my website is going to look like, or I'm making decisions about what our roadmap is going to look like or whatever. Then, uh, if, if things don't work, even if those are like small things that feel like they should work of like, oh, I just, I guess I can't, you know, rotate things, uh, if they have different parents or something like that. Right. Or I guess I can't drag this into that or whatever. Uh, or, or these, the system that I expect to work one way suddenly stops working that way. Um, I think that that really undermines your confidence in doing creative work, or it certainly does for me. It, you know, it always makes me, you know, it gives me this moment of like, oh, you know, like, all right, what else didn't they think of? You know, how much can I actually trust this application? Or how much can I, can I trust this, uh, this user experience? Or it'll just take me out of flow or like distract me or something. Uh, and the canvas is full of these places where different systems like undo redo or, uh, multiplayer, or, you know, uh, the, the whole scene graph or whatever. Like they overlap in weird ways and you just have to, have to handle it. An example, if I have a shape and I put it into a frame, right? So it's now, it's like kind of a child of that frame. I can move the frame around and that, that child moves too. And then I resize the frame such that that shape is no longer visible, right? Like it's like it was on the left side, but I've made it narrower. So it's no longer kind of visible as, in the child, in the frame, right? Frames clip their children. Um, you know, like, what should we do? Should, should the shape stay there and be like hidden within the descendants of this frame? And you would only be able to see it if you, if you resize the frame again to show it, you know, or should it fall out? Should it kind of just end up on the canvas because it's no longer like visible within its parent? Well, what if there's another frame sitting behind it? Should it fall into the next frame or should it go back to the canvas? And actually, wait a second, if it's like a shape like an L, so some of its pixels are outside, but there's still part of its bounding box which are inside the frame, like, should that fall out or should it need all of its, like, all of its bounding box to be outside of the, not visible on the frame in order to fall out of the frame and all that stuff? And like, we've handled all of that, like, at a level that is, slightly ridiculous when you, when you show it in isolation, but like, if it didn't work and if it didn't work consistently and if it all didn't work, then, you know, TLDRAW just wouldn't feel good and you wouldn't be able to maybe point to why, but like, yeah.

Uh, you're not going to vibecode TLDRAW, I'm afraid.

It's a little too complicated. Uh, yeah, maybe give it a couple of years before you try and, uh, yeah, TLDRAW, but I don't know.

There's like a, it's boxes. How hard can it be? You know? But But then, yeah, like you're saying, oh, you sweet summer child, that's the beginning of your naivety about the situation. Yeah, it's just, I mean, I don't know, I'm messing with arrows right now and, you know, and it's like, I can't do that. Like, or, or like, I can spend my whole life making arrows point to boxes and then like bending them and like draw— dragging them around and fix it, you know, like But you guys do it, and that's probably a lifetime of work for me, you know.

That's— it's a lot of, uh, I've spent the better part of my, uh, my 30s thinking about arrows and working on arrows. So yeah, yeah, there's, uh, fair enough. Yeah, there's, there's, uh, there's no bottom. Like, there— it just goes deeper and deeper, uh, the, the things that we've had to do and that we continue to solve, like with the canvas. But, you know, I tell people, like, when I'm talking to teams and stuff, and, you know, we're all developers, we tend to want to build things. That's our job. And so sometimes the communication on my side is like convincing people not to build something, which is kind of a harder thing to do.

But I suppose it is your job, kind of, right? Yeah. This part is already done. So could you just do something on top of it?

Yeah, exactly. I'm like, I'm like, I'm sure you, I'm sure you could do this and that you would like, but there's a lot of stuff here that like you wouldn't, you wouldn't do because you want to get to your cool, like the features that matter for your, for your customers or like that they will notice. Um, and if, uh, if copy and paste just kind of just works and no one notices it, no one, no one questions it, it just works. Like, well then that's That's, you know, a job well done. But, you know, that can take— like it took us, and this is our thing, man. But it still took us like a lot of time to get that right. And yeah, so I'm like, oh, trust me, use my undo, my canvas, whatever. And you build the cool stuff on top. And that's— that normally is understood.

Yep. It seems like it's a, it's a pretty clear business model too. You have, uh, it's, you know, it's free to get started or whatever. Do you call it open source or source available?

Or I try to avoid open source because it's not really open source. Uh, yeah, right. Source available. It's all of our code is on GitHub. You can contribute, but you know, you need to sign a CLA and you need to, um, if you do want to use it in production, like you need a license key, either a hobby one, which is free for non-commercial type of stuff, or if you're a business, then you pay or you buy a license from us. But either way—

Right. And it goes right from, you know, like you're talking to businesses that are using it as a part of their core business thing. So it's not like $20. It's $6,000 a year, right? Yeah.

For teams of under 10, it's $6,000 a year. But for larger teams, it's more than that.

It's email us. Yeah.

Not like there's not a lot of companies out there who are like selling JavaScript libraries or selling npm packages essentially. Yeah. Yeah. But I, uh, I hope there's more honestly, like I, I've talked to a lot of teams that are building fantastic stuff, uh, and are, are frustrated just because there's like, you know, yeah, but we can't like, how do you even monetize this? Right. Like, Uh, if you were making, uh, did you make, Chris, did you make the, uh, shadow box or, uh, like the slider? Was that you or was that someone else?

I have made a couple of sliders, but that was a long, that was like jQuery days.

Yeah. Yeah. But I remember I thought that, I thought that was your work.

Uh, I had one called the Anything Slider. Maybe I did have a box one too. It's been so long.

Uh, yeah. Or shadow box.

Definitely made one and shipped it.

Yeah. Yeah. Okay. Well, like. You know, if, if I don't know, maybe, maybe shadowbox or whatever, these like lightbox kind of effects that was all over the internet in 2010 or something.

But what's the model? Cause didn't we just, we can't keep you too much longer here, but there was a, there was a, who's the, it was a Corey, the fellow who made Quiet or something just recently, amazing package of componentry all in web components and decided to do kind of a similar model to you is that it's, You know, source available or whatever, but please buy a thing if you're gonna really use it. And he was out for a couple months or whatever and he sold like 2 and they were, and his weren't $6,000. They were like, it was like $100 or something or less, wasn't it? So he's like, well, that's not gonna work, you know? And so that's surprising. Like what should we have told him? Like, don't, I don't know. Make it $6,000 or, you know, to make it— does that change people's mental math of what it's worth or no, it was, people just don't need another one of these cuz you got competitors for days and there's only, there's probably one TL:DR. Yeah. We, we benef—

we, we're lucky. No, we don't have a lot of competitors, although it would make a lot of things easier if there, if we had a lot of competitors. Um, I thought like pricing and such. Uh, But yeah, I think there's, there's probably a few things. One is like if you, if you do have a lot of open source competitors and it's maybe like a low where like the next best thing is, is good enough, then, then that's, that's one thing, right? Uh, that's gonna be a hard, hard sell. Although you'll probably still find, uh, companies that were like, look, uh, yeah, we could get this for free, but now then we don't have a number we can call. You know, then, then we don't have any guarantee about maintenance or anything like that. So, I mean, you could make a button component and say like, well, this is, you know, this is Dave's button. And if there's anything wrong with the button, you can call me and like, you'll probably sell it. Yeah. Day and night. Yeah. Like day and night, 24/7. I'll, I got my number. You know, if it doesn't click, uh, it's guaranteed to click, but if it doesn't click, uh, I'll, I'll make sure that it clicks. Uh, so that's one thing. The other is just marketing, like making sure that people know about your stuff is really hard. And that's true for any product, but it's also true for developer products and making content that— and just making like marketing to developers is tough. And you can only really do it by building stuff and that stuff has to be kind of cool. Otherwise no one will notice. And yeah, I, I don't know. I don't have the answers here. Like we're, we're very much figuring it out for TealDraw. Um, but, uh, probably something more than just putting an AGPL license on it and saying, I'll sell you the, the other license. Uh, although that would be probably a place to start if, if someone wanted to get into this. It's just like saying this is a sort of, yeah. Well, you know, well, I mean, not, it's not like that. It's just saying like, these are the, the, the terms under which you can use this. And if you don't, if those don't work for you, I'll sell you the other terms that, that will work for you. Yeah. Yeah. And yeah, companies tend to be pretty well, like, honest, I would say, especially around licensing, because their lawyers will keep them honest. And if they ever want to raise money or go through due diligence or exit or something, someone's going to ask for, give me all the licenses of all the software of everything inside of your, your company.

And yeah, otherwise it's a litigation weakness. Yeah.

I, I, I, I agree. I think like we need like a term for it that feels more like almost like outer source. Like I'm outsourcing, like, like my, like a whole critical feature, like, like Mux, uh, has this Media Chrome web component video player that's fully customizable, stylable, everything. Speaking from experience, you do not want to build your own video player. It sucks. It's terrible. It's— if I hope you like chunking because that's your life for the rest of your life now, you know. And like, I just— that's— I think that's cool. I think like that is like worth like paying a big chunk if we're like whatever CNN or who has a garbage one or, you know, a news agency or local news player, like just pay for the media player that works good and is themable to your brand. Like And same with TLDraw. It's just like, don't do that. Don't, don't hurt yourself. Like, just do this. If you make a bajillion dollars, you can maybe do your own thing. But like, it's just, it's only pain, you know. I wish we could like understand that and be like, for less than the cost of a full-time employee, you get extra bandwidth and a whole thing, you know. That's amazing. It's an amazing deal. I don't know why it's not normal.

But I think there's, um, Richard Stallman ruined it for everyone. Yeah, that guy. I think there is a culture of like, just share your work, right? Uh, and there's not that many things that are so complicated and so undifferentiated. Like with MUX, if I did take those years and build my own video player or something, You know, if I got everything right, it would just look like Mux. It would just be the same thing that I, they ended up with. Right. And it's most, it's not entirely true for the canvas because it's more kind of maybe opinionated. Um, although maybe it's not true for Mux. Maybe Mux is more opinionated than I can see from the outside. Uh, but yeah, if you, if you really went hard at building a React-based canvas, uh, for a couple of years. With like some really cracked engineers, like you'd probably end up with the same thing that we have. Uh, or at least since it's undifferentiated, since it's like a commodity feature, your users would just either assume that you'd made it with Tildraw or just wouldn't even notice. Um, it's just, it's just how a canvas should work, right? No one wants to build that stuff. I don't wanna build maps. I'm never gonna build, like, I'm gonna use Google Maps or I'm gonna use, uh, uh, Mapbox.

That's a good example that nobody would even think about even trying to build.

Yeah, never. I could live a million years, I'll never try and build a map. Uh, there's like spreadsheets are another one that's really gnarly. Data grids, things like AG Grid where you're like, oh God, millions of rows and all that stuff. Like, I don't want to eat that. Like, uh, let me buy, let me buy that. Uh, text editors is, are one of the most, I mean, yeah, like a good CTO would, you know, shut down the initiative to build our own text editor for our thing that is not where— that's not a differentiator, right? Like, um, yeah, there's probably more of these things than I even, even I've found so far. Um, but video is a good example. Video is a great one.

Yeah, there's, there's so much like, don't pay for— pay for— pay the people who helped you. And I feel like that's, that's maybe the piece that's missing in the whole like ecosystem is like Hey, chuck some bucks at those people who made your life way better.

So that's, you know, I think even for, yeah, like, I mean, Tealtra started, I would like with GitHub sponsors, like that was my first way of like kind of monetizing or getting support for this project. Uh, and it was one of the bigger GitHub sponsors, or I was one of the bigger GitHub sponsored, the sponsored receivers of it. Yeah. Uh, I had a lot of sponsorship, but I, uh, at one point you had to be a sponsor in order to log into tealdraw.com or to like visit tealdraw.com. It could be any amount, even like a dollar, but you still had to be a sponsor.

Uh, and yeah, a little wall goes a long way, doesn't it?

Yeah, it was good. I, I, uh, so I, that's, I picked up a couple of hundred sponsors that way, but it was also mostly just posting about, about what I was working on. People wanted to see.

Yeah, you say that all the time, don't you, Dave? You should tell people about the thing that you do. Yeah, a lot. All the time.

All the time. Your thing needs to talk about your thing more often. Like, your product needs to talk about your product more often. That's good. Let people know.

Yeah, that's good.

Well, Steve, uh, we probably do have to call it. Uh, thank you though for, uh, we've taken so much of your time. But, uh, for people who aren't following you and giving you money, how can they do that?

Yeah, I'm on Twitter at, well, I guess x.com/SteveRuizOK. And you can find TealDraw there, x.com/tealdraw. And if you want to use just the whiteboard, which, you know, if you're somehow not a developer, but you just really like Dave and Chris, you know, you could or if you are, tealdraw.com is where you can do the free whiteboard. And then if you want to build something with TealDraw, which I encourage, it's fun. If you know React and if you kind of know your way around TypeScript and stuff like, it's a really different way of building with the tools that you already know. I set up a little point, tealdraw.dev/shop-talk, where you can go. There's no discount, but at least I find out how many people came there via Shop Talk and, you know, Uh, it's good, good times. And, uh, and yeah, I mean, we're, we're all over the internet. You can find our, uh, GIFs and content and fairies and other things like, uh, going on. And hopefully you guys can put up some links to some of those other side projects like Make Reel and, uh, yeah, of course we'll do that in the show notes for this show.

Are fun. Well, cool. Awesome. Well, thank you so much. Uh, this has been very cool to see what y'all are doing. Pretty inspired. So, uh, and then thank you, dear listener, for downloading this in your podcast of choice. Be sure to, uh, like it and do the things, uh, be, and then follow us on, I think, Mastodon and, uh, Bluesky. And then join us over in the Discord, patreon.com/shop-talk-show. Chris, did you have anything else you would like to say?

I'm just gonna sign shop-talk-show.com like I'm using the pen tool on an infinite canvas.

Like, like the Disney outro, like, we—

oh yeah, there you go, Mickey. Be a good one. I'll do it for you.