Creately
Diagramming & visual collaboration for flowcharts, org charts, and whiteboards
tldraw
React library for infinite canvas whiteboard experiences
tldraw provides a powerful React SDK to build infinite‑canvas whiteboards, supporting real‑time collaboration, rich drawing tools, and seamless integration with web apps.
Overview
Overview
tldraw is a React‑based SDK that lets developers embed an infinite‑canvas whiteboard directly into web applications. The component handles zooming, panning, and high‑performance rendering of vector shapes, making it suitable for anything from quick sketches to complex diagrams.
Getting Started
Installation is a single npm command and the library ships with TypeScript types and a CSS bundle. After importing Tldraw and its stylesheet, the canvas can be placed anywhere in the UI, and developers can hook into events to add custom tools or integrate a real‑time sync layer.
Who Uses It
tldraw powers the public whiteboard at tldraw.com and is used by teams building collaborative design tools, education platforms, and SaaS dashboards. With an active community, extensive documentation, and a permissive license, it offers a solid foundation for any visual‑collaboration product.
Highlights
Infinite canvas with smooth zoom and pan
Ready‑to‑use React component
Real‑time multiplayer synchronization support
Extensible drawing toolkit and custom tool API
Pros
- High performance vector rendering
- Simple npm installation and TypeScript support
- Active community and comprehensive docs
- Flexible API for customization
Considerations
- Tied to the React ecosystem
- Requires external backend for real‑time sync
- Limited out‑of‑the‑box UI theming
- Advanced canvas concepts may have a learning curve
Managed products teams compare with
When teams consider tldraw, these hosted platforms usually appear on the same shortlist.
Looking for a hosted option? These are the services engineering teams benchmark against before choosing open source.
Fit guide
Great for
- Developers building collaborative whiteboard applications
- Teams needing an embeddable sketching component in React
- SaaS platforms that want visual brainstorming features
- Educational tools requiring interactive drawing surfaces
Not ideal when
- Projects not using React
- Simple static diagrams without interactivity
- Teams looking for a fully hosted backend solution
- Low‑bandwidth environments needing minimal JavaScript payload
How teams use it
Real‑time brainstorming session
Participants draw, move, and annotate on a shared infinite canvas, with changes instantly synced across all users.
Interactive lesson planning tool
Teachers create lesson maps with diagrams and notes, saved and revisited across sessions for dynamic classroom preparation.
Design sprint mockups
Product teams sketch wireframes and flowcharts collaboratively, iterating without leaving the browser.
Embedded diagram editor in SaaS dashboard
Users embed a tldraw canvas to visualize data relationships directly within the application.
Tech snapshot
TypeScript92%
CSS3%
MDX2%
HTML2%
JavaScript1%
PLpgSQL1%
Frequently asked questions
How do I install tldraw?
Run `npm i tldraw`, then import the `Tldraw` component and its CSS file into your React project.
Does tldraw include a backend for collaboration?
The library provides sync primitives, but you need to connect it to your own real‑time backend (e.g., WebSocket, Yjs).
Which frameworks are supported?
tldraw is built for React and works with any React‑based application.
Can I customize the drawing tools?
Yes, the SDK exposes APIs to add, remove, or modify tools and UI elements.
Is there TypeScript support?
The package is written in TypeScript and includes full type definitions out of the box.
Project at a glance
Active- Stars
- 44,721
- Watchers
- 44,721
- Forks
- 2,936
Repo age4 years old
Last commit3 hours ago
Primary languageTypeScript
Last synced 2 hours ago