• When creating elbow arrows, make sure we show the indicator for the target shape on hover.

• Change a slideshow example title to have slightly clearer wording #6119 (@TodePond)
• Fix redirect for shapes/tools examples category #6122 (@TodePond)
• Fix two issues with examples refresh #6118 (@TodePond)

• tldraw
  • always show elbow arrow outline #6124 (@SomeHats)

• alex (@SomeHats)
• Lu Wilson (@TodePond)

The big new feature in this months release is Elbow Arrows! These connectors supplement our existing arrow shape and are well suited to more technical diagramming type use-cases. We’re also been continuing to work on accessibility in tldraw, and there are plenty of other performance improvements too.

The arrow shape now supports elbow arrows! Instead of a single straight line or arc, these arrows get from A to B in a series straight lines joined at right angles. Access the new arrow type by selecting the arrow tool, and choosing the new option under the "Line" style.

We’re continuing to work on accessibility in this release, as we make progress towards WCAG compliance.

• You can now focus the style panel with the ⌘⏎ keyboard shortcut. (#5827)
• More icons and handles in the UI now have labels. (#6001)
• ⌘⇧↓ and ⌘⇧↑ moves the selection in and out of container shapes, like frames and groups. (#5973)
• You can now tab into embed shapes. (#5958)
• The toolbars throughout tldraw are now keyboard navigable. (#5872)
• The shortcuts for rich text editing are shown in the keyboard shortcuts help menu. (#5912)

• ShapeUtil.canEditInReadOnly has been renamed to ShapeUtil.canEditInReadonly - note the case-change on “only”. (#6019)

• When editing the link on a shape, link text is now auto-selected for faster editing. (#6072)
• Pasted text and embeds are now snapped to the grid if it’s enabled. (#6020)
• Figma embed now also work with selection links. (#6025)
• When editing an arrow label, we now block off part of the arrow to show where your label will appear. (#6029)
• Exports of single frames now have the frame background color included in the export. (#5993)
• Standardised gradient and hover effects for open submenu items are standardised across the UI. (#5974)
• Frames can now be resized to fit their contents by double-clicking their edges. (#5967)

• The text measurement API now accepts arbitrary styles to be applied to the text being measured. (#6014)
• A new Overlays component lets you add overlays on top of the canvas that still follow the camera. (#5952)
• RichTextLabel now accepts a hasCustomTabBehavior prop to disable our default tabbing logic where needed. (#5908)

• Improve performance of a programatically rotating shape when it is selected (#6023)
• Dragging many shapes at once is now much faster. (#5821)
• Errors in tldraw no longer prompt users to open an issue on GitHub, as they were getting confused between tldraw and products that use the SDK. (#5947)
• License keys now support VS Code extensions. (#5940)

• Flattened shapes no longer include an opaque background color. (#6043)
• Screenreader announcements are now only triggered in response to user actions. (#6041)
• The hand tool no longer takes pan speed into account, so it’s consistent with middle-mouse/spacebar panning. (#6024)
• Empty lines and list in text now render consistently. (#6013)
• The escape key now correctly exits the laser tool. (#6015)
• Offscreen shapes are now selected correctly while brushing. (#6004)
• ShapeUtil.getGeometry uses shape.meta as part of its cache key, instead of just shape.props. (#5988)
• Toolbar buttons reflect their active states correctly. (#5981)
• The control key gets released properly when wheeling. (#5983)
• Remove jitter from arrows & lines as their size changes in some browsers. (#5975)
• Long-pressing the enter key no longer enters edit mode. (#5957)
• Partially bound arrows don’t flicker when you rotate them. (#5951)
• editor.getSelectedShapes no longer causes re-evaluations unless it actually changed. (#5928)
• Chains of viewport followers now work as expected. (#5924)

• @budatl
• alex (@SomeHats)
• Ante Sepic (@OriginalEXE)
• David Sheldrick (@ds300)
• Lu Wilson (@TodePond)
• Mime Čuvalo (@mimecuvalo)
• Mitja Bezenšek (@MitjaBezensek)
• Steve Ruiz (@steveruizok)
• Trygve Aaberge (@trygve-aaberge-adsk)
• Younsang Na (@nayounsang)

• Move license key docs to docs site (#5919) #5943 (@TodePond)
• @tldraw/editor
  • [sdk hotfix] restore dpr constrained shape dimensions #6034 (@SomeHats @ds300)

• alex (@SomeHats)
• David Sheldrick (@ds300)
• Lu Wilson (@TodePond)

• Fix an issue in 3.12 that caused text shapes not to be included in group shape geometries

• @tldraw/editor, tldraw
  • Fix group bounds containing text shapes (#5909) #5911 (@SomeHats)

• alex (@SomeHats)

• Fix an issue in 3.12 that caused text shapes not to be included in group shape geometries

• @tldraw/editor, tldraw
  • Fix group bounds containing text shapes (#5909) #5911 (@SomeHats)

• alex (@SomeHats)

v3.12.0 of the tldraw SDK includes several bug fixes and API improvements. The main feature development focus was on accessibility, building on initial work in v3.11.0 which added a focus ring.

• You can now move your selection between shapes using the keyboard (using Tab and Cmd/Ctrl+Arrow) (#5761)
• Screen reader support for tool changes (#5634)
• Screen reader support for shape selection changes (#5773)
• Shapes can now be resized using the keyboard (using Cmd/Ctrl+Alt+Shift with the +/- keys) (#5826)
• More of our UI elements have the correct role applied, and use the correct semantic html5 tags (#5847)

Accessibility is something we’ve been researching internally for a while now, investing in some R&D projects to see what’s possible on a 2D canvas. We’re continuing to mature our processes around accessibility with an eye on achieving WCAG in the near future.

• Frames can now have color. Set the showColors option on the FrameShapeUtil class to display colorful borders and labels for frames. (#5283)

  import { FrameShapeUtil, Tldraw } from 'tldraw'
  import 'tldraw/tldraw.css'
  
  const shapeUtils = [FrameShapeUtil.configure({ showColors: true })]
  
  export default function App() {
  	return (
  		<div className="tldraw__editor">
  			<Tldraw shapeUtils={shapeUtils}></Tldraw>
  		</div>
  	)
  }

• There’s a new getShapeVisibility prop to replace isShapeHidden, which is now deprecated. getShapeVisibility allows a child of a hidden parent to override its parent and become visible. See the Layer Panel Example. (#5762)

• The Geometry2d class has a couple of new helper methods for calculating intersection points (intersectLineSegment and intersectCircle), a new helper method for applying a transformation matrix (transform), and new filtering options to allow excluding certain parts of geometry from calculations. (#5754)

• We now individually export two of our default Tiptap extensions (for rich text) (#5874)

  • KeyboardShiftEnterTweakExtension which inserts a normal line break when pressing shift+enter (tldraw doesn’t support soft breaks).
  • TextDirection which ensures the text directionality is saved and reinstated correctly.

• The syntax for defining keyboard shortcuts is now more intuitive (#5605)
  • e.g. '?!l’ becomes 'alt+shift+l' and '$s' becomes 'ctrl+s,cmd+s'
  • See https://tldraw.dev/reference/tldraw/TLUiToolItem#kbd
  • The old syntax is still supported for now, but may be deprecated in the future.
• Store.mergeRemoteChanges is now atomic, and side effects are triggered in the correct scopes. (#5801)
• Drawing is now smoother on slower CPUs by using getCoalescedEvents. (#5898)
• We now allow overriding the asset urls for the icons used by the Embed shape to be null/empty in cases where the Embed shape is not needed. This prevents tldraw downloading a handful of icon assets that would never be used. (#5736)
• YouTube embeds now support the t/start/loop parameters. (#5726)

• SVGs can now be pasted in Firefox. (#5789)
• Text exports from pages that include TailwindCSS no longer have unexpected borders. (#5792)
• Pasting images now triggers just one ‘create’ effect per image shape, before it would trigger a ‘create’ and then immediately an ‘update’. (#5800)
• Pasting shapes from Miro no longer crashes tldraw. (#5790)
• Setting zoomSpeed in camera options no longer breaks zooming on safari trackpads and multitouch pinch to zoom. (#5771)
• Fix a minor style issue in the PeopleMenu component. (#5753)
• Resolve some performance regressions related to rich text. (#5743) (#5735) (#5734)
• Group2D.getSvgPathData() now sets the starting points of its children correctly. (#5580)
• Resolve a performance regression related to drawing on an iPad (#5888)
• Prevent a crash when trying to render UI for tools that have been removed (#5849)

No breaking changes!

• @budatl
• alex (@SomeHats)
• David Sheldrick (@ds300)
• Fabian Iwand (@mootari)
• Lorenzo Lewis (@lorenzolewis)
• Lu Wilson (@TodePond)
• Mime Čuvalo (@mimecuvalo)
• Mitja Bezenšek (@MitjaBezensek)
• Slava Khanilo (@khanilov)
• Steve Ruiz (@steveruizok)
• Trivikram Kamat (@trivikr)
• Trygve Aaberge (@trygve-aaberge-adsk)

• Fix the zoomSpeed setting not being correctly applied to pinch gestures
• Fix unexpected borders showing in exports from pages that use tailwindcss

• Don't include json files in llms.txt outputs #5763 (@TodePond)
• Hotfix llms.txt (#5688) #5752 (@TodePond)
• @tldraw/editor, tldraw
  • Alex/3.11.1 #5811 (@SomeHats)

• alex (@SomeHats)
• Lu Wilson (@TodePond)

Welcome to the 3.11.0 release of tldraw. This release follows up our 3.10 release to mainly address rich text issues. We had fairly smooth release of our new transition to rich text as a first-class primitive in tldraw in general. Thanks to everyone for their continued feedback!

• Added a new minimum zoom step at 5% (#5584)
• Added new keyboard shortcuts for zoom in or out towards your cursor (Shift +, Shift -) (#5584)
• Style panel: be able to hit Enter to continue editing after selection (#5705)
• a11y: focus ring (#5401)
• Security: provide a way to pass through nonce to the editor (#5607)
• Improved performance related to rich text when there are a lot of shapes on the board. (#5658)
• Cleanup assets from the local indexedDB that are proactively deleted. (#5628)
• Allow embedding other multiplayer routes and also tldraw app routes (#5326)
• Improved performance on large projects when hiding / showing shape indicators. (#5654)
• Added hideAll and showAll props to the ShapeIndicators component props (#5654)
• Added keyboard shortcuts (option + arrows) for navigating between pages. (#5654)
• Adjusts distance for stackShapes. (#5656)
• Adds support for satellite mode in Google Map embeds (#5630)
• 'New user' -> 'Guest user' (#5614)
  • BREAKING CHANGE: editor.user.getName() no longer returns 'New user' if the user has no name set. Instead it returns the empty string ''.
  • BREAKING CHANGE: defaultUserPreferences.name is no longer the string 'New user', it is now the empty string ''

• Add RichTextSVG to the exports. #5700

• Fix issue with rich text numbered lists escaping geometry bounds (#5709)
• Fix developing with StrictMode + React 19 when editing text. (#5689)
• Fix issue with exports embedding Inter and having excessive styling. (#5676)
• Fix a bug where textOptions was missing on <TldrawImage /> (#5649)
• Fix labels for screen readers on toolbar buttons. Fix missing 'heart' string. (#5632)
• Fix missing i18n strings for latest rich text items #5704
• Upgrade Yarn to 4.7 #5687

• Fix Bun server image uploads (#5627)
• Remove yarn.lock files (was keeping tldraw versions old) #5690
• Fix Inter font on some of our templates. #5626

• alex (@SomeHats)
• David Sheldrick (@ds300)
• Jeff Astor (@Jastor11)
• Lu Wilson (@TodePond)
• Mime Čuvalo (@mimecuvalo)
• Mitja Bezenšek (@MitjaBezensek)
• Steve Ruiz (@steveruizok)

• Fix issue with exports embedding Inter and having excessive styling.

• docs: fix up dismissable content #5668 (@mimecuvalo)
• Hotfix: Track Enter key to accept search query (#5625) #5666 (@TodePond)
• [Hotfix] dismissibles #5659 (@MitjaBezensek @steveruizok)

• @tldraw/editor, tldraw
  • exports: fix Inter being embedded; reduce excessive styling #5676 (@mimecuvalo @huppy-bot[bot])

• @huppy-bot[bot]
• Lu Wilson (@TodePond)
• Mime Čuvalo (@mimecuvalo)
• Mitja Bezenšek (@MitjaBezensek)
• Steve Ruiz (@steveruizok)

• Fix a bug where textOptions was missing on <TldrawImage />

• Add a dot (test new docs deployment thing) #5641 (@ds300)
• docs: fix sorting for release history #5617 (@mimecuvalo)

• tldraw
  • rich text: add textOptions to <TldrawImage /> #5649 (@mimecuvalo)

• David Sheldrick (@ds300)
• Mime Čuvalo (@mimecuvalo)