Untitled

Discuss this episode in the Muse community

Follow @MuseAppHQ on Twitter

---

Show notes

00:00:00 - Speaker 1: Infinite canvases are essentially like a different document format. The screen represents a camera that’s floating above a surface, and there are things on that surface, and those things can be anything. You can move them, you can duplicate them or resize them, and that each one of these types of thing on the canvas also has its own rules about how it can be changed.

00:00:26 - Speaker 2: Hello and welcome to Meta Muse. Us as a tool for deep work on iPad and Mac, but this podcast isn’t about muse product, it’s about the small team and the big ideas behind it. I’m Adam Wiggins here with my colleague Mark McCrannigan. Hey, Adam. And our guest today is Steve Ruiz of TL Draw. Hello. And Steve, I understand you’re a little bit ahead of me on the fatherhood journey. You’ve got a 315 year old. What do I have to look forward to in the coming couple of years?

00:00:55 - Speaker 1: Oh man, a kid is what, like 1.5?

00:00:58 - Speaker 2: That’s right.

00:00:59 - Speaker 1: Eventually they will start drawing, they’ll start playing with words, and they will grow ever more interested in iPads, and also, everything will be an iPad, every computer, every device, everything with the screen will be an iPad. That’s my prediction, yep.

00:01:17 - Speaker 2: Yeah, that makes sense. Yeah, already is the case that trying to keep screen time limited is a challenge. Now, of course, we can also look forward to having built in beta testers for our software. You got a chance to do that yet?

00:01:29 - Speaker 1: Yeah, actually, my daughter has probably spent more time with tealra than anyone else, and I’ve learned quite a lot by watching her kind of poke around and try and draw, try and make different things. She really likes arrows, but the touch targets are too small and mobile. That’s one thing that I need to work on.

00:01:46 - Speaker 2: I’m reminded of a scene in one of these Steve Jobs biography movies where I believe it’s his daughter comes in and tries out Mac Paint, and they sort of show this maybe hypothetical idea that he was sort of inspired to make software and a computer generally that was easy enough that a young person could be creative with it.

00:02:04 - Speaker 1: Yeah, I mean, if you have, uh, they’re kind of hard to schedule or bring into the office. I don’t think the agencies do 3 year olds, but toddlers are excellent beta testers. They won’t tell you what’s wrong, but you’ll definitely see it.

00:02:19 - Speaker 2: So you’re working on TLDraw. Tell us about that project and your background that brought you there.

00:02:24 - Speaker 1: Yeah, so Tal Draw it started out as like an open source project, I guess it still is an open source project. It grew out of kind of earlier open source work that I did with a library called Perfect Freehand, which is an algorithm for creating like digital ink, so pressure sensitive or variable width lines, takes a whole bunch of input points, and comes up with a whole bunch of output points that kind of describe a shape that surrounds the input points. So, perfect freehand, I kind of started working on it pretty publicly on Twitter. So posting all these in progress GIFs and talking about the different ways that I was trying to solve this problem of doing pressure sensitive slash variable width lines.

You can’t really do that in the browser, like it doesn’t have any primitives for like lines that change their width. So, hence the whole like journey into trying to figure out how to do that kind of programmatically myself.

It works, it works super good. I would recommend it if you have anything to do with the browser that needs to have a kind of a cool ink. And it’s being used all over the place. It’s used in Draw.io, it’s used in Excali Draw, it’s used on, I think NextGS Live uses it in their product.

It was one of these situations where The status quo for like a pencil tool or a pen tool was like so poor on the internet or on the browser especially. That any improvement sort of would have been well timed and perfect freehand just happens to be an improvement that is pretty good. You should use it. That’s what I say.

So, I’d been working on perfect freehand, I’d been doing some integrations with like other diagramming tools like cala Draw and I guess in along the way of making perfect freehand, I built a couple of these. Canvas playgrounds almost, places where I could test this thing out or try out the different algorithms, see where it was going right or wrong. And I’ve done that a couple of times for Perfect Freehand, also for like a kind of an offshoot of this project called Globs. But anyway, I just made enough of these sort of infinite canvas editors that once Perfect Freehand was pretty much done, I started working on that kind of a framework.

