```
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!
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.
It also doesn't appear to do anything; the menu just sits there after you select an item.
In fact, it really doesn't do anything if nothing is selected on the canvas. This is not intuitive; you expect it to copy the drawing to the clipboard.
If something is selected, the copy works, but the menu still sits 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.
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);
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.
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. :/
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".
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
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!
"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.
- 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.
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.
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.
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.
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!
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.
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.
114 comments
[ 3.0 ms ] story [ 136 ms ] thread``` Simply stated, the “Sponsorware” model for releasing a project is made up of a few simple steps:
``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.
[1]: https://unglue.it/
Not an intuitive location (I was expecting it in File > Save As), but its there.
In fact, it really doesn't do anything if nothing is selected on the canvas. This is not intuitive; you expect it to copy the drawing to the clipboard.
If something is selected, the copy works, but the menu still sits there.
What API is used to track Shift/Ctrl/Alt keys state?
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);
I think it's more refined than Tldraw.
By the way, Tldraw somehow remembered my unsaved drawing — that's impressive!
http://zeroprecedent.com/lore/flipmark.html
Just use SVG-edit & draw each stoke on separate "Layer".
[0] https://svg-edit.github.io/svgedit/
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
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 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.
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.
How tied to React is this? Could it be used without it, or adapted to that?
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.
Double click on the shape in the toolbar to keep it selected!
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.
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 like the ui better than Tldraw, I think. I'll have to try it more and see what I think.