v2.2.0 • tldraw Docs

This release introduces the bindings system, camera constraints, and configurable options—major features that unlock new types of applications you can build with tldraw.

What's new

Bindings (#3326)

Bindings allow you to create relationships between shapes. Our default arrow shapes are a great example: each end of the arrow can bind to another shape. When that shape moves, so does the arrow.

Before this change, arrows were hard-coded into the library. Now, with the bindings system, you can create arrows, constraint systems, visual programming environments, and much more.

Check out the bindings guide for more information. (#3780) (#3797) (#3800) (#3871)

Camera constraints (#3282)

You can now limit the camera to a fixed area of the canvas. This is useful for creating experiences that don't quite fit the "infinite canvas" paradigm: document annotators, image editors, slideshow creators, and more.

See the camera constraints guide for more information. (#3747) (#3814)

Configurable options (#3799)

You can now override many options which were previously hard-coded constants. Pass an options prop into the tldraw component to change the maximum number of pages, grid steps, or other previously hard-coded values.

See TldrawOptions for details. (#3900)

💥 Undo/redo changes

The history system has been significantly reworked:

History options simplified: squashing, ephemeral, and preserveRedoStack flags have been consolidated. Use editor.history.ignore(fn) or editor.history.batch(fn, {history: 'record-preserveRedoStack'}) instead.
Automatic recording: Everything that touches the store is now recorded in undo/redo (unless part of mergeRemoteChanges). Use editor.history.ignore(fn) for changes you don't want recorded.
Side effects captured: Changes in side-effects are now captured by undo/redo. Wrap in editor.history.ignore for the old behavior.

API changes

💥 canBind now accepts an options object instead of just the shape. See TLShapeUtilCanBindOpts.
💥 editor.sideEffects.registerBatchCompleteHandler replaced with editor.sideEffects.registerOperationCompleteHandler. (#3748)
💥 editor.getArrowInfo(shape) replaced with getArrowInfo(editor, shape).
💥 editor.getArrowsBoundTo(shape) removed—use editor.getBindingsToShape(shape, 'arrow') instead.
💥 Arrow shape start and end properties are now always points. Use getArrowBindings(editor, shape) to check for bindings.
💥 Types renamed: ShapeProps → RecordProps, ShapePropsType → RecordPropsType, TLShapePropsMigrations → TLPropsMigrations, SchemaShapeInfo → SchemaPropsInfo.
Add editor.blur method. (#3875)
Add better defaults for createTLStore. (#3886)
Add getSnapshot and loadSnapshot for easier document persistence. See State Snapshots. (#3811)
Add select option to Editor.groupShapes and Editor.ungroupShapes. (#3690)
InFrontOfTheCanvas now has access to the editor's UI context. (#3782)
useEditor and other context-based hooks now throw an error when used out-of-context. (#3750)
Add defaultShapeSchemas for custom multiplayer implementations. (#3613)

Improvements

Add a heart shape to the geo shape set. (#3787)
Improve rendering for bookmarks without preview images. (#3856)
Improve undo/redo UX around image cropping. (#3891)
Increase default limit of shapes per page from 2000 to 4000. (#3716)
Expand accepted image types to include webp, webm, apng, and avif. (#3730)
Prune unused assets when loading .tldr files. (#3689)
Improve handling of mouse-type devices that support pressure (e.g., Wacom tablets). (#3639)
Change text shapes to be left-aligned by default. (#3627)
Add Desmos graph embed type. (#3608)

Bug fixes

Fix 'insert media' undo removing other changes. (#3910)
Fix referrer being sent for bookmarks and images. (#3881)
Fix minimum drag distance being wrong when zoomed. (#3873)
Fix cropped images not exporting properly. (#3837)
Fix spacebar and middle mouse button panning. (#3791) (#3792)
Fix cursor and shapes wiggling when following someone's viewport. (#3695)
Fix cross-browser focus management issues. (#3718)
Fix imports in Astro. (#3742)
Fix copy/paste for patterned shapes as SVG/PNG. (#3708)
Fix RTL text layout for SVG exports. (#3680)
Fix clicking on minimap sometimes not changing viewport. (#3617)

View release on GitHub

Patch releases

v2.2.1

Improve documentation and make ArrowBindingUtil public. (#3958)
Add editor.getSnapshot() and editor.loadSnapshot() methods. (#3958)
Fix CSS styling for bookmark elements. (#3958)

View release on GitHub

v2.2.2

Fix text measurement breaking when Tldraw was used with React strict mode. (#4004)

View release on GitHub

v2.2.3

Fix copy/paste functionality in Firefox 127+. (#4006)

View release on GitHub

v2.2.4

Fix copy/paste functionality for older versions of Firefox. (#4011)

View release on GitHub