Originally it was gonna be like a programmable design tool that I could use both together with direct manipulation, but also with like, you know, programming, in order to help me figure out problems like perfect forehand or problems like cool arrows or something. And once I started posting that, On Twitter, saying like, oh cool, I’m looking, I’m kind of making almost like a figma that you can program, or a figma that you can put anything on the canvas that you want, and I’m doing it in React. That story suddenly got pretty popular. Like I had folks reaching out to me and saying like, hey, we’re building something that kind of needs this kind of canvas. Can you open source this or can you share this or can I hire you? So based on that attention, I was like, all right, well, maybe this is worth proceeding with. I took some time off between jobs. I was gonna start a job actually at Adobe, and I thought, OK, I’ll take some time off in between and I’m just gonna work on this project, make it open source, spend 6 months on it, and then, yeah, see what happens. Worst case scenario is that I’ve made something really cool open source, worked on something interesting in this space, and I should say there’s really very, very few open source kind of canvas UI type of tools out there. And none of them that were using this kind of react driven canvas.

00:06:04 - Speaker 2: It’s interesting that you got that initial demand, you might say a product manager lingo might be it’s sort of market validation, you know, don’t build it until you already know people want it. Even before you got into the project itself, did you have a sense of why people wanted it or had they tried to build it themselves and discovered it was hard? Had they not built it and they just hoped someone else would do it for them? It just they liked your other work and they just thought if you did a good job on this other library, maybe you do a good job on this library too. What was the core of their demand, I guess.

00:06:36 - Speaker 1: Yeah, my theory about this or my guess about this is that this was 2021, so not too long ago, 18 months ago maybe. We were still middle of the pandemic, seemed like everyone had started using these apps like Miro or Mural or I think Fig Jam had just been released and The place for online collaboration was starting to just be the sort of the whiteboard, you know, abstractly like this 2D kind of surface that you could move around on and interact with people and co-create this type of surface.

And the tools in that space were pretty mature, like again mural fig jam was new, but it was already, you know, built on good bones of FIMA itself. And so, As normally happens with like successful general products, like you start seeing different teams wanna carve off verticals for that, say, like, OK, cool, Mirro is great. Mirro is for everyone, Miro is for everything. What if it was just Mirro for project managers? What would that look like? Can we steal a billion dollars off of Canva? Can we, you know, take a little bit of that giant market from FIMA or something? The issue there is that all of these tools, pretty much anything. That wants to use that kind of canvas UI, it’s a tough engineering problem. And there’s like a ton of uh functionality maybe of like a canvas like that that is like, it’s almost like a text editor that it just has to be there in order for it to feel complete. And if it’s not complete, it’ll feel broken. But if it is complete, if it has those like table sticks features and all that, then congratulations, no one will notice because they expected them to be there from the beginning. And maybe you ran into some of this with Muse as well like. Selection should just work, like Undo reader should just work, the cloud stuff should just work. And some like really gnarly, like logic puzzles involved in these type of things that we take for granted in something like Mirro or fig jam. Yeah, like they’re they’re just gnarly problems. Never mind the whole like, how do I render this thing. So when I started saying like, look, this is something that you can use as like a starting point, where all those problems are gonna be solved. Now it’s just about picking like, what do you want to put on the canvas, how do you want these things to interact with each other. I think that story of giving someone like good open source starting place, that was like the compelling story. It’s just like the same with maybe like prose mirror or a code mirror. Text editors are super hard, no one wants to build one themselves. I mean, I don’t want to build a text editor myself ever. But I do want to make apps that include them, and I do want to do stuff with them, and if I can do that on open source work, then all the better. So, I think that’s where the validation started clicking in, or like pre-validation. I didn’t have an idea really, but I did notice that there was a demand for this kind of thing, because, yeah, it was becoming more of like what software looks like, especially around collaboration, like it looks like a canvas.

00:09:30 - Speaker 2: Fun little parallel story there from the Hiroki days, which is a very early version of Hiroki that was mid-2000s, 2007, 2008, had a text editor in it, but yeah, we had to implement that from scratch in the browser and you know, pretty quickly you exactly as you said, all these table stakes things you just expect to work, particularly in programming editors, you know, we had to implement it and that’s not the differentiated or wasn’t the differentiated part of the product at the time.

But it wasn’t long after that that the AC editor, I believe it was, was kind of the first really solid open source in the browser code editor, and that seemed to unlock a kind of explosion of people seeing that.

I mean, I know GitHub used it in the early days for some of their stuff, but lots of other projects did as well. Suddenly people saw, oh, there’s a really good code editor that covers that table stakes stuff. Now I can build this weird project idea that I had that I haven’t been doing because I don’t want to have to build a whole, you know, fully functional text editor first. That’s just too hard and isn’t the core of the idea. So maybe there’s, if your hypothesis that the canvas is a foundational type of some kind, as you said, how software is just starting to be, then maybe there’s a similar explosion that could be unlocked with the right canvas tool kits.

00:10:52 - Speaker 1: I hope so. I released this thing in November of 2021, so after, I think I started working on it full time in like July, so not too much time. It got pretty popular, the initial usage.

00:11:07 - Speaker 2: You talking about the open source or because I know, I guess I should describe that.

00:11:09 - Speaker 1: While I was developing this, I was posting about it on Twitter a lot. You’re gonna hear me say Twitter a lot, probably during this interview.

00:11:19 - Speaker 2: I think we could have done a build in public episode with you if we already did it with the maker of Canopio Club. Yes, so it’s a similar kind of concept which is showing your work in progress as you go and obviously it’s a very visual domain and yeah, people like that. They like those little bite sized pieces and they like to see the journey.

00:11:39 - Speaker 1: Yeah, I’d started thinking like, this was right when GitHub sponsors had come up, and I guess the media that I was consuming was largely like sponsor driven. Podcasts, YouTube channels, etc. And I was really interested to see if that kind of model could work for programming. Programming does not lend itself well to YouTube streams or videos, even like the educational stuff, I think it can work, but it’s not like a sponsor model that kills, it’s like a course model or something.

00:12:10 - Speaker 2: Yeah, from what I’ve seen that typically people who have programming YouTube channels, then you have an upsell into buy my course, so they put the more basic stuff online, you find it, you watch it, you get to the end and you like the teacher, quote unquote, and then you think, well, I want more, I want the intermediate level stuff, then you go buy their course that’s behind some paywall.

00:12:29 - Speaker 1: Yeah, which is great, and I’ve certainly bought, you know, courses and books as well, and especially if you have an education budget, you know, consider spreading that around, don’t let it go to waste. But I was kind of thinking about the type of content that I could post every day almost, or the or the type of content that required like a very low level of engagement with, like, much lower than by my course, and even like a level of engagement where just clicking like was like the correct.

Appreciation for this type of content.

You know, I’ve seen folks who are making like really amazing involved educational material, not just in programming, but in other stuff too, and it always feels bad where like all I can do is just click a little heart, you know, it’s like, oh man, like this is worth way more than that, kind of feels awkward. So anyway, I kind of made user content, educational content when I worked at a company called Framer. So that was all very involved as well, very kind of produced.

Took a lot of time to make, and I didn’t want to do that anymore.

So, the kind of the place where I settled in terms of like the kind of content that I would use to drive interest around Tealro before I had released it, like, while it was under development, was just like these eight second gifts. These gifts that maybe had like, you know, were at 150% speed, didn’t take very long to make at all, and certainly didn’t take very long to consume and just be done with, and, you know, just clicking that little like button was, what more could you do? Like, it was perfect.

And so I was posting this a lot as I was working on Tealraw and at the same time, I had made the like TealDraw.com a kind of sponsorware. So the only way to access this was to be a GitHub sponsor. And there really wasn’t any like floor for that. You could give me a $1 and, you know, have full access. It wasn’t even like a $1 a month. It was just like, give me something and you can come in. And that worked pretty well. I got like a couple 100 sponsors, which certainly wasn’t enough for like a tech salary or anything like that. But it did show that people were interested in this and it was like a good thing to come back to as I was developing it. I was also a good motivator for making that content.

00:14:46 - Speaker 2: And to come back to that product manager style validation, here’s the next step. People parting with money any amount, the number doesn’t even matter that much, is just such a hugely higher bar and saying they like it, clicking a like button. Telling you they think it’s cool, even using it. Parting with your hard earned cash is just the ultimate measure of validation. So I don’t know if this was intentional, but it seemed you’re following the product management playbook kind of market discovery in this journey.

00:15:18 - Speaker 1: It was not very intentional. Again, I was kind of just playing with this before going to take a job at Adobe, but, you know, I liked making the content, I liked being able to share this before it was ready and get that like feedback from people. And I liked that those people were a little bit motivated as sponsors, and somehow it just really like ended up in a kind of warm place. It felt like there were a lot of people on Tal Draw’s side as I was making this and like wanted to see it do well and wanted to You know, be a part of that. I spent a lot of time asking folks on Twitter like, how should this feature work, you know, this, here’s how it works in sketch, here’s how it works in FIMA, here’s how it works in Miro. What should happen when you try and resize a group of shapes where one of them is rotated? I don’t know, like, does it skew? Does it smash? Does it lock the access or uh aspect ratio and then resize that way, so.

There was a lot of like kind of audience involvement in a sort of a musical sense.

And yeah, that carried right into the release in November, where I made everything open source, like overnight. It had previously been closed source. I’ve removed all the kind of the sponsor walls around Tealra.com. And just said, like, there you go, release, you know, there was no product hunt launch. I didn’t post it on hacker news or anything, but other people did. Enough that I had to ask like product I’m like, can you just stop posting these? Like, I would love to do a launch sometime in the future, but I don’t want to do that. And then it was like at the top of Hacker News for a while, like, for like a majority of the day, it started. Getting a ton of attention on GitHub, like in terms of stars and interest from people there.

