tldraw Release Notes

Welcome to tldraw v4.2.0!

This is a minor maintenance release that includes many bug fixes and small API additions, along with a major version bump of our TipTap rich text editor.

TipTap v3 (#5717)

We've upgraded TipTap from v2 to v3. If you've done any customization to our standard TipTap kit, please refer to TipTap's Guide How to upgrade Tiptap v2 to v3 as to any breaking changes you might experience from a custom homebrew of the rich text editor in tldraw.

API Changes

• Add Editor.setTool/Editor.removeTool for dynamically altering the editor's tool state chart. (#6909) (#7134)
• Allow using custom socket implementations with useSync via a new connect option (#6859) (thanks to @Digital39999 for help on this one)
• Support store queries on nested properties, e.g. props (#6981)
• Add createBookmarkFromUrl helper function for creating bookmark shapes more easily. (#6894)
• Allow handles to specify a custom reference point for shift-modifier angle snapping (#6987) (contributed by @naaa760)
• Add a 'secret' lined-fill style similar to the full-fill style but with visible outlines. Users can select it by pressing Option+Shift+F. (#7034)
• Add option to pass callback to onInteractionEnd (#6919)
• Add allowReferrer option to window opening functions (#7004)
• Remove broken/defunct Excalidraw embed definition. Existing Excalidraw embed shapes will remain but render as bookmarks. (#6897)

Improvements

• Use window.prompt for renaming frames on mobile (#6838)
• Add string append optimization to sync protocol (#7007) (contributed by @quasor)

Bug Fixes

• Fix Replit embed URL handling (#6892)
• Fix accessibility issue that caused a misleading warning in the console (#6904)
• Fix convert-to-bookmark action (#6894)
• Fix pointer handling for dropdown menus in InFrontOfTheCanvas (#7021)
• Fixed a bug with iOS image uploads on Safari (#7037)
• Ignore alt+tab on Windows to avoid conflicting with the window manager (#7005)
• Fix text focus issue (#7043)
• Allow using TldrawEditor without needing TldrawUiContextProvider (#7053)
• Fix clipboard functionality for cross-realm apps (#7026)
• Fix broken ink on iOS by disabling coalesced events (#6917)
• Fix dragging behavior when menu is open (#6918)

Generated from commits between v4.1.1 and v4.1.2

Bug Fixes

• Move InFrontOfTheCanvas back out (#7021)

  In 4.0 we moved the InFrontOfTheCanvas component to be a child of the .tl-canvas element, to help constrain the former's size. Unfortunately this broke some subtle interactions involving menus and scrolling, so we have reverted the change. From now on, if you need to constrain the size to match custom styling applied to the .tl-canvas element, you can apply the same styling to the .tl-canvas__in-front element.

tldraw v4.1.0

Welcome to version 4.1.0 of tldraw! This is a maintenance release including a new starter kit, a few minor API additions, and a handful of improvements and bug fixes.

Shader starter kit (#6847)

We're excited to introduce the Shader Starter Kit – a new template that demonstrates how to integrate WebGL shaders with tldraw to create dynamic, interactive backgrounds that respond to canvas interactions. Try it out and read the docs here.

Kapture.2025-10-03.at.18.09.06.mp4

What's included

The starter kit comes with a reusable WebGLManager base class and four complete shader examples to get you started:

• Fluid Simulation - Real-time Navier-Stokes fluid dynamics that respond to shape movements
• Rainbow - Animated gradient effects with time-based animations
• Shadows - Dynamic shadow casting from shapes using raymarching and signed distance fields
• Minimal - A bare-bones template for starting your own shader projects

Each example includes configurable parameters with a built-in UI panel, localStorage persistence, and full TypeScript support.

Getting started

Create a new project with the shader starter kit using:

npm create tldraw@latest

Then select "Shader" from the template options. You can also explore the template directly in the repository: github.com/tldraw/tldraw/tree/main/templates/shader

API Changes

• Allow embed types to opt-out of embed-on-paste behavior (#6819) (#6874)
  • Adds the embedOnPaste option to EmbedDefinition to configure whether embeds are paste-able. Opting out means that pasting an embeddable URL will insert a bookmark shape instead of the embed shape.
• Omit arrow and lines from the minimap for clearer navigation (#6327)
  • Adds hideInMinimap option to ShapeUtil to optionally hide shapes from the minimap.
• Add independent x and y handle snapping (#6883)
  • Adds a snapType?: 'point' | 'align' property to the TLHandle class. Deprecates the canSnap property.
• Expose Editor#getShapePageBounds method and isRecordsDiffEmpty helper function(#6871)
  • Adds localStorageAtom to @tldraw/state. This is an atom backed by localStorage with cross-tab syncing (#6876)
• Adds inline version of style picker buttons: StylePanelButtonPickerInline, StylePanelDoubleDropdownPickerInline, and StylePanelDropdownPickerInline. Use these components inside of TldrawUiToolbar components where needed. (#6920)

Improvements

• Make bookmark titles clickable (#6326)
• Improve top bar rendering on mobile (#6895)
  • Reduces the number of UI elements that are rendered on mobile out of the box.
• Allow using Numpad Enter trigger edit mode on shapes. (#6830)
• Consolidate preferences menu groups (#6802)

Bug Fixes

• Fix accessibility shortcut typo (#6811)
• Reinstate the focus mode action which was deleted by accident (#6812)
• Fix arrow rendering edge case (#6799)
• Fix a bug that allow opening a empty window on a tag click (#6817)
• Fix missing translation key. (#6826)
• Fix shape index management race condition. (#6884)
• Fixed an edge case bug for shapes that have zero geometry vertices (#6885)
• Fixed a bug where the style panel buttons would overflow at certain browser zoom levels (#6920)