- I post a _lot_ about tldraw on Twitter. If you're curious about how this came together, or want to follow along as we ship new features, check out my timeline (https://twitter.com/steveruizok).
- The multiplayer is using a pre-release version of Liveblocks (https://liveblocks.io/)—and honestly isn't using it in a very clever way—and so can have some desync issues. Consider this part of the app an early beta.
At the bottom, there is a renderer named @tldraw/core (https://github.com/tldraw/core) that is essentially a "put React components on a canvas UI" engine. You give it a data model along with a set of utilities to interpret that data model. Simple but very fast, very flexible, and packed with helpers for building these kinds of apps. It's already being used for some pretty ambitious projects apart from tldraw itself.
The main library, @tldraw/tldraw (https://github.com/tldraw/core), exports the whole tldraw "app" as a React component named <Tldraw/>. This component can be embedded in any React project. It can be controlled either by props or by its own API (ie `app.selectAll().duplicate()`).
The website is a very thin Next.js app that embeds the <Tldraw/> component.
There are also a few other libraries: @tldraw/vec for the vector math and @tldraw/intersect for intersections. If you like to work on these kinds of projects, definitely bookmark those libraries! They contain a lot of useful code.
As for its development, I've taken off a few months between jobs to work on this full time. Until now, the site has been accessible only to my Github sponsors, but it's now free and open to everyone. If If you'd like to support the project's continued development, you can sponsor me here: https://github.com/sponsors/steveruizok.
I'll answer questions here but if you want to contact me directly, my DMs are open @steveruizok.
An epic journey behind the scenes on the twitter feed leading up to this and I couldn't help but share. Congrats/well done. Sorry if site's been getting hugged to death!
Love this. One idea that I haven't seen implemented in other drawing tools: the default behavior after drawing a shape is to revert to the select tool. This is rational but it can also pull you out of flow if you're trying to diagram quickly. It'd be useful to extend the keyboard shortcuts to the select tool, so that when I highlight a region with select, I can press, e.g. 5, and have a circle automatically filled inside the selected region, so that I can bail myself out and not have to draw the same selection twice.
Thanks for the project, only yesterday I used mspaint on a call as was quick and easy to hand tool. Bookmarked tldraw, then read your comment about the VSCode extension that's awesome and super useful.
Created by Steve Ruiz, his timeline is full of little interesting thoughts played out in the development of this, a fascinating insight into the minutiae that users take for granted but that make the difference: https://twitter.com/steveruizok
"New Project" asks if you want to "Save your current project" and the options are "Yes" and "Cancel".
I would expect Cancel to cancel the new project rather than losing the current work, and would expect a "No" option instead to mean lose the current project.
My dream drawing app would let you draw a stroke multiple times and then pick out your best attempt. No need to undo all the bad ones to try again. It separates the generation and the judgment.
> My dream drawing app would let you draw a stroke multiple times and then pick out your best attempt. No need to undo all the bad ones to try again. It separates the generation and the judgment.
Just use SVG-edit & draw each stoke on separate "Layer".
```
Simply stated, the “Sponsorware” model for releasing a project is made up of a few simple steps:
Build something people want! – This is easier said than done, but we believe this model works best for open source projects with significant pre-release hype. The more interest you are able to build in your product before launch, the better your results are likely to be.
Make it available only to “sponsors” – These “sponsors” are people who give you recurring revenue. This can be through any of the big sponsorship platforms (i.e. - GitHub Sponsors, Patreon, OpenCollective, etc.) or it can be a system you roll yourself. The important parts are A) that the revenue is recurring, and B) that either your number of sponsors or your net revenue is publicly viewable
Set a sponsorship threshold, and after crossing it, make your thing freely available to the world! – This can be a number of monthly sponsors, an amount of monthly revenue, or whatever you like. It should be PUBLIC though. Transparency is huge in this process and people need to be able to see progress toward the goal.
Really nice app. So much finesse. Similar but seemingly simpler than the excellent https://excalidraw.com/. Tiny thing: I think it would be clearer if the alt tags and menu items showed keyboard shortcuts as "[ctrl][G]" instead of "c t r l G".
Are you on Windows? The context menu seems to be behaving strangely for PCs users, probably a different set of default styles than I saw while developing. :/ Working on it!
Nice, didn’t Know about any of these two. Both are surprisingly responsive and fluid. Still not sure what I’d use this for; maybe explaining some math stuff.
I’m wonderfully surprised by how often people can have an idea and create something as lovely as this in a short amount of time. The web may have its flaws, but it also empowers this.
I'm a big fan of Excalidraw! And a contributor, too, I implemented the pen tool in Excalidraw. Both apps use my library perfect-freehand (https://github.com/steveruizok/perfect-freehand) for the digital ink.
The main difference between the two is that Excalidraw renders to HTML canvas, while tldraw renders to a regular DOM tree. There are tradeoffs but this lets us make things like sticky notes or other types of complex embedded content without too much difficulty.
I do some digital illustration, so maybe my perception is colored by a workflow that can't be generalized to others, but I am puzzled by it switching back to the arrow tool after drawing a shape. If I just drew a circle, I'm far more likely to draw another circle than select something.
Very nice. Was just looking to sketch some diagrams while on zoom with a friend, and resorted to Illustrator for the lack of a better tool. This would’ve done just fine, with much less complexity. Consider integrating with the team at Pop.com (what we use for meetings/sharing)
I like the pressure changes when you draw. Different sized pen/brush would be helpful. As would being able to choose to delete the entire line with the easer or just to erase a little of it off at a time
Excellent! I was surprised by some behaviour though, and all of these work in Excalidraw (I'm assuming it's the inspiration):
* When resizing a group of strokes, the resizing happens per stroke instead of as a group which is contrary to what I expected.
* Also during resizing and other operations, it would be good to see the selection outline, at the moment it hides itself which makes it difficult to know how far you've gone from the original position.
* I was expecting the Del key to work for deleting objects.
This is great - I have been looking for a simple diagraming tool that is source controllable and with a reasonably ergonomic user interface for a long time.
Very nice and smooth! I think this may be my go to whiteboarding site...
One feature request would be that if I start typing when a box or circle is selected, it would put text in that object. I realize that this might be difficult with hotkeys, but I use that feature in Visio all the time and I love it for quick diagrams.
Next best would be if you select the text button (or '7') when an object is selected, it would insert the text in that object.
A few other feature requests/bugs after using it with my iPad and a pen:
- can't select menu items with pen
- an undo button on the hotbar would be nice
- a way to control the return to select mode after drawing a shape - I often want to draw a few boxes and then connect them with arrows, but having to keep hitting the shape select is a bit painful
[+] [-] steveruizok|4 years ago|reply
A few notes:
- I post a _lot_ about tldraw on Twitter. If you're curious about how this came together, or want to follow along as we ship new features, check out my timeline (https://twitter.com/steveruizok).
- The whole tldraw project is MIT licensed and open source (https://github.com/tldraw). And it's still in development! If you'd like to contribute, join the Discord channel (https://discord.gg/SBBEVCA4PG) or drop by the repo (https://github.com/tldraw/tldraw).
- The multiplayer is using a pre-release version of Liveblocks (https://liveblocks.io/)—and honestly isn't using it in a very clever way—and so can have some desync issues. Consider this part of the app an early beta.
- We also ship a Visual Studio Code extension that lets you use tldraw inside of VS Code! (https://marketplace.visualstudio.com/items?itemName=tldraw-o...)
A little more about the project itself:
The tldraw project has a few different layers.
At the bottom, there is a renderer named @tldraw/core (https://github.com/tldraw/core) that is essentially a "put React components on a canvas UI" engine. You give it a data model along with a set of utilities to interpret that data model. Simple but very fast, very flexible, and packed with helpers for building these kinds of apps. It's already being used for some pretty ambitious projects apart from tldraw itself.
The main library, @tldraw/tldraw (https://github.com/tldraw/core), exports the whole tldraw "app" as a React component named <Tldraw/>. This component can be embedded in any React project. It can be controlled either by props or by its own API (ie `app.selectAll().duplicate()`).
The website is a very thin Next.js app that embeds the <Tldraw/> component.
There are also a few other libraries: @tldraw/vec for the vector math and @tldraw/intersect for intersections. If you like to work on these kinds of projects, definitely bookmark those libraries! They contain a lot of useful code.
As for its development, I've taken off a few months between jobs to work on this full time. Until now, the site has been accessible only to my Github sponsors, but it's now free and open to everyone. If If you'd like to support the project's continued development, you can sponsor me here: https://github.com/sponsors/steveruizok.
I'll answer questions here but if you want to contact me directly, my DMs are open @steveruizok.
[+] [-] ChrisArchitect|4 years ago|reply
[+] [-] jarnagin|4 years ago|reply
[+] [-] mkl|4 years ago|reply
How tied to React is this? Could it be used without it, or adapted to that?
[+] [-] maxbaines|4 years ago|reply
[+] [-] thesehands|4 years ago|reply
[+] [-] eterm|4 years ago|reply
I would expect Cancel to cancel the new project rather than losing the current work, and would expect a "No" option instead to mean lose the current project.
[+] [-] steveruizok|4 years ago|reply
[+] [-] EZ-Cheeze|4 years ago|reply
http://zeroprecedent.com/lore/flipmark.html
[+] [-] app4soft|4 years ago|reply
Just use SVG-edit & draw each stoke on separate "Layer".
[0] https://svg-edit.github.io/svgedit/
[+] [-] totetsu|4 years ago|reply
[+] [-] ChrisArchitect|4 years ago|reply
[+] [-] puttycat|4 years ago|reply
``` Simply stated, the “Sponsorware” model for releasing a project is made up of a few simple steps:
``[+] [-] satvikpendem|4 years ago|reply
[+] [-] mattsouth|4 years ago|reply
[+] [-] steveruizok|4 years ago|reply
https://github.com/tldraw/tldraw/issues/243
[+] [-] trevcanhuman|4 years ago|reply
[+] [-] jhunter1016|4 years ago|reply
[+] [-] bobbydreamer|4 years ago|reply
[+] [-] petilon|4 years ago|reply
[+] [-] zamadatix|4 years ago|reply
[+] [-] thepuppet33r|4 years ago|reply
[+] [-] steveruizok|4 years ago|reply
The main difference between the two is that Excalidraw renders to HTML canvas, while tldraw renders to a regular DOM tree. There are tradeoffs but this lets us make things like sticky notes or other types of complex embedded content without too much difficulty.
[+] [-] spicybright|4 years ago|reply
I like the ui better than Tldraw, I think. I'll have to try it more and see what I think.
[+] [-] chefandy|4 years ago|reply
[+] [-] steveruizok|4 years ago|reply
If you want it to stick with the same shape, double click the shape in the toolbar!
[+] [-] vharish|4 years ago|reply
[+] [-] kevincox|4 years ago|reply
[+] [-] unknown|4 years ago|reply
[deleted]
[+] [-] kirillzubovsky|4 years ago|reply
[+] [-] nixxie|4 years ago|reply
[+] [-] steveruizok|4 years ago|reply
And yeah, I've spent so much time thinking about how to do an eraser right! I think it will need to wait until the next version of my digital ink library. https://twitter.com/steveruizok/status/1458712896620404742
[+] [-] nathansherburn|4 years ago|reply
Looking forward to exploring your other projects!
[0] https://github.com/sponsors/steveruizok
[+] [-] croo|4 years ago|reply
[+] [-] davidkunz|4 years ago|reply
A few feature requests: - double click to insert text - `?` to open a shortcut page - reasonable shortcuts (not just numbers) - `del` to delete
[+] [-] speps|4 years ago|reply
* When resizing a group of strokes, the resizing happens per stroke instead of as a group which is contrary to what I expected.
* Also during resizing and other operations, it would be good to see the selection outline, at the moment it hides itself which makes it difficult to know how far you've gone from the original position.
* I was expecting the Del key to work for deleting objects.
[+] [-] outside1234|4 years ago|reply
Thank you for making.
[+] [-] efunneko|4 years ago|reply
One feature request would be that if I start typing when a box or circle is selected, it would put text in that object. I realize that this might be difficult with hotkeys, but I use that feature in Visio all the time and I love it for quick diagrams.
Next best would be if you select the text button (or '7') when an object is selected, it would insert the text in that object.
[+] [-] efunneko|4 years ago|reply
- can't select menu items with pen
- an undo button on the hotbar would be nice
- a way to control the return to select mode after drawing a shape - I often want to draw a few boxes and then connect them with arrows, but having to keep hitting the shape select is a bit painful