tldraw Whiteboard Guide

tldraw Whiteboard Guide

Overview

tldraw is an open-source infinite canvas whiteboard SDK with over 46K stars on GitHub. It provides a complete whiteboard experience that can be used standalone or embedded into custom applications. The library offers a polished, intuitive drawing interface with shapes, connectors, text, freehand drawing, and image support, all running in the browser with no backend required for basic use.

For academic researchers, tldraw serves multiple roles. It can function as a collaborative brainstorming tool for research ideation sessions, a diagram creation tool for papers and presentations, a visual note-taking surface during literature reviews, and a framework diagramming tool for conceptual models. Unlike traditional diagramming tools that impose rigid structures, tldraw's freeform canvas encourages the kind of fluid visual thinking that drives research innovation.

The SDK architecture makes tldraw particularly interesting for research tool builders. It can be embedded into lab notebooks, research management platforms, and educational tools. The state management system is extensible, allowing developers to add custom shapes, tools, and behaviors for domain-specific diagramming needs such as circuit diagrams, molecular structures, or experimental workflow visualizations.

Getting Started

Using tldraw Online

The fastest way to use tldraw is through the hosted version at tldraw.com. Create diagrams immediately with no installation, and share them via links.

Self-Hosted Deployment

# Clone and run locally
git clone https://github.com/tldraw/tldraw.git
cd tldraw
npm install
npm run dev

# Access at http://localhost:5420

Embedding in a React Application

# Install the tldraw package
npm install tldraw

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

function ResearchWhiteboard() {