My Discord started exploding. It was, it was like a really interesting week as this thing made its way around the internet. And just as like a free diagramming drawing tool that had I poured a lot of like, I guess, attention into the microinteractions to sort of add up to a canvas tool. Yeah, it was fun, and bunch of cool contributions started coming in, and I was thinking, I don’t know, maybe I don’t go to Adobe, maybe this is like a good Maybe I can make this into a little microsas product for myself.

And then what happened was, since it was open source like folks started building with it and I started seeing a lot of interesting projects that started being used or built around Tealra and getting some amazing contributions from people who are kind of using it. And noticing like where it needed to grow and and how it needed to change, and a ton of feature requests and suggestions and will it do this, could you make it do this? Can we contract you to come over and integrate it here or there? And also interest from like investors and other people who are kind of working on similar projects, but there weren’t many. It was a really exciting time.

Eventually, the interest was enough. And I had some conversations with, I guess people whose advice I could take that this might have legs, this idea, kind of like this bet that we’re living in a moment where, for better or for worse, there’s a lot more remote collaboration. People want to do interaction or like collaboration through software more and more that needs to happen somewhere.

The canvas is probably the place where that’s gonna happen.

My bet was these apps, there’s just gonna need to be more of them. It will be impractical for every team that wants to make Miro for project managers or fig jam for doctors who wanna collaborate on annotating images, like, it’ll be impractical for every one of those companies to also build Miro or also build fig jam, which at the moment is sort of, there are no primitives, so, yeah, good luck. Like if you want to do that type of software, like your work cut out for you. If you want to do that kind of software then. Yeah, there’s really nowhere to start except from scratch. So, there’s Tal Draw the startup, that’s just Teal Draw the company Teal Draw Inc and TealDraw GB now also.

00:19:28 - Speaker 2: Well, congratulations, and at the moment is this, the story you told up till that point, it sounded like it was very much a solo effort doing kind of everything yourself, one man show. Is there a team now or is that still to come?

00:19:42 - Speaker 1: Yeah, it was pretty much just me, probably like 99% of the code in the project was just written by me over those couple of months between July and November. I have had amazing contributions from a lot of people on the GitHub repository. And those continue to come in, we have a nice little community growing. But yeah, now I have a team. I’m up to, I just hired my first employee, and I have two other contractors who are taking up different parts of the project. We’re growing it, for sure.

00:20:13 - Speaker 2: Oh, congratulations on your new job as a manager, I guess.

00:20:17 - Speaker 1: Yeah, exactly. I have no experience, but so far so good.

00:20:22 - Speaker 3: So when you open sourced TLDraw, were you at that point specifically positioning it as a platform for making verticalized canvas apps, or was it more open sourcing the app and then people discovered that you can mod it basically and do their own thing?

00:20:41 - Speaker 1: Yeah, so I had picked a kind of a point to chop the app into two, in a way. I was saying, OK, here’s a rendering layer. Here’s a, basically like, put react components on the canvas. I call that the kind of the core layer. And then on top of that, I built a kind of an application that would use that core layer, which implemented things like selection or erasing or different types of shapes. And my guess was that other teams would want to build on that core layer and say, OK, well, you know, Tealro’s cool, but we’re gonna make a different app, so we’re just gonna use the same render, like react Canvas type of render. Um, I was completely wrong. I think there’s maybe one team that ended up doing that. Everyone else just forked Teal Draw.

I picked the wrong place to chop, essentially, that what I thought was unique to the app, to TealDraw. Ended up being more general than I thought.

And so things like the selection tool where you, you can whatever hold shift and click things and now they’re all selected or draw a box in order to collide things and select them that way. Turns out that’s the same for every canvas and I just gotten it right and followed all the conventions that I saw in other apps who had also reimplemented the same sort of logic and whatever an eraser is an eraser is an eraser like.

So the part of the task, once I did decide to keep going on this was to basically start over, like within 6 weeks of releasing, I was like, all right, let’s start over, let’s make this for real. And let’s make that abstraction point that like, where can I chop this? What can I say is general versus what is specific to til draw and move that way up so that it really is, you could get more for free without having to fork it.

00:22:31 - Speaker 3: That’s interesting and that’s super surprising to me. I feel like for these complex problems, it’s basically impossible to design a framework de novo, and people try this all the time, but it very rarely works. Instead, what happens is you have an application that works well, and then basically you copy and paste that 2 or 3 times, and then you look at the discs and the things that aren’t the disks become the framework. And that sounds like it’s basically what you ended up doing with this.

