a774ac673a
Some checks failed
Deploy analytics worker / Deploy analytics worker to ${{ (github.ref == 'refs/heads/production' && 'production') || (github.ref == 'refs/heads/main' && 'staging') || 'preview' }} (push) Failing after 1s
i18n upload strings / Upload latest strings (push) Failing after 1s
Deploy bemo / Deploy bemo to ${{ (github.ref == 'refs/heads/bemo-production' && 'production') || (github.ref == 'refs/heads/main' && 'staging') || 'preview' }} (push) Failing after 1s
Deploy grafana resources / ${{ github.event_name == 'push' && 'Deploy grafana resources' || 'Validate grafana resources (dry run)' }} (push) Failing after 0s
End to end tests (dotcom) / Check for relevant changes (push) Failing after 0s
End to end tests (examples) / Check for relevant changes (push) Failing after 0s
End to end tests (mermaid readability) / Check for relevant changes (push) Failing after 1s
End to end tests (perf) / Check for relevant changes (push) Failing after 0s
Publish editor extensions / Publish editor extensions (push) Failing after 1s
Publish SDK packages / Remove the publish-packages label (push) Has been skipped
Checks / Tests & checks (push) Has been cancelled
Checks / Build all projects (push) Has been cancelled
Deploy templates / Deploy templates (push) Has been cancelled
End to end tests (dotcom) / End to end tests (dotcom) (push) Has been cancelled
End to end tests (mermaid readability) / End to end tests (mermaid readability) (push) Has been cancelled
End to end tests (perf) / End to end tests (perf) (push) Has been cancelled
Deploy .com / Deploy dotcom to ${{ (github.ref == 'refs/heads/production' && 'production') || (github.ref == 'refs/heads/main' && 'staging') || 'preview' }} (push) Has been cancelled
End to end tests (examples) / End to end tests (examples) (push) Has been cancelled
Publish SDK packages / Publish SDK packages (push) Has been cancelled
Publish SDK packages / Tell user released version (push) Has been cancelled
Publish SDK packages / Publishes code templates to separate repositories (push) Has been cancelled
Publish SDK packages / Deploys the template demos with the new SDK version (push) Has been cancelled
124 lines
6.3 KiB
Plaintext
124 lines
6.3 KiB
Plaintext
---
|
|
title: 'v4.0.0'
|
|
created_at: 9/18/2025
|
|
updated_at: 9/18/2025
|
|
keywords:
|
|
- changelog
|
|
- release
|
|
- v4.0
|
|
- v4.0.0
|
|
- v4.0.1
|
|
- v4.0.2
|
|
- v4.0.3
|
|
- v4.0.4
|
|
- starter-kits
|
|
- cli
|
|
- accessibility
|
|
- licensing
|
|
- rich-text
|
|
status: published
|
|
---
|
|
|
|
This major release introduces new starter kits, a CLI tool, WCAG 2.2 Level AA accessibility compliance, and significant API enhancements for building custom canvas applications.
|
|
|
|
## What's new
|
|
|
|
### npm create tldraw ([#6753](https://github.com/tldraw/tldraw/pull/6753))
|
|
|
|
A new CLI tool for quickly scaffolding tldraw projects. Run `npm create tldraw` to initialize projects using templates and starter kits.
|
|
|
|
### Starter kits
|
|
|
|
Five new MIT-licensed starter kits demonstrate different applications of tldraw's canvas:
|
|
|
|
- **[agent](https://tldraw.dev/starter-kits/agent)** - Cursor-style chatbot interface where conversations occur on the canvas with AI assistance
|
|
- **[workflow](https://tldraw.dev/starter-kits/workflow)** - Node-and-wire visual programming interface for automation workflows and state machines
|
|
- **[branching-chat](https://tldraw.dev/starter-kits/branching-chat)** - Multi-path conversation explorer for managing conversation branches
|
|
- **[chat](https://tldraw.dev/starter-kits/chat)** - Canvas-based image annotation with integrated chatbot
|
|
- **[multiplayer](https://tldraw.dev/starter-kits/multiplayer)** - Collaborative whiteboard foundation built on tldraw sync
|
|
|
|
### Licensing ([#6707](https://github.com/tldraw/tldraw/pull/6707))
|
|
|
|
Production deployments now require a license key. Development and localhost environments remain exempt. Available licenses include:
|
|
|
|
- Free 100-day trial license
|
|
- Commercial license for commercial projects
|
|
- Hobby license for non-commercial use
|
|
|
|
### Accessibility ([#6695](https://github.com/tldraw/tldraw/pull/6695))
|
|
|
|
Achieves WCAG 2.2 Level AA compliance with an accessibility mode, improved keyboard shortcuts, comprehensive aria-labels, and scrollable menus.
|
|
|
|
### Drag from toolbar ([#6681](https://github.com/tldraw/tldraw/pull/6681))
|
|
|
|
Create shapes by dragging directly from the toolbar, eliminating the click-then-draw workflow.
|
|
|
|
### Custom shape clipping ([#6649](https://github.com/tldraw/tldraw/pull/6649))
|
|
|
|
Shapes can now clip their children, enabling complex visual hierarchies and container-style shapes.
|
|
|
|
### Vertical toolbar support ([#6623](https://github.com/tldraw/tldraw/pull/6623))
|
|
|
|
The toolbar supports vertical orientation for alternative layout configurations.
|
|
|
|
### Rich text arrows ([#6594](https://github.com/tldraw/tldraw/pull/6594))
|
|
|
|
Arrow labels support rich text formatting including bold, italic, and text styling.
|
|
|
|
## API changes
|
|
|
|
- 💥 **CSS variables** now start with `--tl-` prefix. Update custom CSS: `--color-background` → `--tl-color-background`, `--space-4` → `--tl-space-4`. ([#6712](https://github.com/tldraw/tldraw/pull/6712))
|
|
- 💥 **`Geometry2D.isLabel`** replaced with `excludeFromShapeBounds` flag. ([#6668](https://github.com/tldraw/tldraw/pull/6668))
|
|
- 💥 **`open-url` event** now uses `destinationUrl` instead of `url`. ([#6641](https://github.com/tldraw/tldraw/pull/6641))
|
|
- 💥 **Arrow shapes** now use `richText` instead of `text` property. Data migrates automatically, but direct access to `arrow.props.text` must update to `arrow.props.richText`. ([#6594](https://github.com/tldraw/tldraw/pull/6594))
|
|
- 💥 **`@tldraw/ai` module** removed. Use the [agent starter kit](https://tldraw.dev/starter-kits/agent) instead.
|
|
- 💥 **Event propagation behavior** changed. Use `editor.markEventAsHandled()` for custom event handling. ([#6592](https://github.com/tldraw/tldraw/pull/6592))
|
|
- 💥 **Style panel** redesigned with legacy picker components removed. ([#6573](https://github.com/tldraw/tldraw/pull/6573))
|
|
- 💥 **Toolbar CSS class names** updated for consistency. ([#6551](https://github.com/tldraw/tldraw/pull/6551))
|
|
- Add custom messages in `TLSocketRoom` via `sendCustomMessage()` and `onCustomMessageReceived`. ([#6614](https://github.com/tldraw/tldraw/pull/6614)) (contributed by [@mootari](https://github.com/mootari))
|
|
- Add `Editor.getShapesAtPoint()` with flexible margin options for precise hit testing. ([#6724](https://github.com/tldraw/tldraw/pull/6724))
|
|
- Add `editor.toImageDataUrl()` for generating image data URLs directly from shapes. ([#6658](https://github.com/tldraw/tldraw/pull/6658))
|
|
- Add `ShapeUtil.isExportBoundsContainer` and `canCull` methods for controlling export behavior and rendering optimization. ([#6649](https://github.com/tldraw/tldraw/pull/6649))
|
|
- Add `EditorAtom` for managing UI state outside React components. ([#6687](https://github.com/tldraw/tldraw/pull/6687))
|
|
- Add enhanced handle drag callbacks with timing events for custom drag interactions. ([#6702](https://github.com/tldraw/tldraw/pull/6702))
|
|
|
|
## Bug fixes
|
|
|
|
- Fix arrow labels being cut off in exports. ([#6783](https://github.com/tldraw/tldraw/pull/6783))
|
|
- Fix PNG physical pixel dimensions parsing. ([#6771](https://github.com/tldraw/tldraw/pull/6771))
|
|
- Fix pointer events on mobile firing inconsistently. ([#6738](https://github.com/tldraw/tldraw/pull/6738))
|
|
- Fix Chrome embed positioning at non-100% zoom levels. ([#6724](https://github.com/tldraw/tldraw/pull/6724))
|
|
- Fix hollow shapes not being properly bound-to by arrows. ([#6705](https://github.com/tldraw/tldraw/pull/6705))
|
|
|
|
[View release on GitHub](https://github.com/tldraw/tldraw/releases/tag/v4.0.0)
|
|
|
|
---
|
|
|
|
## Patch releases
|
|
|
|
### v4.0.1
|
|
|
|
- Fix template exports. ([#6804](https://github.com/tldraw/tldraw/pull/6804))
|
|
- Fix documentation. ([#6805](https://github.com/tldraw/tldraw/pull/6805))
|
|
|
|
[View release on GitHub](https://github.com/tldraw/tldraw/releases/tag/v4.0.1)
|
|
|
|
### v4.0.2
|
|
|
|
- Fix focus mode SDK issue that caused problems when using focus mode in the SDK. ([#6815](https://github.com/tldraw/tldraw/pull/6815))
|
|
|
|
[View release on GitHub](https://github.com/tldraw/tldraw/releases/tag/v4.0.2)
|
|
|
|
### v4.0.3
|
|
|
|
- Add Claude 4.5 Sonnet to agent starter kit. ([#6852](https://github.com/tldraw/tldraw/pull/6852))
|
|
- Ensure templates don't use internal functions. ([#6871](https://github.com/tldraw/tldraw/pull/6871))
|
|
|
|
[View release on GitHub](https://github.com/tldraw/tldraw/releases/tag/v4.0.3)
|
|
|
|
### v4.0.4
|
|
|
|
- Fix shape index jitter for the first shape created, preventing potential index collisions. ([#6884](https://github.com/tldraw/tldraw/pull/6884))
|
|
|
|
[View release on GitHub](https://github.com/tldraw/tldraw/releases/tag/v4.0.4)
|