Key features
Key features
Key features
Key features
Freehand drawing
Create fluid drawings with pressure-sensitive input and intelligent stroke algorithms, perfect for sketching tools, annotation systems, and creative applications.
Freehand drawing
Create fluid drawings with pressure-sensitive input and intelligent stroke algorithms, perfect for sketching tools, annotation systems, and creative applications.
Freehand drawing
Create fluid drawings with pressure-sensitive input and intelligent stroke algorithms, perfect for sketching tools, annotation systems, and creative applications.
Freehand drawing
Create fluid drawings with pressure-sensitive input and intelligent stroke algorithms, perfect for sketching tools, annotation systems, and creative applications.
Geometric shapes
Enjoy a complete shape library that includes rectangles, ellipses, polygons, and hearts, each available in four stroke styles: solid, dashed, dotted, and hand-drawn.
Geometric shapes
Enjoy a complete shape library that includes rectangles, ellipses, polygons, and hearts, each available in four stroke styles: solid, dashed, dotted, and hand-drawn.
Geometric shapes
Enjoy a complete shape library that includes rectangles, ellipses, polygons, and hearts, each available in four stroke styles: solid, dashed, dotted, and hand-drawn.
Geometric shapes
Enjoy a complete shape library that includes rectangles, ellipses, polygons, and hearts, each available in four stroke styles: solid, dashed, dotted, and hand-drawn.
Perfect arrows
Draw connections with arc and elbow arrows that snap into clean orthogonal paths, using geometric routing to create optimal links between connection points.
Perfect arrows
Draw connections with arc and elbow arrows that snap into clean orthogonal paths, using geometric routing to create optimal links between connection points.
Perfect arrows
Draw connections with arc and elbow arrows that snap into clean orthogonal paths, using geometric routing to create optimal links between connection points.
Perfect arrows
Draw connections with arc and elbow arrows that snap into clean orthogonal paths, using geometric routing to create optimal links between connection points.
Rich text editing
Build powerful text editing with TipTap integration, auto-sizing modes, and extensible formatting. Ideal for document editors, note-taking tools, and annotation systems.
Rich text editing
Build powerful text editing with TipTap integration, auto-sizing modes, and extensible formatting. Ideal for document editors, note-taking tools, and annotation systems.
Rich text editing
Build powerful text editing with TipTap integration, auto-sizing modes, and extensible formatting. Ideal for document editors, note-taking tools, and annotation systems.
Rich text editing
Build powerful text editing with TipTap integration, auto-sizing modes, and extensible formatting. Ideal for document editors, note-taking tools, and annotation systems.
Precise eraser tool
An eraser that distinguishes between click and drag, respects locked content, and previews exactly what will be deleted.
Precise eraser tool
An eraser that distinguishes between click and drag, respects locked content, and previews exactly what will be deleted.
Precise eraser tool
An eraser that distinguishes between click and drag, respects locked content, and previews exactly what will be deleted.
Precise eraser tool
An eraser that distinguishes between click and drag, respects locked content, and previews exactly what will be deleted.
Built-in embed library
Embed 19 popular platforms easily, with secure, responsive, pre-configured integrations that work out of the box.
Built-in embed library
Embed 19 popular platforms easily, with secure, responsive, pre-configured integrations that work out of the box.
Built-in embed library
Embed 19 popular platforms easily, with secure, responsive, pre-configured integrations that work out of the box.
Built-in embed library
Embed 19 popular platforms easily, with secure, responsive, pre-configured integrations that work out of the box.
Navigation controls
Develop pan, zoom, and viewport tools with gesture support, smooth animations, and edge-scrolling for uninterrupted canvas exploration.
Navigation controls
Develop pan, zoom, and viewport tools with gesture support, smooth animations, and edge-scrolling for uninterrupted canvas exploration.
Navigation controls
Develop pan, zoom, and viewport tools with gesture support, smooth animations, and edge-scrolling for uninterrupted canvas exploration.
Navigation controls
Develop pan, zoom, and viewport tools with gesture support, smooth animations, and edge-scrolling for uninterrupted canvas exploration.
Natural drawing, out of the box
Bring natural freehand drawing, shapes, and canvas interactions to your app.
Natural drawing, out of the box
Bring natural freehand drawing, shapes, and canvas interactions to your app.
Natural drawing, out of the box
Bring natural freehand drawing, shapes, and canvas interactions to your app.
Natural drawing, out of the box
Bring natural freehand drawing, shapes, and canvas interactions to your app.
Engineering details
Engineering details
Engineering details
Engineering details
Freehand drawing with digital ink
The freehand tool delivers precise, natural digital ink with seamless transitions between freehand and straight lines. Our state machine enables perfect lines, angle snapping, and fluid control, while a multi-stage pipeline ensures smooth input, pressure-responsive sizing, and adaptive corner detection. With pressure sensitivity, palm rejection, zoom-adaptive precision, and advanced stroke generation, it provides responsive, high-performance drawing across devices.
Freehand drawing with digital ink
The freehand tool delivers precise, natural digital ink with seamless transitions between freehand and straight lines. Our state machine enables perfect lines, angle snapping, and fluid control, while a multi-stage pipeline ensures smooth input, pressure-responsive sizing, and adaptive corner detection. With pressure sensitivity, palm rejection, zoom-adaptive precision, and advanced stroke generation, it provides responsive, high-performance drawing across devices.
Freehand drawing with digital ink
The freehand tool delivers precise, natural digital ink with seamless transitions between freehand and straight lines. Our state machine enables perfect lines, angle snapping, and fluid control, while a multi-stage pipeline ensures smooth input, pressure-responsive sizing, and adaptive corner detection. With pressure sensitivity, palm rejection, zoom-adaptive precision, and advanced stroke generation, it provides responsive, high-performance drawing across devices.
Freehand drawing with digital ink
The freehand tool delivers precise, natural digital ink with seamless transitions between freehand and straight lines. Our state machine enables perfect lines, angle snapping, and fluid control, while a multi-stage pipeline ensures smooth input, pressure-responsive sizing, and adaptive corner detection. With pressure sensitivity, palm rejection, zoom-adaptive precision, and advanced stroke generation, it provides responsive, high-performance drawing across devices.
Sticky notes, deceptively simple
What feels like simple text editing is powered by clone handles, rotation-aware positioning, and smart “sticky pit” snapping. Behind the scenes, the system calculates pit positions, adapts keyboard movement, adjusts fonts precisely, and even adds natural shadows with seeded randomization. Text editing feels effortless while complex logic runs invisibly in the background.
Sticky notes, deceptively simple
What feels like simple text editing is powered by clone handles, rotation-aware positioning, and smart “sticky pit” snapping. Behind the scenes, the system calculates pit positions, adapts keyboard movement, adjusts fonts precisely, and even adds natural shadows with seeded randomization. Text editing feels effortless while complex logic runs invisibly in the background.
Sticky notes, deceptively simple
What feels like simple text editing is powered by clone handles, rotation-aware positioning, and smart “sticky pit” snapping. Behind the scenes, the system calculates pit positions, adapts keyboard movement, adjusts fonts precisely, and even adds natural shadows with seeded randomization. Text editing feels effortless while complex logic runs invisibly in the background.
Sticky notes, deceptively simple
What feels like simple text editing is powered by clone handles, rotation-aware positioning, and smart “sticky pit” snapping. Behind the scenes, the system calculates pit positions, adapts keyboard movement, adjusts fonts precisely, and even adds natural shadows with seeded randomization. Text editing feels effortless while complex logic runs invisibly in the background.
Cross-browser asset management
To ensure reliability in supporting images, videos, and embeds, the system uses level-of-detail resolution with power-of-2 zoom steps, hash-based asset deduplication, and a local-to-remote upload flow. Exports preserve PNG metadata, maintain SVG foreignObject compatibility, and respect browser canvas size limits. The asset pipeline also handles animated GIFs, video codec fallbacks, and secure iframe sandboxing for more than 30 embed providers.
Cross-browser asset management
To ensure reliability in supporting images, videos, and embeds, the system uses level-of-detail resolution with power-of-2 zoom steps, hash-based asset deduplication, and a local-to-remote upload flow. Exports preserve PNG metadata, maintain SVG foreignObject compatibility, and respect browser canvas size limits. The asset pipeline also handles animated GIFs, video codec fallbacks, and secure iframe sandboxing for more than 30 embed providers.
Cross-browser asset management
To ensure reliability in supporting images, videos, and embeds, the system uses level-of-detail resolution with power-of-2 zoom steps, hash-based asset deduplication, and a local-to-remote upload flow. Exports preserve PNG metadata, maintain SVG foreignObject compatibility, and respect browser canvas size limits. The asset pipeline also handles animated GIFs, video codec fallbacks, and secure iframe sandboxing for more than 30 embed providers.
Cross-browser asset management
To ensure reliability in supporting images, videos, and embeds, the system uses level-of-detail resolution with power-of-2 zoom steps, hash-based asset deduplication, and a local-to-remote upload flow. Exports preserve PNG metadata, maintain SVG foreignObject compatibility, and respect browser canvas size limits. The asset pipeline also handles animated GIFs, video codec fallbacks, and secure iframe sandboxing for more than 30 embed providers.
Custom shape extensibility
The shape system extends beyond built-ins to support 3D content, audio players, and interactive components through the same ShapeUtil interface. Custom shapes automatically gain selection handles, resize logic, binding points, and export support. Geometry, hit testing, and rendering optimizations are all handled by the architecture. This lets developers focus on unique behaviors while tldraw manages transforms, performance, and state integration.
Custom shape extensibility
The shape system extends beyond built-ins to support 3D content, audio players, and interactive components through the same ShapeUtil interface. Custom shapes automatically gain selection handles, resize logic, binding points, and export support. Geometry, hit testing, and rendering optimizations are all handled by the architecture. This lets developers focus on unique behaviors while tldraw manages transforms, performance, and state integration.
Custom shape extensibility
The shape system extends beyond built-ins to support 3D content, audio players, and interactive components through the same ShapeUtil interface. Custom shapes automatically gain selection handles, resize logic, binding points, and export support. Geometry, hit testing, and rendering optimizations are all handled by the architecture. This lets developers focus on unique behaviors while tldraw manages transforms, performance, and state integration.
Custom shape extensibility
The shape system extends beyond built-ins to support 3D content, audio players, and interactive components through the same ShapeUtil interface. Custom shapes automatically gain selection handles, resize logic, binding points, and export support. Geometry, hit testing, and rendering optimizations are all handled by the architecture. This lets developers focus on unique behaviors while tldraw manages transforms, performance, and state integration.
Chat starter kit
Integrate tldraw's canvas into a chat application to let the user sketch, annotate and add markup to any chat message before sending it off to an AI model or person.
Agent starter kit
Give your AI agents visual superpowers. Allow them to read drawings, generate diagrams, and interact with canvas elements just like human users. You handle the AI integration, tldraw handles the complex canvas interactions, shape recognition, and visual rendering.
Chat starter kit
Integrate tldraw's canvas into a chat application to let the user sketch, annotate and add markup to any chat message before sending it off to an AI model or person.
Agent starter kit
Give your AI agents visual superpowers. Allow them to read drawings, generate diagrams, and interact with canvas elements just like human users. You handle the AI integration, tldraw handles the complex canvas interactions, shape recognition, and visual rendering.
Examples
Examples
Examples
Examples
© 2025 tldraw