00:22:55 - Speaker 1: Yeah.

00:22:56 - Speaker 2: I think that was a story with rails as well, where there was a bit of they kept writing these kind of crud apps with a model view controller framework, and once they’d done it a few times, it became pretty clear what should be extracted from that and be common to all of them and what would be different.

00:23:12 - Speaker 1: Right. Yeah. Well, even though I did pick the wrong place to chop or the wrong abstraction, it was part of the kind of the DNA of this project from the beginning to be something that other people built on.

And so, once it was evident that like folks just were using Tera the component, which I should say that we did distribute the complete app as something you could put inside of any website. So it was like also something that you might like drop into your video chat app, even if you didn’t want to change how it looked or worked, but you just wanted to have it somewhere other than TDraw.com.

But yeah, once it became evident that folks wanted to say like, Teal jaw is perfect. We also want to add like a shape that represents a person.

You know, and that like looks like an avatar and has like that type of data attached to it. How do we do it? And my only answer was like, smash that fork button and then own this thing forever, because like, I just, it’s not built for that, or start from scratch essentially again, like, maybe not zero, but still very close to it.

So yeah, version 2 is much more kind of Anticipates those kind of stories, and I had no idea folks would want to do that, but looking back, I guess, yeah, now it’s obvious.

00:24:30 - Speaker 2: I see that’s where you are today. I’d love to hear a little bit of the backstory there. You mentioned briefly working at Framer, which is a very interesting product. It’s been through a lot of iterations and itself has its own canvas aspect, and I know you’re actually even relatively new to the programming field, so tell us a little bit about the journey that brought you to Teal Draw.

00:24:48 - Speaker 1: Yeah, I guess, you know, it seems like everyone I talked to has a non-traditional story about how they got into this kind of tech field.

For me, I studied art. I studied, uh, you know, painting for undergrad and then grad at University of Chicago. So I had a tiny bit of like technical experience building like portfolio websites, but that was pretty much it. It wasn’t until I had turned 30, I was now living in Cambridge in England.

Kind of broke, realizing I should probably make some money in my life and have a career that has a little bit more speed to it. So, yeah, I kind of shut down my studio out out near Cambridge and started looking at different ways of using that same creativity and I guess industry, I suppose.

So I started out in design, and then I quickly learned about like prototyping as a place where the tiny little seed kernel of technical skills that I had had from all those WordPress sites that I’d in the Bush administration could be brought over and applied.

This was also like 2017, the idea of like designer who codes was like, even for someone just crashing into the tech scene like was very evidently like hot and so that essentially became my brand or my story as I came in. I was an extremely active user of Framer’s first product, the Framer, now Classic. So typing out coffee script code and making things spin around when you click at them.

And my first couple of jobs here in London were essentially, yeah, like prototyping. Like I was brought in because one way or another, they wanted to be able to build something before they actually brought engineers on to build it. And so this Kind of approach to design and approach to programming of like discovery mode of like, well, we’re not even sure what this needs to be, but let’s start hacking something together. Yeah, that was essentially what I have been doing my whole career and still what I’m doing now.

Ended up working for Framer doing their education, which was an interesting break from actually like shipping designs or shipping prototypes and instead trying to figure out. How do I talk to people about this, or how do I show how to do this type of work? And instead, like, how do I present this to other people? How do I communicate, like, what makes a good prototype? How do you go about that and specifically how do you do that with Framer.

I wasn’t so good at that job. And so afterwards I went back into design and prototyping for a company called Play who’s making a design tool, another design tool for iOS, which surprisingly like, you wouldn’t think that a design tool fits on a phone or on an iPad, but it does. It’s a pretty cool one to check out if you haven’t.

That was a fun opportunity to kind of rethink all of the creative software experience. As a designer, you kind of can’t help but think about the tools that you use because of their software too, and you’re designing software. Play was like an extreme example of being able to rethink features like a layers list or an objects list that haven’t changed since. I don’t know, Adobe Illustrator, and say like, OK, well, how do you do that on the phone? How do you do a properties panel when there’s, you know, the size of an iPhone to work with? That was a blast for me, and it was during that contract when I started doing the open source work around arrows and around a perfect freehand, and then eventually healra too. So, that’s sort of the abridged version of my kind of path from Design and technical design, or increasingly kind of technical aspects of design until now I’m, I guess, not too far away, but they definitely do more programming than design and now managing too, it’s fun.

00:28:49 - Speaker 2: Not to mention it seems like there’s an evolution there from prototypes which are by nature or even by definition throwaway, and then going to something that’s an open source library, other people are building on it, you need API stability. There’s going to be, I mean, so far the project’s pretty new, but you need long term, it’s quite the opposite of that prototyping, so I imagine you’re growing new skills there too as well.

