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.

https://github.com/user-attachments/assets/14b02bfb-6730-4d85-a482-a169292eab09

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:

:::bash
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)