steveruizok

Not immediately! This might turn out to be just a great demo, might be something worth continuing with, really depends on how the next few weeks go. Either way there might be something we can do with the developer community around data endpoints in the short term.

Yeah we did a lot of work this summer that was really far out, maybe too far out, and didn't come together as a product. We shipped a lot of it in teach.tldraw.com though. Computer is exciting to me in part because it feels both very weird and also intelligible as a piece of software.

believe it or not I picked the tldraw name because I already owned the domain (I'd bought it for a different project called telestrator) and it was only weeks later when Francois Laberge complimented the clever name that I noticed the portmanteau

yep, more news on that soon

The core product / pitch is still the same—an SDK for whiteboards and other infinite canvas stuff—and that's what we monetize through licenses. Computer (and our other demos) are basically marketing, R&D, and fun.

Excalidraw is more open source than we are at tldraw! We're both source available on GitHub but Excalidraw is MIT while the newer versions of tldraw are a kind of watermark-ware. (We still have an older MIT version available but not in development)

So sorry Dustin. We'll have a new version of tldraw with user accounts in a few weeks that should improve things, but until then please no one clear your browser storage

Hey, Steve here from tldraw.

We had a bunch of fun putting this together so I'm really happy to see folks enjoying it. I'm not sure where the project is going but I've been waking up for weeks with a fresh "oh christ, we could do ___", so that's exciting.

Ask me anything!

Hey, sorry for the login. This is a scrappy little experiment that uses the tldraw canvas. You can work with an AI on the canvas and get it to draw stuff using the same elements that you can draw. Honestly the AI is pretty bad at this, however its also fun and silly and sometimes amazing. Maybe we'll be able to use the results to reinforce good outcomes.

toad pond

Hi, this is Steve from tldraw. This project is a deployment of our open source draw fast repo, see here: https://github.com/tldraw/draw-fast

However, we did NOT publish this website! We have no relation it and can’t make any promises about it. The site is using an early access API endpoint from Fal that should be turned off soon. I would prefer this link be removed.

Click the little Copy icon next to the output iframe.

Yes! If you have a previously generated shape selected, it incorporates the code from that file into the prompt for the next one. i.e. "here's what we had before, here are the notes that came back"

Hey, Steve here from tldraw. This is a toy project with a horrible security pattern, sorry. If you want to run it locally or check out the source, it's here: https://github.com/tldraw/draw-a-ui. You can also see a bunch of other examples at https://twitter.com/tldraw.

Happy to answer any questions about tldraw/this project. It's definitely not putting anyone out of work, but it's a blast to play with. Here's a more complicated example of what you can get it to do: https://twitter.com/tldraw/status/1725083976392437894

Hey, this is Steve from tldraw, I was up late last night putting this together.

I've added a note next to the input with more info here, but basically: the vision API is so new that its immediately rate limited on any site like this, and because OpenAI doesn't have a way of authorizing a site to use their own API keys (they should!), this was the best we could do. We don't store the API key or send it to our own servers, it just goes to OpenAI via a fetch request.

Putting an API key into a random text input is obviously a bad idea and I hope this doesn't normalize that. However, you can read the source code (https://github.com/tldraw/draw-a-ui) and come to your own conclusions—or else just run it locally instead.

Drawing lines is faster than you think! The perfect-freehand algorithm that I wrote / that canva is using here does not use splines but it does recompute the entire line on every frame. It’s fine at 60fps (and also fine at 120fps) up to a few thousand points on somewhat modern hardware before the paths get too slow to render. The algo itself is just blazing fast, in part because it does not rely on splines (which are much more complex).

For an svg-style approach to ink (as opposed to a raster / dab-style brush) there’s no other option than recomputing the whole line each time. As a bonus, you can adjust the properties after the fact very easily. (You can try that at perfectfreehand.com.)

For what it’s worth, perfect freehand (the library I wrote that they’re using for the digital ink) does not use Bézier curves at all to determine the position of points or create the “stroke” polygon that wraps the input points. Curves are only used to draw the line around that stroke polygon.

I tried to incorporate simplification into the perfect freehand algorithm but eventually gave up because I could not find any “stable” algorithm that would not cause the line to jump around as you drew / added points to the end. As far as I know none exist. Most apps that use simplification solve this problem by simplifying the line only after you’ve finished drawing, however for handwriting or artistic drawing this is especially bad as it “undoes” legitimate decisions you’ve made about where to place detail. In addition, the perfect-freehand algorithm simulates pressure based on density of points, so simplifying the line (ie removing points) without creating a corresponding pressure curve will cause a reduction in line variation, which is part of the fun of using it in the first place!

I’d love to learn more about what the canva team has done here though. Freehand drawing is a fascinating problem space, even without the ml / shape recognition stuff.

I’m the author of perfect-freehand. It’s a good amount and I found the whole interaction really great: I get to tease library users on twitter to sponsor me, get a bunch of engagement, and give the company the opportunity to sponsor me to get a positive boost from a happy ending. No complaints.

Having my work used in a visible way by large companies does make me wish I’d productized it more. Maybe sometime I’ll release a refactored/improved version under a different license. However, I’ve also started a company around a different open source project of mine (tldraw.com) and if there’s a bag to be got, I’m sure I’ll get it there.

Embedding fonts isn't really great for SVG exports; either you link to the fonts, in which case the SVGs only load correctly when the user has the font locally or is online, and the CDN is still running; or else you embed them as base 64, which makes the image very large.

We do the base 64 route for tldraw, which is sort of the best of all bad options. I'd like to someday add more export options so that a creator could host the fonts themselves on the same site where the SVG is shown.

Is there a migration guide?

A infinitely scrolling drawing app. (Give it a few hours for the trolls to get bored.) It should work very very well on your iPad / tablet / pressure sensitive stylus. Built with open source: react, vite, yjs and perfect-freehand.

I actually contributed to Excalidraw, it’s a great project! They also use my ink (MIT licensed perfect-freehand library) for their pen tool. While tldraw mostly grew out of another project of mine (globs.design), I took a lot of inspiration from Excalidraw’s feature set. We’ve since caught up with eachother on a bunch of features (sticky notes, labels) and hopefully will continue to trade tips and features as separate open source projects.

That’s right, it’s React all the way down. It could render using anything, really; the React rendering part is quite loosely coupled from the main “what needs to be rendered” application layer.

Some opportunities that have come up so far: licensing the engine to commercial products, selling the related services like multiplayer, hosting the experience as an embed, integrations with other services (eg learning management systems), building out the dot com experience into its own a sass product for users / teams, building our own products for other verticals such as pdf annotation or ml image annotation, or door to door sales of nice looking arrows.

Hey! Steve here, founder etc. The biggest value prop is having a canvas that’s “web native”, and so can render anything that a regular website can. Try pasting a codepen link, scratch project, google maps url, gif or video. Almost all of the developers who built on tldraw’s first release ended up building apps that leveraged this; for example, a spatial collection of graphs keeping track of aws cloud processes. https://twitter.com/foodybrian/status/1572784516586172418?s=...

There are trade offs for using the DOM vs. a custom <canvas> renderer, however I think they’re worth it for the types of applications that can be built this way.

We’ve also put a ton of thought (and opinions) into the interactions in tldraw. Some of this can sound pretty ridiculous, like rotating your cursor when your rotate a selection, while also counter-rotating the cursor’s shadow to preserve light direction. But especially with this sort of app, you really notice those details when they’re not there. As a product for developers, my hope is that the quality and attention to detail become part of the value proposition! Users certainly notice it.

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.

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.

Fixed!

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

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

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!