Hacker News new | past | comments | ask | show | jobs | submit login
Tldraw – a tiny little drawing app (tldraw.com)
471 points by ChrisArchitect 71 days ago | hide | past | favorite | 111 comments



Hey, author here! Glad folks are enjoying this.

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.


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.


Just replied to another commenter with the same feedback, but agreed that there are times where you want to stick with one of those shapes.

Double click on the shape in the toolbar to keep it selected!


This looks great! The stroke smoothing seems really aggressive though. It's hard to write as neatly as I can in other apps.

How tied to React is this? Could it be used without it, or adapted to that?


Right on, I'm hoping to put in some more options for the freehand drawing tool. That part of the app is using my other project, perfect-freehand (https://perfect-freehand-example.vercel.app/), which supports a ton of options. It'd just be a matter of exposing those through the UI.

At the moment it's pretty tied to React, however the "app" itself—the big state machine that responds to events—is independent. It would take some effort to make it work with other libraries but it could be done.


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.


Good call! Pushing a fix for that now.


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.

http://zeroprecedent.com/lore/flipmark.html


> 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".

[0] https://svg-edit.github.io/svgedit/


I think clip studio pro has this functionality .. as well as clipping of the pointy ends of strokes that go over next line.


Sorry, since this was posted a month ago (https://news.ycombinator.com/item?id=28854949) highlighting that it was sponsorware. It is now open-sourced and free also.


Saving a Google search for the uninitiated (me):

``` 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.
``


Happy to answer any questions about this. If you're considering this kind of approach for a new project, I'd really recommend it, especially for projects that you plan to release in stages. My strategy with tldraw was to pair the sponsorware'd app with steady content about the its development. It worked pretty well!


Awesome. Are you open to sharing some #'s? How many people sponsored this?


Sure, this is public info on my profile: https://github.com/sponsors/steveruizok.

I'm up to 211 sponsors, about $1700 per month.

Many of those sponsors are one-time donations. At the beginning, I set the minimum one-time donation to $1; once I reached 100 sponsors, I bumped the minimum up to $10.

The larger sponsors come mostly from digital ink library perfect-freehand (https://github.com/steveruizok/perfect-freehand), also MIT licensed, which is being used by many products such as Next.js live, Milanote, Clover, etc.


Congrats! That's great to see.


Looks similar to the seemingly-dormant Unglue initiative for funding books[1].

[1]: https://unglue.it/


I thought this was familiar, and I followed the link to see who else but myself who submitted the link. Looks like the project's coming along nicely.


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!

https://github.com/tldraw/tldraw/issues/243


Ah, I hadnt looked at the issues. Saw this in ubuntu firefox and android chrome.


It also looks like that on Android Firefox.


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.


So true


Previous hackernews post indicates that this used to be SVG-rendered. It is currently Canvas-rendered. What made you switch to Canvas?


It seems the drawing itself is still rendered SVG tags it's just they are underneath a canvas element. The canvas seems to draw the UI elements.


Reminds me of https://excalidraw.com/


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.


Huge fan of this!

I like the ui better than Tldraw, I think. I'll have to try it more and see what I think.


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.


There are competing conventions for this in different kinds of apps. In the end, I went with the design app convention.

If you want it to stick with the same shape, double click the shape in the toolbar!


Out of curiosity, from which design app did you model your decision? I’m not questioning you, but I’m very curious to know which design software GUIs use an idiom so different from what I’ve experienced, yet is common enough to be a convention. I’ve used many design apps for many purposes and never used one that would switch you out of any mark making tool automatically once a single mark was made. (I’m a UI designer and developer primarily, so new (to me) things in design tool UIs tick a lot of personal interest boxes.)


Yup. One of the first things I noticed. I'd rather prefer it stays on the same tool.


I love that this supports tablet pen pressure (Firefox, Wayland, Linux). It makes it feel very nice to scribble around.


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


Thanks! There are some size options in the menu at the top right.

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


Absolutely love this! Nice work!

Looking forward to exploring your other projects!

[0] https://github.com/sponsors/steveruizok


Awesome, very minimal UI, that's great (similar to Excalidraw).

A few feature requests: - double click to insert text - `?` to open a shortcut page - reasonable shortcuts (not just numbers) - `del` to delete


Ereaser on phone is especially good. Just like an irl whiteboard ereaser.


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.


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


Makes sense, I'll look into it. I haven't been able to test on a lot of devices, especially tablets.

As far as the select mode, try double-tapping one of the tools! That will keep that tool selected until you manually select a different one.


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.

Thank you for making.


Nice, clean, fast. No need of a sign in. A little buggy though. Can't Delete or Rename a page (at least on Firefox).


Check out https://excalidraw.com/

I think it's more refined than Tldraw.


Nice! I built a mutiplayer drawing app too, a few years ago, for Android called Pixmap. Still out there and running. It was fun to build.

My favorite feature to build was the Rewind feature, so you could see people draw something together over the course of months.


looks clean and simple.

has drawing tools become a hot space of late? there seem to be a lot of options (i usually use diagrams.net, but have also heard of lucidchart), so would be great to have some sort of comparison b/w the various tools


This is the best drawing app I've used in a long time.

Please don't bloat it


UI reminds me of the old awwapp before they went corporate. It’s nice


The mobile web experience (Safari) for this app is really remarkable.


Congratulations! I've been following your progress on twitter and I'd love to sponsor your work. I'm wondering if there are plans for supporting visual diff?


Thanks! I hadn’t considered that but it would definitely be possible. I’m considering having a “view only” version of the editor, and this could be one of its options.


This is amazing. Immediately useful. Intuitive. Small and fast.


This is excellent work!

Starts immediately and works on my phone as well as my laptop. No sign up or anything - just straight to business as it should be.

It is open source and interestingly packaged as a library:

https://github.com/tldraw/tldraw


Freehand drawing with a dotted line is super fun


Seems that collaborative drawing suffers from desyncing, though that may be because the site is under some stress at the moment.


I just use it in a remote class, with my students. It worked perfectly. Everybody was able to use it in now time. Well done!


Definitely checkout the VS Code extension so you can version control diagrams/drawings along side your code.

Works on VS Code for Desktop, github.dev, vscode.dev, GitHub Codespaces.

https://marketplace.visualstudio.com/items?itemName=tldraw-o...

Some thoughts on the extension and workflows are here: https://twitter.com/seflless/status/1446892923661045767?s=20


Here’s another early experiment with the extension. This time using Tldraw as a personal or team Trello style task planner. https://twitter.com/seflless/status/1452296968718401536?s=21

Not sure that this would work for most people , but would for sure for individuals who think I’m sticky notes


On Android I see a ... option bottom left. No idea what those options do (apparently nothing). Otherwise a nice app.


Great minimalist yet intuitive web app.


Super nice. When using the app, does the data get uploaded somewhere or is it all offline?


Its all offline (either in indexeddb or saved as .tldr files) except for multiplayer, which stores the document in an online database. That will eventually work offline too.


Consider adding layers.


I've considered adding a list, for sure. You don't often see layers lists for these kinds of minimal whiteboarding apps, but personally I reach for the list every time I use tldraw. :/


Or objects rearrangement at least.


We do have that! You can right click and select commands like Move > Send to Back.


Thanks, I didn't notice this.

By the way, Tldraw somehow remembered my unsaved drawing — that's impressive!


Cheers. And yep, it’ll try to persist the document to local storage if your browser lets it.


What kind of object rearrangement are you missing? You can move them around, resize them, rotate them, flip them, move them forward and back above and below other objects, align them to each other, distribute them apart.


Currently I am a happy excalidraw user. They look very similar. For which uses cases tldraw is better suited?


I see this in the network tab -

https://www.googletagmanager.com/gtag/js?id=G-

what does this do ?

There is no link transparently talking about this.


That is google analytics for traffic analytics.


Blank screen on Firefox. Console reports a CORS error.


Works for me FF, Linux. CORS error isn't related to app, it's just Sentry.


Works fine on my Firefox.


On mine also.


It isn't working on my Firefox (94.0.1 in Windows):

From the console I see this each time I try to draw a line: Unexpected value NaN parsing x attribute. react dom.production.min.js:23:234 Unexpected value NaN parsing y attribute.


Very nice.

What API is used to track Shift/Ctrl/Alt keys state?


There is the standard event.getModifierState() API, but the most reliable solution I found was to listen for "keydown", "keyup", "blur", "pointerdown", "pointermove" and "pointerup" events on the window object and then store the modifier keys state based on the value of event.ctrlKey/altKey/metaKey/shiftKey.

You need to listen for the pointer events because some devices such as Wacom tablets do not dispatch proper keyboard events when you press a button that has a modifier key role assigned to it.

On Apple devices event.metaKey represents the state of the command key, so in most scenarios you would be storing the state as: let ctrlOrCmd = (isAppleDevice ? event.metaKey : event.ctrlKey);


Yep, these all come from events.


Very performant!


page rename not working btw nice app!


Fixed!


I've played around with Tldraw a bit before and I just love the simplicity. The maker (@steveruiz) is also just a great human being and fun follow on Twitter :)


doesn't work in firefox


It's working fine for me in Firefox. Perhaps it'd help the author if you mentioned which version and OS you're using.


Firefox Developer edition (95.0b8 (64-bit)), Win 11.


Suggestion: Layers and pasting images from clipboard or uploaded ones would make this a lot more useful too.


works really well on my Fold 3 with the sPen.

any chance you'll add colors at all?


Check the top right corner! I'm working on improving the that menu to make it easier to notice and use. :)


oh nice!


What does the TL stand for?


I originally bought the domain tldraw.com for a different project, Telestrator (https://github.com/steveruizok/telestrator), which is an app for drawing on top of your screen during a call / stream. The app is pretty nice if you're on macOS, but I never used the domain.

When this project kicked off, I wanted something that could be saved alongside code as version-controlled documentation, and that was the first time I noticed the "tldr" in "tldraw". So I just used tldraw.com and stole the name!


I believe it comes from TL;DR(aw). Also explains the ; logo. TL;DR stands for "too long; didn't read".


tiny little?


I’m curious what the relationship between Tldraw and Excalidraw is. They share some dependencies, and I think I remember @steveruizok adding this freehand ink feature to excalidraw. Is there a plan to rebase the excalidraw canvas on tldraw core? If I start prototyping a new UI today, should I start based on tldraw or excalidraw?


Yep, I'm a big fan of Excalidraw and am a contributor there too. I also re-implemented the pen tool in Excalidraw to use my digital ink library, perfect freehand (https://github.com/steveruizok/perfect-freehand), which is used extensively in tldraw.

tldraw is a separate project. The big difference is that Excalidraw renders to HTML canvas while tldraw renders to a regular DOM tree. There's a trade off: canvas can have better performance on some machines, while my approach with tldraw makes it easier to implement more complex embedded content. I wouldn't expect any changes, so use whichever you prefer!


there is no way to export the canvas. why ?


There is Edit > Copy As SVG

Not an intuitive location (I was expecting it in File > Save As), but its there.


Export is coming, still working out a strategy there. It's a bit trickier because we're not using the HMTL Canvas API, but instead rendering regular DOM elements. Might need to be something on the server side, similar to what I've done before with dynamic social media images.


Gotta love the file extension when saving "tldr" xD



nice one


Too long didn't raw?




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: