![]()  (gif is with 6x CPU throttling to make the effect more visible) This is the first of a few diffs I'm working on to make dropping images onto the canvas feel a lot faster. There are three main changes here: 1. We operate on `Blob`s and `File`s rather than data urls. This saves a fair bit on converting to/from base64 all the time. I've updated our `MediaHelper` APIs to encourage the same in consumers. 2. We only check the max canvas size (slow) if images are above a certain dimension that we consider "safe" (8k x 8k) 3. Switching from the `downscale` npm library to canvas native downscaling. that library claims to give better results than the browser, but hasn't been updated in ~7 years. in modern browsers, we can opt-in to native high-quality image smoothing to achieve similar results much faster than with an algorithm implemented in pure JS. I want to follow this up with a system to show image placeholders whilst we're waiting for long-running operations like resizing etc but i'm going to split that out into its own diff as it'll involve some fairly complex changes to the history management API. ### Change Type - [x] `major` — Breaking change [^1]: publishes a `patch` release, for devDependencies use `internal` [^2]: will not publish a new version ### Test Plan 1. Tested manually, unit tests & end-to-end tests pass |
||
---|---|---|
.github | ||
.husky | ||
.yarn | ||
apps | ||
assets | ||
config | ||
packages | ||
scripts | ||
.eslintignore | ||
.eslintplugin.js | ||
.eslintrc.js | ||
.gitignore | ||
.ignore | ||
.prettierignore | ||
.prettierrc | ||
.yarnrc.yml | ||
CHANGELOG.md | ||
CLA.md | ||
CODE_OF_CONDUCT.md | ||
CONTRIBUTING.md | ||
lazy.config.ts | ||
lerna.json | ||
LICENSE.md | ||
package.json | ||
public-yarn.lock | ||
README.md | ||
TRADEMARKS.md | ||
vercel.json |

tldraw
Welcome to the public monorepo for tldraw. tldraw is an open source library for creating infinite canvas experiences in React. It's the software behind the digital whiteboard tldraw.com.
👉 Read the docs and learn more at tldraw.dev.
Local development
To run the local development server, first clone this repo.
Install dependencies:
yarn
Start the local development server:
yarn dev
Open the example project at localhost:5420
.
License
tldraw's source code and distributed packages are provided under the non-commercial tldraw license.
This license does not permit commercial use. If you wish to use tldraw in a commercial product or enterprise, you will need to purchase a commercial license. To obtain a commercial license, please contact us at hello@tldraw.com.
To learn more, see our license page.
Trademarks
The tldraw name and logo are trademarks of tldraw. Please see our trademark guidelines for info on acceptable usage.
Community
Have questions, comments or feedback? Join our discord or start a discussion.
Contribution
Please see our contributing guide. Found a bug? Please submit an issue.
Contact
Find us on Twitter at @tldraw or email hello@tldraw.com. You can also join our discord for quick help and support.