The tldraw SDK allows React developers to integrate a collaborative whiteboard into their applications or create custom canvas-based experiences. It features high performance, real-time collaboration, media integration, and extensive customization options. The SDK is designed for ease of use, with components that function as React elements, and supports both light and dark modes across modern browsers and devices.
tldraw
for React developers
Use the tldraw SDK to add a collaborative whiteboard to your product or use its components, runtime APIs, services to build your own canvas-based experiences on the web.
Tldraw UI
Features
Made for developers
We've designed the tldraw SDK to be a solid foundation for developers: built for the web, packed with table-stakes features, and designed for extensibility.
React canvas
Everything on the tldraw canvas is its own React component. If you can do it on the web, you can now do it on the canvas too.
React canvas
High performance
Create and edit thousands of objects. We've tuned performance for desktop, tablets, and mobile devices.
High performance
Real-time collaborative
Create shared experiences with real-time collaboration, live cursors, viewport following and cursor chat. Go live with tldraw sync or bring your own backend.
Media and more
Drop in images, videos, and even other websites to add them to the canvas. Paste URLs to create interactive bookmarks. Export images and data.
Customization
Create your own custom shapes, tools, and user interface. Use the runtime Editor API to drive the canvas.
details
Beautiful software
Carefully considered details that turn table-stakes features into best-in-class user experience.
Perfect ink
Create beautiful, pressure-sensitive freehand lines with the pen tool, powered by our custom algorithm for virtual ink.
Perfect arrows
Linking lines never looked so good. Customize arrowheads and create beautiful curves between shapes, notes, and more.
Dark Mode
Switch between full light and dark mode themes that effect menus, shapes, and even image exports.
Works everywhere
High performance in all modern browsers and on desktop, tablet, and mobile devices. Quality constantly maintained.
show me code
Installation
Install the tldraw package, import the styles, and render the component in your React app.
npm install tldrawimport { Tldraw } from 'tldraw'
import 'tldraw/tldraw.css'
export default function App() {
return <Tldraw />
}