00:29:12 - Speaker 1: Yeah, to be honest, this is also a place where I think the team that I’m building is gonna Do a lot of the heavy lifting because my relationship to software is still very like disposable, kind of like crumple up and and throw in the trash, just do lots and lots and lots of sketches until it resembles what you want. Not to say that Tilra isn’t like solidly built and, you know, we’ve fixed the bugs and it it has good abstractions and solid API and all that. But yeah, definitely there are certain problems that you can’t quite as easily start over with. So, I will be slightly hands off on the on those problems just because different skill set for sure.

But the community side of things, I mean, managing not only the open source, like an engineering project, but also as a community project has been really interesting too. That’s probably closer to the work that I was doing at Framer in terms of education and doing a lot of work with the community and a lot of work on Twitter and uh chats and such of kind of unblocking people as they’ve been working with at that time, Framer now and with Tealro turned out to be decent training for those sort of Open source relations manager, open source project, open source maintainer, culture or role. Luckily we haven’t had any drama with Tera, but it’s still a little bit chaotic and fun.

00:30:36 - Speaker 2: So our topic today is infinite canvas or perhaps infinite canvases.

So I think we’ve explored this a little bit already in talking about in this new world of kind of, yeah, the whiteboard brought into a digital space and made collaborative and that is increasingly feels like a foundational piece of many pieces of software.

So yeah, I’d be curious to, you know, kind of go to the fundamentals here, which is certainly how you Steve or Mark how you define. What is an infinite canvas, and then we should probably also talk about the name, cause that’s an interesting thing. But let’s start with definition. Steve, what do you makes one of these canvases what it is and different from other types of software?

00:31:15 - Speaker 1: Yeah, well, especially on the web, we are used to a kind of a document metaphor that, well, the web is just built for, which is kind of a vertically scrolling infinite page. Infinite canvases are essentially like a different document format. This idea that there are two dimensions or kind of almost 3, you know, you can move left, you can move right, you can move up, down, you can zoom in and out, and that the screen, what you’re looking at kind of represents a camera that’s kind of floating above a surface, and there are things on that surface. And those things can be anything. And in a drawing app, those things might be little lines that you’ve drawn in a visual note taking app or canvas-based note taking app, those would be different notes or different headers or different flags or in a whiteboard, they might include arrows and texts and sticky notes and all that.

The actual things on the canvas don’t matter. It’s mostly about Stuff on the canvas that you can view, or if you’re able to, if you have the correct permissions, then you’re able to directly manipulate.

You can drag things around, you can move them, you can duplicate them or resize them, and that each one of these types of thing on the canvas also sort of has its own rules about how it can be changed. So maybe it’s a video, maybe the aspect ratio of that video can’t change, even though you can’t change the size. Whereas maybe it’s like a rectangle and you can change that aspect ratio or the sizes.

And whatever you wanna call these things on the canvas like shapes or primitives or elements, the thing that you do with an infinite canvas is, you know, to manage these and read them or arrange them or put the canvas into a state where it represents something.

So, obviously, again, like whiteboards are pretty clear, like you wanna do a retro and you’re moving sticky notes around, and maybe voting by stamping things. And the important thing also is that, unlike a document where you’re only seeing a very small part of infinitely scrolling page.

The canvas works really, really well for collaboration. The idea of having multiple people working on the same surface is pretty natural. You just represent them by their cursor, wherever the cursor is, that’s where they are. Um, you can do things like follow people around. I suppose you could do that on a vertically scrolling page, but it might not be as fun. Yeah, so that’s why I think it’s been picked up so readily by, again, like whiteboarding or diagramming or or places where you need to have more than one person editing the same document. It’s not like something with text where, as I’m editing text at the top of the document, all the other text is being pushed down the document.

00:34:00 - Speaker 2: The elements are relatively independent of each other. Yeah.

00:34:03 - Speaker 1: Yeah, exactly. You know, you can have independent experiences on the same document that are just in different places.

And I suppose the idea of place is also a big part of this, and potentially a big part of this.

The idea of near and far, of close and distance, or like it quickly drifts into like video game territory of your cursor is your avatar, or maybe you have an avatar and you’re moving that avatar around this top down view of an office or a space and jumping into video calls with people close to you. So yeah, that infinite canvas, that’s kind of a long definition of how I see it. It’s just a found an infinite 2D plane and you are a little camera represented by a cursor. Moving around, moving over that surface. Mark, what do you think?

