apps/docs/content/releases/v3.0.0.mdx
This release introduces a revised licensing model alongside deep links, enhanced image export, custom embeds, and a new text search API.
The most significant change involves updated licenses permitting use in both commercial and non-commercial projects when displaying a "Made with tldraw" watermark. Users can now purchase Business Licenses to remove the watermark, with details available at tldraw.dev. (#4449, #4517, #4561)
New APIs enable creation of shareable URLs pointing to specific canvas locations, such as particular shapes or pages, with automatic URL updates as users navigate.
// Create a deep link to a specific shape
const url = editor.createDeepLink({
shapeId: 'shape-id',
viewport: 'fit',
})
// The URL updates automatically as you navigate
editor.on('change', () => {
const currentUrl = editor.getCurrentDeepLink()
})
See the deep links guide for more information. (#4498)
Custom shapes now export as images by default through HTML/CSS embedding within SVG files, eliminating the need for developers to implement custom SVG rendering methods.
// Custom shapes automatically export as images
class MyShapeUtil extends ShapeUtil<MyShape> {
// No need to implement toSvg() anymore
component(shape: MyShape) {
return <div className="my-shape"></div>
}
}
Developers can now customize which external websites (YouTube, Google Maps, CodeSandbox, etc.) appear as embeddable content, or add entirely new embed types.
// Add a custom embed type
const customEmbedDef = {
type: 'custom',
title: 'My Custom Embed',
hostnames: ['mysite.com'],
toEmbedUrl: (url: string) => `https://mysite.com/embed/${url}`,
fromEmbedUrl: (url: string) => url.replace('/embed/', '/')
}
<Tldraw embedDefs={[customEmbedDef, ...defaultEmbedDefs]} />
A new getText API provides reliable access to human-readable shape content, facilitating text search implementation within applications.
// Search through all shapes for text content
const searchResults = editor.getCurrentPageShapes().filter((shape) => {
const text = editor.getText(shape.id)
return text?.toLowerCase().includes(searchTerm.toLowerCase())
})
TLRotationSnapshot type removed from the public API. Use editor.getShapePageTransform(shape).rotation() instead.onEditorMount callback in createTLStore renamed to onMount for consistency.Editor.mark() deprecated in favor of Editor.markHistoryStoppingPoint() for clearer intent.TLSvgOptions type renamed to TLImageExportOptions to better reflect its broader use in image export.updateInstanceState({isFocused: true}) now triggers standard focus events consistently. Use editor.focus() for reliable focus behavior.editor.getText(shapeId) method for accessing shape text content.editor.createDeepLink(options) for generating shareable URLs.embedDefs prop to Tldraw component for customizing embed types.