apps/docs/content/releases/v4.0.0.mdx
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.
A new CLI tool for quickly scaffolding tldraw projects. Run npm create tldraw to initialize projects using templates and starter kits.
Five new MIT-licensed starter kits demonstrate different applications of tldraw's canvas:
Production deployments now require a license key. Development and localhost environments remain exempt. Available licenses include:
Achieves WCAG 2.2 Level AA compliance with an accessibility mode, improved keyboard shortcuts, comprehensive aria-labels, and scrollable menus.
Create shapes by dragging directly from the toolbar, eliminating the click-then-draw workflow.
Shapes can now clip their children, enabling complex visual hierarchies and container-style shapes.
The toolbar supports vertical orientation for alternative layout configurations.
Arrow labels support rich text formatting including bold, italic, and text styling.
--tl- prefix. Update custom CSS: --color-background → --tl-color-background, --space-4 → --tl-space-4. (#6712)Geometry2D.isLabel replaced with excludeFromShapeBounds flag. (#6668)open-url event now uses destinationUrl instead of url. (#6641)richText instead of text property. Data migrates automatically, but direct access to arrow.props.text must update to arrow.props.richText. (#6594)@tldraw/ai module removed. Use the agent starter kit instead.editor.markEventAsHandled() for custom event handling. (#6592)TLSocketRoom via sendCustomMessage() and onCustomMessageReceived. (#6614) (contributed by @mootari)Editor.getShapesAtPoint() with flexible margin options for precise hit testing. (#6724)editor.toImageDataUrl() for generating image data URLs directly from shapes. (#6658)ShapeUtil.isExportBoundsContainer and canCull methods for controlling export behavior and rendering optimization. (#6649)EditorAtom for managing UI state outside React components. (#6687)