00:34:52 - Speaker 3: Yeah, I have a pretty similar take. I’ve often called these multimedia canvases, cause I think there are two dimensions going on.

So one is the canvasness, which is at least 2, sometimes 3 dimensions and the freedom and flexibility to place content items wherever you want, like you were saying with relative independence.

The second axis is multimedia, so Which types of media the digital document accommodates.

When you lay it out like this, it’s interesting because this actually captures the whole universe of digital document editors.

So for example, a classic plain text editor is at the sort of bottom left of this graph where it’s very limited to one content type and it’s very linear, a spreadsheet in contrast. Has pretty limited content types. It’s basically text and numbers, maybe a little bit of color, but it’s quite high on the canvasness.

You have this flexibility and freedom to place things and by the way, as we’ve talked about in this podcast, that’s something people love about spreadsheets. It’s not just a calculator, it’s just a place where you can put stuff, people like that.

Then you can go all the way out to the top right where I would put like muse and TL draw where you have a full 2D canvas and it’s highly multimedia. You have handwriting, text, images, videos, links, whatever.

Or you could kind of go back down and say we want lots of different media types, but we don’t have the full flexibility. So I would put notion in this category, for example, of you basically have whatever media type you want, and there’s, there’s a little bit of flexibility, but it’s pretty much a linearized document.

So in this view, the multimedia canvas is simply the fully generalized final form of a digital document.

00:36:38 - Speaker 1: It’s good to be here at the end, yeah.

00:36:40 - Speaker 3: And all the others are sort of specializations of that space.

00:36:45 - Speaker 2: One element you touched on there, Steve, which also I think fits in with the multimedia side as well as you talked about the elements, you know, we call them cards and news just because I think that works for us visually and particularly with the touch screen. It feels like an index card moving around on a desk or something, but yeah, the elements have a certain sameness and I think this does go back to Illustrator, which in many ways was the original Infinite canvas to my mind, but you know, maybe sketch and. FigMA and Framer kind of modernized that a little bit, but when you lay down a bit of text or add an image or add a rectangle in, for example, sketch, you can click on and select each one of them. You resize them the same way as you said there might be slightly different rules around resizing.

There may be snapping or other things, but in the end, You can do the same things with all of them, and I think that’s really important and it’s actually something that to me comes actually from file systems.

This is what’s great about files. It doesn’t matter what’s in the file. You can always delete it the same way. You can copy it the same way. You can put it in a folder the same way, you know, inspected size, that sort of thing. There’s this uniform container. And then over the years, files have gotten more capable and contained more and more different types of things, including, you know, things like video that the original creators of the file system probably couldn’t have even pictured being possible on a computer, but because it’s this general purpose container and as a user, I feel that gives me a lot of agency and power because even if I don’t know the specific type, I know exactly how to manipulate it.

00:38:16 - Speaker 3: This is reminding me that there’s potentially some secondary axis here. So one is collaboration, which we’ve mentioned, and we almost take that for granted now when we think about modern software, but you know that is a separable axis. The other is this notion of inline editing, which I think is actually pretty essential to what we think of as a modern multimedia canvas app, in contrast, you know, with the typical file manager like Finder, that’s actually very high on multimedia and quite high on. 2D flexibility, especially on your desktop, but you don’t have the inline editing, so it it feels like a totally different experience.

00:38:50 - Speaker 1: Yeah, this ability to not only move, delete, organize, copy, hold alt to clone, to directly manipulate content, but also It’s not only about making choices about where a thing is, or its relationship to other things, but it’s the place also to make stuff and to edit it directly.

And yeah, one of the bigger kind of challenges with tealra was deciding how to allow interactions within shapes versus interactions with shapes.

So, for example, you have a video, you can click on the video and drag it around. But you might also want to like pause the video or change the time of the video, and thinking about, OK, well, how do you transition from a shape that is, I call them shapes, whatever tail drops I’m gonna keep using that word, too hard to deprogram a shape that is Acting like a shape versus in a shape that is acting like a video, and that you can interact with with like a video.

And yeah, it turns out that there’s a pretty good rules around that, like how to make it consistent, which works just as well for like text as it does for videos, as it does for, I think I have a code sandbox, you know, running on the canvas and teal draw in one of my example projects. The joy of using a kind of a web-based canvas of rendering stuff using the web, although that sounds like such a bad idea to render things in HTML and CSS, but it really does give you the ability to just put anything that can be in a browser on the canvas and interact with it.

00:40:29 - Speaker 3: And this also brings us to the why now and why is this hard. Like if this is the fully generalized form of digital documents, why didn’t software start this way? I think a big part of it is just that it’s hard. Like we talked about how it’s hard to write a text editor, but what if you now need to write a text editor, an image editor, a video editor, and audio editor, and they all need to be in the same thing, you know, it’s, it’s quite difficult.

