A few updates to tldraw.com. First off, lots of perf improvements, even when lots of shapes are on the screen. Slickest SVG canvas on the web.
Slick when creating shapes, too.
I'm also handling window resize events much better. There's a slight debounce before showing shapes that had previously fallen outside of the viewport.
(The gifs so far were all at regular speed, btw)
I've also added a Text and Arrows to the classes that can be used in the code editor, along with a new TextControl for setting text.
We've also got a good start on the code editor's docs.
There's been plenty of under-the-hood work on the code editor (essentially building a public object-oriented API around the private functional one).
And even further under the hood, you'll find a few dozen new tests. Already finding and fixing plenty of bugs, and now that I've got the framework all set up, I'm on my way to total coverage for user actions. Pretty wild to see how many things you can do in this app.
Thanks again to the 92(!) of you who have sponsored me and this project. Check it out for yourself at tldraw.com.
• • •
Missing some Tweet in this thread? You can try to
force a refresh
I was curious about how design apps differ in their edge / corner / rotate hit areas, so I wrote a script to move my mouse in a 50x50 grid and track what the cursor was.
To generate this research, I wrote a Hammerspoon script to move my mouse in a 50x50 grid and at each position check what the cursor was
In practice, it looked like this (30x). The result was a grid of cursors and a PNG that displayed each cursor in a different color.
Some of you aren't soldier-proofing your agent skills and it shows.
Ask your best model to: write the skill, spawn a subagent (same model) to complete the skill, and then iterate on the skill until the subagent can do the task perfectly.
Then repeat with a smaller model.
This progression exists all over in human product design: food industry, medical, military. For a thing to work, you want it to work in the worst-plausible circumstances, ie your newest employee, fresh recruit, first day on the job, busy rush.
A big model like Opus can work from bad instructions and figure the rest out on its own. It can search for docs that are mentioned but not linked, push past broken references, resolve conflicting directions.
Build popular open source library, train
own model on docs + examples (some private?), guarantee that model is updated with every release, sell as integration with user IDEs
Let’s say @threejs went this route. The core product is free (wedge) but AI assisted coding environments sometimes trip over out of date versions or make poor choices based on bad examples in their training data.
The threejs team announced ThreeAssist, an “expert” model fine-tuned on each minor release, fresh docs, etc. Outscores commodity models, produces better results, guaranteed to be true to the given version, etc.
I see a lot of AI uses for the @tldraw SDK. I’d say about 25% of our customers are full on AI apps and another 30% are looking to integrate AI tools into their canvas in the future
No surprise, the most shippable / effective use cases are currently where generated artifacts can augment existing use-cases
Figma has a “wireframe view” that might help here as a fallback, if it means keeping images etc out of memory, though it would be up to the app to switch into that. (And actually I’m not even sure if that would work)
For tldraw we have a limit of shapes per page and pages per project but it’s still theoretically possible to crash it out via memory depending on your browser.
Here's the full interaction, complete with hover indicators.
|
Note that you can interact with text directly either: a) when editing text or b) when the text tool is selected. This will mean you can't create text on top of other text, but I'm guessing this is okay.