v2.4.0 - Tldraw — ContextQMD

This release introduces our sync engine as a general-use library, new animation options for shapes, support for image flipping, and many bug fixes and developer experience enhancements.

What's new

Sync (#4031)

For the first time, we're releasing our real-time collaboration engine—the one we developed for tldraw.com—as a general library. The SDK still supports any backend for collaboration, but we hope this will be the easiest option for developers. See the new sync package in the repository and the multiplayer-demo example.

Interpolation (#4162)

You can use Editor.animateShapes to animate shapes on the canvas. Previously only position and rotation would animate. Now you can implement ShapeUtil.getInterpolatedProps to describe how your custom shape's other properties should animate.

override getInterpolatedProps(
  startShape: Shape,
  endShape: Shape,
  t: number
): Shape['props'] {
  return {
    ...endShape.props,
    w: lerp(startShape.props.w, endShape.props.w, t),
    h: lerp(startShape.props.h, endShape.props.h, t),
  }
}

Editor.run (#4042)

The new Editor.run method runs a function within additional context. By default, the function runs inside a transaction, meaning all changes settle at once—improving performance and avoiding unnecessary renders. You can also use options to ignore history or ignore locked shapes.

editor.run(
	() => {
		editor.createShapes(myShapes)
		editor.sendToBack(myShapes)
		editor.selectNone()
	},
	{ history: 'ignore' }
)

Assets

As part of our work on sync, we have a new system for handling large assets like images and videos. Provide a TLAssetStore to control how assets are uploaded and retrieved. Use Editor.uploadAsset and Editor.resolveAssetURL in your shapes and tools.

API changes

💥 editor.history.ignore(cb) replaced with editor.run(cb, {history: 'ignore'}).
💥 editor.batch deprecated, replaced with editor.run.
💥 @tldraw/state imports: If you're importing from @tldraw/state directly, the track function and all hooks (e.g. useValue) have moved to @tldraw/state-react. (#4170)
Add DefaultMenuPanel export. (#4193)
Make fileSize property of TLImageAsset and TLVideoAsset optional. (#4206)
Allow passing partial TLEditorSnapshot to TldrawImage and useTLStore. (#4190)
Make EffectScheduler and useStateTracking public. (#4155)
Add setDefaultValue to StyleProp. (#4044)
Add ShapeUtil.getInterpolatedProps. (#4162)
Add Editor.run, replacing Editor.batch. (#4042)

Improvements

Add horizontal and vertical flipping for images. (#4113)
Allow custom tools to decide whether they are affected by shape lock. (#4208)
Serve icons as a single SVG instead of many individual requests. (#4150)
Make paste-at-point behavior based on a user preference. (#4104)
Show toast when uploading an unsupported file type or file that's too large. (#4114)
Show toast when pasting fails due to missing clipboard permissions. (#4117)
Add ShapeIndicators component for custom logic about when to display indicators. (#4083)
Animate shape opacity changes. (#4242)

Bug fixes

Fix font style export to SVG. (#4195)
Fix force flag for camera methods. (#4214)
Show user's color scheme in menu by default. (#4184)
Fix padding for dynamically scaled text shapes. (#4140)
Fix cameraOptions via React causing editor to re-mount. (#4089)
Allow high-res images to be uploaded. (#4198)
Prevent locked shapes from being updated, grouped, or ungrouped programmatically. (#4042)
Fix snapshots prop in createTLStore. (#4233)
Fix grid backgrounds with multiple tldraw instances. (#4132)
Fix inputs staying in place while viewport-following. (#4108)
Fix bookmarks rendering across devices. (#4118)
Fix InFrontOfTheCanvas component stack order. (#4024)
Fix frame headers not stopping edit on focus loss. (#4092)