And then on top of that, you got to actually render all the stuff and make it manipulable and fast and responsive. It’s just quite difficult. I think that’s a big reason why.

We haven’t seen it until relatively recently.

I also think there is an element of people just, they don’t fully realize the expansive possibilities of the software, perhaps when they’re starting from a very limited. World.

But OK, I constantly bring up this analogy of like a woodworking shop. Could you imagine if you had like a woodworking district and you had a shop just for like your chisel work and then a shop for your saw work and then a shop for your standing work and like you had to take this, you know, quote unquote file of a project and bringing it across to these different buildings. That’s kind of the world that we live in now, and you can’t even look at two things at the same time, like you’re standing and your chiseling work. That’s kind of the world that we’ve been living in with respect to software for a long time. And yeah, it takes some work to bring all those things into one. Workshop and to learn all the tools and to keep them all maintained and stuff, but that’s what you really want as a creator.

00:41:43 - Speaker 1: Yeah, especially in the browser, it’s like. Every 10 years, I’m told that you just have to forget what you knew about like what you can do and what you can’t do just because it just gets that much better.

Certainly when I was Poking around with WordPress websites in college, the web was not a place where you could make a kind of a dumb driven canvas and make it like fast and good and perform it and do all the things that you need to do with pressure and multi-touch and all that.

But it is possible today, and I think that when a platform is mature enough, you know, for you to have like an anything app, kind of a place where you can just put anything. OK, cool. Videos, yeah, put it there. Text, we’ll put it there. And that’s always sort of been the promise of the browser. It’s just been really constrained to this document format that is increasingly showing its limits.

I think one of the newer APIs that I was looking at from Google, you know, involved like transitions, like kind of iOS style transitions between things, you know, that absolutely explodes the notion of the web page as a page and hopefully Tera also kind of demonstrates that this technology could be used.

By the way, like, the idea of a rack driven canvas, not to keep coming back to framer, but That’s where I saw that this was possible because their, their canvas is driven by react and is driven by the dumb and like surprised me with the fact that it worked and that it could be made secure and all that. So, I don’t think I would have come up with this project without having seen it been done by people more capable than me than considered that as a possibility. It’s like, hey man, you could put anything on here. Like, why aren’t we?

00:43:26 - Speaker 3: This was an important data point for me in believing 4 or 5 years ago that these multimedia canvases were going to be really important because anywhere you had anything that was like multimedia canvas, if you squint, people loved it and they were using it for all kinds of stuff. I mentioned the example of spreadsheets. Another example is using tools like PowerPoint or drawing programs to do like whiteboarding basically. We’ve also seen this more recently with FigMA. FIMA is obviously a design tool, but people will use it for a personal note taking just because they really like the ability to put different stuff on a canvas.

00:43:56 - Speaker 1: Yeah, I think one of my first creative software experiences was with Hypercard, way back in the day. I think it was still Hypercard, like Apple Hypercard or not macromedia or Flash or anything like that, but yeah, there’s this idea of like, that is not an infinite canvas, that’s just a glorified slideshow.

But it’s still like I’m like, man, you can make games with this, you can make presentations for this, you can make You know, animations, if you just click next fast enough.

Yeah, um. A little bit of Like giving users a little bit of room to run, you know, it’s always like the best, just because, yeah, suddenly you have Doom running in Microsoft Excel.

Yeah, and I think with TLDraw, I mean, folks have made a slideshow app, like a slide editor app with TLDraw, which apparently didn’t take too much work cause it already had like pages and you’re just have a UI for moving between pages and I’ve seen it used to do video annotation, like you pause a video at a certain time and just overlay like teal draw and be able to edit, like, you know, this guy’s gonna run over here or whatever, and it’s been used for like wikis.

One of my favorite stories about this actually is that there are two products that compete with each other. They’re both for Dungeons and Dragons game masters or Dungeon masters. And when you’re telling or running like a story campaign or a story world game, you have a bunch of locations and people and, you know, items and all this stuff and they might have relationships to each other, etc. And so there are two pieces of software, one is called WorldAnvil, one is called Legend Keeper, and they both are essentially wikis, custom wikis for people who are running these games. And Legend Keeper shipped a whiteboard view of their like wiki, essentially. Based on TalDraw, like 6 weeks after I shipped TealDraw, like open source it, like immediately, they seemed to be like immediately, oh cool, this thing that we wanted to do for like 2 years, like, let’s just do it. Like we could just nail this, and they did. And then about 6 months later, World Envil released their canvas, their whiteboard view of their wiki, which was also b