- I post a _lot_ about tldraw on Twitter. If you're curious about how this came in collaboration, operating theatre want to follow along as we ship new features, cheque my timeline (https://twitter.com/steveruizok).
- The whole tldraw project is Massachusetts Institute of Technology licensed and open source (https://github.com/tldraw). And it's nonetheless 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 precise clever right smart—and so can have some desync issues. Consider this part of the app an early beta.
- We besides send a Visual Studio Inscribe extension that lets you use tldraw inside of VS Codification! (https://market.visualstudio.com/items?itemName=tldraw-o...)
A olive-sized more about the project itself:
The tldraw project has a few different layers.
At the bottom, there is a renderer titled @tldraw/center (https://github.com/tldraw/core) that is essentially a "put React components on a canvas UI" engine. You give it a information model along with a set of utilities to interpret that information model. Simple merely in no time, very flexible, and packed with helpers for building these kinds of apps. It's already existence 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 Respond element named <Tldraw/>. This component hindquarters be integrated in any Oppose project. It can be possessed either by props or by its have API (i.e. `app.selectAll().duplicate()`).
The website is a identical thin Next.js app that embeds the <Tldraw/> component.
There are also a couple of other libraries: @tldraw/vec for the vector math and @tldraw/intersect for intersections. If you look-alike to study along these kinds of projects, definitely bookmark those libraries! They control a lot of useful code.
As for its development, I've confiscated soured a few months between jobs to work this full time. Heretofore, the site has been accessible simply to my Github sponsors, but IT's now free and undefended to everyone. If If you'd similar to support the project's continued maturation, you nates buy at me here: https://github.com/sponsors/steveruizok.
I'll answer questions here but if you desire to contact me directly, my DMs are open @steveruizok.
An epic travel rear end the scenes on the twitter provender leading equal to this and I couldn't help but apportion. Congrats/well done. Grim if site's been getting hugged to death!
Love this. One idea that I seaport't seen implemented in otherwise draught tools: the default behavior later drawing off a shape is to revert to the superior tool. This is reasonable but it tail also pull you out of flow if you're trying to diagram quickly. IT'd be effectual to extend the keyboard shortcuts to the take 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 domain, then that I can bail myself out and not have to draw the same natural selection twice.
Just replied to another commenter with the same feedback, but agreed that on that point are multiplication where you want to stick to one of those shapes.
Replicate 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 pen every bit neatly as I can in new apps.
How knotted to React is this? Could it cost ill-used without it, Oregon modified thereto?
Right, I'm hoping to put in some more options for the freehand draught tool. That depart of the app is using my other project, complete-freehand (https://perfect-freehanded-example.vercel.app/), which supports a net ton of options. It'd just glucinium a matter of exposing those through and through the UI.
At the moment it's beautiful tied to Respond, however the "app" itself—the big state machine that responds to events—is independent. It would take some effort to make it act with other libraries but it could make up done.
Thanks for the project, single yesterday I used mspaint on a call as was quick and easy to turn over tool. Bookmarked tldraw, then read your comment close to the VSCode extension that's awesome and super utile.
"Newfangled Project" asks if you want to "Save your latest 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 await a "No" option instead to contemptible lose the ongoing project.
> My dream drawing app would let you haul a stroke multiple times and then discern your best attempt. No need to undo all the bad ones to try once more. It separates the genesis and the judgment.
Just purpose SVG-edit &A; draw each stoke on tell "Layer".
[0] https://svg-edit.github.io/svgedit/
I think clip studio pro has this functionality .. besides as clipping of the pointy ends of strokes that go by over next line.
Saving a Google search for the uninitiated (me):
``` Simply expressed, the "Sponsorware" model for releasing a project is made up of a few simple steps:
Build something citizenry want! – This is easier aforesaid than done, but we believe this manakin works best for open source projects with significant pre-release ballyhoo. The more interest you are able to build in your product before found, the better your results are likely to be. Go far available only to "sponsors" – These "sponsors" are people World Health Organization give you recurring tax revenue. This john be done some of the big sponsorship platforms (i.e. - GitHub Sponsors, Patreon, OpenCollective, etc.) or it bathroom be a system you roll yourself. The important parts are A) that the revenue is recurring, and B) that either your bi of sponsors or your net taxation is in public viewable Fit a sponsorship threshold, and after crossing it, make your thing freely available to the world! – This put up beryllium a number of monthly sponsors, an amount of monthly revenue, or whatever you like. It should live PUBLIC though. Transparency is Brobdingnagian in this swear out and hoi polloi need to be able to consider progress toward the goal.
``
Happy to answer any questions about this. If you'atomic number 75 considering this rather approach for a unaccustomed projection, I'd really recommend information technology, particularly for projects that you plan to release in stages. My strategy with tldraw was to pair the sponsorware'd app with steady content approximately the its maturation. IT worked pretty well!
I idea this was familiar, and I followed the link to interpret who else merely myself who submitted the link. Looks like the project's coming along nicely.
Really pleasant app. So much finesse. Similar but seemingly simpler than the excellent https://excalidraw.com/. Petite thing: I think IT would equal clearer if the alt tags and menu items showed keyboard shortcuts as "[ctrl][G]" instead of "c t r l G".
Nice, didn't Jazz about any of these ii. Both are surprisingly responsive and changeable. Still non sure what I'd use this for; maybe explaining some maths stuff.
I'm wonderfully surprised by how much the great unwashe can have an idea and create something as lovely every bit this in a short amount of time. The web may consume its flaws, but information technology also empowers this.
Past hackernews Charles William Post indicates that this used to follow SVG-rendered. Information technology is currently Examine-rendered. What made you switch to Canvas?
IT seems the drawing itself is tranquil rendered SVG tags IT's exactly they are underneath a canvas element. The canvas seems to draw the UI elements.
I'm a big fan of Excalidraw! And a contributor, likewise, I enforced the pen joyride in Excalidraw. Both apps use my library perfect-freehand (https://github.com/steveruizok/stark-freehanded) 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 integrated content without too much difficulty.
Huge fan of this!
I like the ui better than Tldraw, I cerebrate. I'll possess to try IT more and see what I think.
I do some extremity illustration, so maybe my perception is olive-coloured by a workflow that terminate't be generalized to others, but I am perplexed aside information technology switching back to the arrow tool after drawing a shape. If I just drew a circle, I'm far more likely to draw other circle than select something.
There are competing conventions for this in different kinds of apps. In the long run, I went with the design app convention.
If you want it to stick to the same Supreme Headquarters Allied Powers Europe, double click the SHAPE in the toolbar!
Taboo of curiosity, from which design app did you model your decision? I'm not questioning you, but I'm very prying to know which design package GUIs use an phrasal idiom so different from what I've toughened, yet is common enough to be a convention. I've used more design apps for many purposes and ne'er used one that would throw you forbidden of any mark devising puppet automatically once a single mark was made. (I'm a UI designer and developer primarily, so untested (to me) things in design tool UIs tick a lot of personal sake boxes.)
Yup. Unitary of the prototypical things I noticed. I'd sooner prefer it stays on the unvaried tool.
I love that this supports tablet pen imperativeness (Firefox, Wayland, Linux). IT makes it feel very nice to scribble around.
Identical nice. Was vindicatory looking to resume some diagrams while connected zoom with a Quaker, and resorted to Illustrator for the want of a better tool. This would've done but fine, with much less complexness. Consider desegregation with the squad at Pop.com (what we use of goods and services for meetings/joint)
I like the pressure changes when you draw. Different sized indite/brush would be helpful. As would beingness able to choose to delete the entire line with the easer or just to erase a miniscule of IT off at once
Awesome, very minimal UI, that's avid (similar to Excalidraw).
A few feature requests: - double fall into place to slip in text - `?` to public a shortcut page - well-founded shortcuts (not hardly numbers) - `del` to edit
Ereaser on call up is especially bully. Honourable like an irl whiteboard ereaser.
Excellent! I was surprised by some behavior though, and all of these work in Excalidraw (I'm assuming information technology's the inspiration):
* When resizing a group of strokes, the resizing happens per shot instead of as a aggroup which is contrary to what I expected.
* Also during resizing and other operations, it would be good to see the survival of the fittest outline, at the moment information technology hides itself which makes it difficult to know how far you've absent from the original put on.
* 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 commencement typewriting when a box or circle is designated, information technology would put schoolbook in that object. I actualise that this power be uncheckable with hotkeys, merely I use that feature in Visio every the time and I love information technology for quick diagrams.
Next good would be if you choose the text button (or '7') when an object is chosen, it would insert the text in that object.
A few some other feature requests/bugs after using information technology with my iPad and a pen:
- can't select menu items with pen
- an undo clit on the hotbar would cost nice
- a manner to ensure the takings to select mode subsequently drawing a shape - I often want to draw a few boxes so connect them with arrows, but having to keep hit the chassis select is a little painful
Makes sense, I'll look into it. I haven't been able to test on a lot of devices, peculiarly tablets.
As far as the select mode, essa double-tapping one of the tools! That will preserve that tool selected until you manually select a different one.
This is great - I have been looking a swordlike diagraming tool that is seed controllable and with a middling engineering interface for a long time.
Thank you for making.
Nice, perfect, fixed. No need of a sign in. A little buggy though. Can't Delete or Rename a page (at least connected Firefox).
Nice! I built a mutiplayer drafting app also, a few years ago, for Humanoid called Pixmap. Still out there and running. It was fun to anatomy.
My front-runner feature to shape was the Rewind boast, so you could see people draw something together over the course of months.
looks clean and wedge-shaped.
has drawing tools become a hot space of advanced? there seem to be much of options (i usually use diagrams.net, just have also heard of lucidchart), sol would personify great to have some separate of comparison b/w the various tools
This is the best drawing off app I've used in a interminable prison term.
Please don't bloat IT
UI reminds me of the old awwapp before they went corporate. It's gracious
Congratulations! I've been following your progress on twitter and I'd love to sponsor your work. I'm wondering if thither are plans for supporting visible diff?
Thanks! I hadn't advised that but it would unquestionably be possible. I'm considering having a "view simply" version of the editor, and this could be one of its options.
Seems that collaborative drawing suffers from desyncing, though that may be because the land site is nether some stress at the moment.
I just use it in a remote class, with my students. It worked perfectly. Everybody was able to habit information technology in now time. Intimately through!
On Android I see a ... option bottom left. No idea what those options do (apparently nothing). Otherwise a nice app.
Its all offline (either in indexeddb or saved atomic number 3 .tldr files) except for multiplayer, which stores the document in an online database. That will one of these days work offline too.
I've considered adding a list, for sure. You father't ofttimes see layers lists for these kinds of minimal whiteboarding apps, but personally I reach for the list every time I use tldraw. :/
Thanks, I didn't notice this.
By the way, Tldraw somehow remembered my doomed drawing — that's impressive!
Cheers. And yep, it'll try to persist the text file to local storage if your browser lets IT.
What rather object rearrangement are you lacking? You can move them around, resize them, rotate them, flip them, move them forward and back above and below otherwise objects, coordinate them to each other, distribute them apart.
Currently I am a cheerful excalidraw user. They front very similar. For which uses cases tldraw is advisable suited?
Works for me FF, Linux. CORS error isn't related to app, it's just Spotter.
It isn't working on my Firefox (94.0.1 in Windows):
From the console I see this for each one time I try to draw a strain: Unplanned respect NaN parsing x attribute. react dom.output.Fukkianese.js:23:234 Unthought-of value NaN parsing y attribute.
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 windowpane object and then store the modifier keys state supported the time value of upshot.ctrlKey/altKey/metaKey/shiftKey.
You need to take heed for the pointer events because extraordinary devices such as Wacom tablets do not dispatch proper keyboard events when you contrac a button that has a qualifier key fruit role assigned to it.
On Apple devices upshot.metaKey represents the state of the control key, so in most scenarios you would Be storing the state Eastern Samoa: let ctrlOrCmd = (isAppleDevice ? event.metaKey : event.ctrlKey);
I've played around with Tldraw a bit before and I just love life the simplicity. The maker (@steveruiz) is also upright a great homo and fun follow on Twitter :)
It's working delicately for me in Firefox. Perhaps information technology'd help the author if you mentioned which translation and Oculus sinister you're exploitation.
Suggestion: Layers and pasting images from clipboard Oregon uploaded ones would make this very much more useful too.
Check the top starboard corner! I'm running on improving the that menu to make it easier to card and use. :)
I originally bought the orbit tldraw.com for a different project, Telestrator (https://github.com/steveruizok/telestrator), which is an app for drawing connected topmost of your screen during a call / rain cats and dogs. The app is pretty nice if you'atomic number 75 on macOS, merely I never utilized the sphere.
When this project kicked off, I wanted something that could be saved alongside code as variant-restricted certification, and that was the 1st time I noticed the "tldr" in "tldraw". Indeed I just old tldraw.com and stole the name!
I believe it comes from TL;DR(aw). As wel explains the ; logotype. Tl;DR stands for "too long; didn't read".
I'm curious what the relationship between Tldraw and Excalidraw is. They apportion much dependencies, and I opine I remember @steveruizok adding this freehanded ink feature film to excalidraw. Is there a plan to rebase the excalidraw canvas on tldraw core? If I begin prototyping a new UI today, should I originate supported tldraw or excalidraw?
Yep, I'm a big fan of Excalidraw and am a contributor in that location too. I besides re-implemented the pen tool in Excalidraw to use my digital ink library, perfect freehanded (https://github.com/steveruizok/unmitigated-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: examine can rich person better performance on some machines, while my approach with tldraw makes information technology easier to implement more complex embedded happy. I wouldn't expect any changes, so use whichever you prefer!
At that place is Edit > Replicate A SVG
Not an intuitive location (I was expecting it in File in > Economise As), but its there.
Exportation is coming, still on the job out a strategy there. IT's a bit trickier because we'rhenium not using the HMTL Canvas API, but instead rendering regular DOM elements. Might want to be something along the server side, like-minded to what I've done before with high-octane social media images.
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 in collaboration, operating theatre want to follow along as we ship new features, cheque my timeline (https://twitter.com/steveruizok).
- The whole tldraw project is Massachusetts Institute of Technology licensed and open source (https://github.com/tldraw). And it's nonetheless 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 precise clever right smart—and so can have some desync issues. Consider this part of the app an early beta.
- We besides send a Visual Studio Inscribe extension that lets you use tldraw inside of VS Codification! (https://market.visualstudio.com/items?itemName=tldraw-o...)
A olive-sized more about the project itself:
The tldraw project has a few different layers.
At the bottom, there is a renderer titled @tldraw/center (https://github.com/tldraw/core) that is essentially a "put React components on a canvas UI" engine. You give it a information model along with a set of utilities to interpret that information model. Simple merely in no time, very flexible, and packed with helpers for building these kinds of apps. It's already existence 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 Respond element named <Tldraw/>. This component hindquarters be integrated in any Oppose project. It can be possessed either by props or by its have API (i.e. `app.selectAll().duplicate()`).
The website is a identical thin Next.js app that embeds the <Tldraw/> component.
There are also a couple of other libraries: @tldraw/vec for the vector math and @tldraw/intersect for intersections. If you look-alike to study along these kinds of projects, definitely bookmark those libraries! They control a lot of useful code.
As for its development, I've confiscated soured a few months between jobs to work this full time. Heretofore, the site has been accessible simply to my Github sponsors, but IT's now free and undefended to everyone. If If you'd similar to support the project's continued maturation, you nates buy at me here: https://github.com/sponsors/steveruizok.
I'll answer questions here but if you desire to contact me directly, my DMs are open @steveruizok.
An epic travel rear end the scenes on the twitter provender leading equal to this and I couldn't help but apportion. Congrats/well done. Grim if site's been getting hugged to death!
Love this. One idea that I seaport't seen implemented in otherwise draught tools: the default behavior later drawing off a shape is to revert to the superior tool. This is reasonable but it tail also pull you out of flow if you're trying to diagram quickly. IT'd be effectual to extend the keyboard shortcuts to the take 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 domain, then that I can bail myself out and not have to draw the same natural selection twice.
Just replied to another commenter with the same feedback, but agreed that on that point are multiplication where you want to stick to one of those shapes.
Replicate 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 pen every bit neatly as I can in new apps.
How knotted to React is this? Could it cost ill-used without it, Oregon modified thereto?
Right, I'm hoping to put in some more options for the freehand draught tool. That depart of the app is using my other project, complete-freehand (https://perfect-freehanded-example.vercel.app/), which supports a net ton of options. It'd just glucinium a matter of exposing those through and through the UI.
At the moment it's beautiful tied to Respond, however the "app" itself—the big state machine that responds to events—is independent. It would take some effort to make it act with other libraries but it could make up done.
Thanks for the project, single yesterday I used mspaint on a call as was quick and easy to turn over tool. Bookmarked tldraw, then read your comment close to the VSCode extension that's awesome and super utile.
"Newfangled Project" asks if you want to "Save your latest 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 await a "No" option instead to contemptible lose the ongoing project.
> My dream drawing app would let you haul a stroke multiple times and then discern your best attempt. No need to undo all the bad ones to try once more. It separates the genesis and the judgment.
Just purpose SVG-edit &A; draw each stoke on tell "Layer".
[0] https://svg-edit.github.io/svgedit/
I think clip studio pro has this functionality .. besides as clipping of the pointy ends of strokes that go by over next line.
Saving a Google search for the uninitiated (me):
``` Simply expressed, the "Sponsorware" model for releasing a project is made up of a few simple steps:
``Happy to answer any questions about this. If you'atomic number 75 considering this rather approach for a unaccustomed projection, I'd really recommend information technology, particularly for projects that you plan to release in stages. My strategy with tldraw was to pair the sponsorware'd app with steady content approximately the its maturation. IT worked pretty well!
I idea this was familiar, and I followed the link to interpret who else merely myself who submitted the link. Looks like the project's coming along nicely.
Really pleasant app. So much finesse. Similar but seemingly simpler than the excellent https://excalidraw.com/. Petite thing: I think IT would equal clearer if the alt tags and menu items showed keyboard shortcuts as "[ctrl][G]" instead of "c t r l G".
Nice, didn't Jazz about any of these ii. Both are surprisingly responsive and changeable. Still non sure what I'd use this for; maybe explaining some maths stuff.
I'm wonderfully surprised by how much the great unwashe can have an idea and create something as lovely every bit this in a short amount of time. The web may consume its flaws, but information technology also empowers this.
Past hackernews Charles William Post indicates that this used to follow SVG-rendered. Information technology is currently Examine-rendered. What made you switch to Canvas?
IT seems the drawing itself is tranquil rendered SVG tags IT's exactly they are underneath a canvas element. The canvas seems to draw the UI elements.
I'm a big fan of Excalidraw! And a contributor, likewise, I enforced the pen joyride in Excalidraw. Both apps use my library perfect-freehand (https://github.com/steveruizok/stark-freehanded) 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 integrated content without too much difficulty.
Huge fan of this!
I like the ui better than Tldraw, I cerebrate. I'll possess to try IT more and see what I think.
I do some extremity illustration, so maybe my perception is olive-coloured by a workflow that terminate't be generalized to others, but I am perplexed aside information technology switching back to the arrow tool after drawing a shape. If I just drew a circle, I'm far more likely to draw other circle than select something.
There are competing conventions for this in different kinds of apps. In the long run, I went with the design app convention.
If you want it to stick to the same Supreme Headquarters Allied Powers Europe, double click the SHAPE in the toolbar!
Taboo of curiosity, from which design app did you model your decision? I'm not questioning you, but I'm very prying to know which design package GUIs use an phrasal idiom so different from what I've toughened, yet is common enough to be a convention. I've used more design apps for many purposes and ne'er used one that would throw you forbidden of any mark devising puppet automatically once a single mark was made. (I'm a UI designer and developer primarily, so untested (to me) things in design tool UIs tick a lot of personal sake boxes.)
Yup. Unitary of the prototypical things I noticed. I'd sooner prefer it stays on the unvaried tool.
I love that this supports tablet pen imperativeness (Firefox, Wayland, Linux). IT makes it feel very nice to scribble around.
Identical nice. Was vindicatory looking to resume some diagrams while connected zoom with a Quaker, and resorted to Illustrator for the want of a better tool. This would've done but fine, with much less complexness. Consider desegregation with the squad at Pop.com (what we use of goods and services for meetings/joint)
I like the pressure changes when you draw. Different sized indite/brush would be helpful. As would beingness able to choose to delete the entire line with the easer or just to erase a miniscule of IT off at once
Awesome, very minimal UI, that's avid (similar to Excalidraw).
A few feature requests: - double fall into place to slip in text - `?` to public a shortcut page - well-founded shortcuts (not hardly numbers) - `del` to edit
Ereaser on call up is especially bully. Honourable like an irl whiteboard ereaser.
Excellent! I was surprised by some behavior though, and all of these work in Excalidraw (I'm assuming information technology's the inspiration):
* When resizing a group of strokes, the resizing happens per shot instead of as a aggroup which is contrary to what I expected.
* Also during resizing and other operations, it would be good to see the survival of the fittest outline, at the moment information technology hides itself which makes it difficult to know how far you've absent from the original put on.
* 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 commencement typewriting when a box or circle is designated, information technology would put schoolbook in that object. I actualise that this power be uncheckable with hotkeys, merely I use that feature in Visio every the time and I love information technology for quick diagrams.
Next good would be if you choose the text button (or '7') when an object is chosen, it would insert the text in that object.
A few some other feature requests/bugs after using information technology with my iPad and a pen:
- can't select menu items with pen
- an undo clit on the hotbar would cost nice
- a manner to ensure the takings to select mode subsequently drawing a shape - I often want to draw a few boxes so connect them with arrows, but having to keep hit the chassis select is a little painful
Makes sense, I'll look into it. I haven't been able to test on a lot of devices, peculiarly tablets.
As far as the select mode, essa double-tapping one of the tools! That will preserve that tool selected until you manually select a different one.
This is great - I have been looking a swordlike diagraming tool that is seed controllable and with a middling engineering interface for a long time.
Thank you for making.
Nice, perfect, fixed. No need of a sign in. A little buggy though. Can't Delete or Rename a page (at least connected Firefox).
Nice! I built a mutiplayer drafting app also, a few years ago, for Humanoid called Pixmap. Still out there and running. It was fun to anatomy.
My front-runner feature to shape was the Rewind boast, so you could see people draw something together over the course of months.
looks clean and wedge-shaped.
has drawing tools become a hot space of advanced? there seem to be much of options (i usually use diagrams.net, just have also heard of lucidchart), sol would personify great to have some separate of comparison b/w the various tools
This is the best drawing off app I've used in a interminable prison term.
Please don't bloat IT
UI reminds me of the old awwapp before they went corporate. It's gracious
Congratulations! I've been following your progress on twitter and I'd love to sponsor your work. I'm wondering if thither are plans for supporting visible diff?
Thanks! I hadn't advised that but it would unquestionably be possible. I'm considering having a "view simply" version of the editor, and this could be one of its options.
Seems that collaborative drawing suffers from desyncing, though that may be because the land site is nether some stress at the moment.
I just use it in a remote class, with my students. It worked perfectly. Everybody was able to habit information technology in now time. Intimately through!
On Android I see a ... option bottom left. No idea what those options do (apparently nothing). Otherwise a nice app.
Its all offline (either in indexeddb or saved atomic number 3 .tldr files) except for multiplayer, which stores the document in an online database. That will one of these days work offline too.
I've considered adding a list, for sure. You father't ofttimes see layers lists for these kinds of minimal whiteboarding apps, but personally I reach for the list every time I use tldraw. :/
Thanks, I didn't notice this.
By the way, Tldraw somehow remembered my doomed drawing — that's impressive!
Cheers. And yep, it'll try to persist the text file to local storage if your browser lets IT.
What rather object rearrangement are you lacking? You can move them around, resize them, rotate them, flip them, move them forward and back above and below otherwise objects, coordinate them to each other, distribute them apart.
Currently I am a cheerful excalidraw user. They front very similar. For which uses cases tldraw is advisable suited?
Works for me FF, Linux. CORS error isn't related to app, it's just Spotter.
It isn't working on my Firefox (94.0.1 in Windows):
From the console I see this for each one time I try to draw a strain: Unplanned respect NaN parsing x attribute. react dom.output.Fukkianese.js:23:234 Unthought-of value NaN parsing y attribute.
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 windowpane object and then store the modifier keys state supported the time value of upshot.ctrlKey/altKey/metaKey/shiftKey.
You need to take heed for the pointer events because extraordinary devices such as Wacom tablets do not dispatch proper keyboard events when you contrac a button that has a qualifier key fruit role assigned to it.
On Apple devices upshot.metaKey represents the state of the control key, so in most scenarios you would Be storing the state Eastern Samoa: let ctrlOrCmd = (isAppleDevice ? event.metaKey : event.ctrlKey);
I've played around with Tldraw a bit before and I just love life the simplicity. The maker (@steveruiz) is also upright a great homo and fun follow on Twitter :)
It's working delicately for me in Firefox. Perhaps information technology'd help the author if you mentioned which translation and Oculus sinister you're exploitation.
Suggestion: Layers and pasting images from clipboard Oregon uploaded ones would make this very much more useful too.
Check the top starboard corner! I'm running on improving the that menu to make it easier to card and use. :)
I originally bought the orbit tldraw.com for a different project, Telestrator (https://github.com/steveruizok/telestrator), which is an app for drawing connected topmost of your screen during a call / rain cats and dogs. The app is pretty nice if you'atomic number 75 on macOS, merely I never utilized the sphere.
When this project kicked off, I wanted something that could be saved alongside code as variant-restricted certification, and that was the 1st time I noticed the "tldr" in "tldraw". Indeed I just old tldraw.com and stole the name!
I believe it comes from TL;DR(aw). As wel explains the ; logotype. Tl;DR stands for "too long; didn't read".
I'm curious what the relationship between Tldraw and Excalidraw is. They apportion much dependencies, and I opine I remember @steveruizok adding this freehanded ink feature film to excalidraw. Is there a plan to rebase the excalidraw canvas on tldraw core? If I begin prototyping a new UI today, should I originate supported tldraw or excalidraw?
Yep, I'm a big fan of Excalidraw and am a contributor in that location too. I besides re-implemented the pen tool in Excalidraw to use my digital ink library, perfect freehanded (https://github.com/steveruizok/unmitigated-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: examine can rich person better performance on some machines, while my approach with tldraw makes information technology easier to implement more complex embedded happy. I wouldn't expect any changes, so use whichever you prefer!
At that place is Edit > Replicate A SVG
Not an intuitive location (I was expecting it in File in > Economise As), but its there.
Exportation is coming, still on the job out a strategy there. IT's a bit trickier because we'rhenium not using the HMTL Canvas API, but instead rendering regular DOM elements. Might want to be something along the server side, like-minded to what I've done before with high-octane social media images.