Tldraw Has a Free Drawing Library — Embed a Whiteboard in Any React App

#react #drawing #components #opensource

Tldraw is a React component that gives you a fully featured whiteboard in your app.

What You Get for Free

Full whiteboard — draw, type, add shapes, arrows, sticky notes
React component — <Tldraw /> and you're done
Real-time collaboration — Yjs-based multiplayer
Custom shapes — define your own tools and shapes
Persistence — save/load documents as JSON
Export — PNG, SVG, JSON
Dark mode — built-in theme support
Touch & pen — pressure sensitivity, palm rejection
Infinite canvas — zoom, pan, navigate
MIT license — use commercially

Quick Start

npm install tldraw

import { Tldraw } from 'tldraw'
import 'tldraw/tldraw.css'

function App() {
  return <div style={{ width: '100vw', height: '100vh' }}>
    <Tldraw />
  </div>
}

Why Developers Embed It

Building a whiteboard from scratch takes months:

One component — full whiteboard in 3 lines of code
Customizable — add domain-specific shapes and tools
Collaboration — multiplayer out of the box
Production-ready — used by thousands of apps

A product team needed annotation features for their design review tool. Building from scratch was quoted at 2 months. They embedded Tldraw — full whiteboard with collaboration in a single afternoon.