Tldraw Whiteboard GuideSAFE

🔬 A curated collection of 23,000+ agent skills for empirical research across 8 social science disciplines. | 精选 23,000+ AI Agent 技能库,覆盖8大社会科学学科的实证研究。CoPaper.AI 20分钟完成一篇可复现的规范实证论文,并支持用户上传 Skills。-- Maintained by CoPaper.AI from Stanford REAP.

The instruction file, verbatim from the audited commit — this is the text the model reads, and the surface the audit's instruction layer examines. Quoted here so you can judge it without cloning anything.

---
name: tldraw-whiteboard-guide
description: "Guide to tldraw for infinite canvas whiteboarding and diagram creation"
metadata:
  openclaw:
    emoji: "🖊️"
    category: "tools"
    subcategory: "diagram"
    keywords: ["whiteboard", "infinite canvas", "diagram SDK", "collaborative drawing", "research diagrams", "visual thinking"]
    source: "https://github.com/tldraw/tldraw"
---

# 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

```bash
# 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

```bash
# Install the tldraw package
npm install tldraw
```

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

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

## Core Features for Research Work

### Shape Tools

tldraw provides a comprehensive set of shape tools suitable for creating research diagrams:

- **Rectangle** - Process boxes, system components, categories
- **Ellipse** - States, entities, conceptual groupings
- **Diamond** - Decision nodes, conditions
- **Arrow** - Relationships, flows, dependencies, causal links
- **Line** - Connections, separators, timelines
- **Text** - Labels, annotations, descriptions
- **Freehand** - Sketches, handwritten annotations, emphasis marks
- **Note** - Sticky notes for brainstorming and categorization
- **Frame** - Grouping related elements into named sections
- **Star/Heart/Cloud** - Emphasis markers and decorative elements

### Drawing a Research Framework Diagram

A typical research conceptual framework can be constructed using tldraw's shape tools.

```
Example: Conceptual Framework for Mixed-Methods Study

1. Create a Frame labeled "Research Design"
2. Add rectangles for each research phase:
   - "Literature Review" -> "Hypothesis Formation"
   - "Quantitative Study" -> "Statistical Analysis"
   - "Qualitative Study" -> "Thematic Analysis"
   - "Integration" -> "Conclusions"
3. Connect phases with arrows showing sequence and relationships
4. Use color coding:
   - Blue rectangles: quantitative components
   - Green rectangles: qualitative components
   - Purple rectangles: integration points
5. Add text labels for key variables and relationships
6. Use sticky notes for annotations about methods and tools
```

### Collaborative Research Sessions

tldraw supports real-time collaboration when deployed with its sync backend, making it ideal for remote research meetings.

```tsx
import { Tldraw, createTLStore } from 'tldraw';
import { useSync } from '@tldraw/sync';

function CollaborativeWhiteboard({ roomId }) {
  const store = useSync({
    uri: `wss://collaboration-server.lab.internal/connect/${roomId}`,
    assets: { /* asset configuration */ }
  });

  return (
    <div style={{ width: '100%', height: '80vh' }}>
      <Tldraw store={store} />
    </div>
  );
}
```

## Custom Shapes for Domain-Specific Diagrams

One of tldraw's most powerful features for research is the ability to define custom shapes. Researchers can create domain-specific visual elements.

### Defining a Custom Research Node Shape

```tsx
import {
  ShapeUtil,
  TLBaseShape,
  HTMLContainer,
  BaseBoxShapeUtil,
} from 'tldraw';

// Define the shape type
type ResearchNodeShape = TLBaseShape<
  'research-node',
  {
    w: number;
    h: number;
    label: string;
    nodeType: 'hypothesis' | 'method' | 'finding' | 'conclusion';
    status: 'planned' | 'in-progress' | 'complete';
  }
>;

// Color map for node types
const nodeColors = {
  hypothesis: '#3B82F6',
  method: '#10B981',
  finding: '#F59E0B',
  conclusion: '#EF4444',
};

const statusIcons = {
  planned: '[ ]',
  'in-progress': '[~]',
  complete: '[x]',
};

class ResearchNodeUtil extends BaseBoxShapeUtil<ResearchNodeShape> {
  static override type = 'research-node' as const;

  getDefaultProps(): ResearchNodeShape['props'] {
    return {
      w: 200,
      h: 80,
      label: 'New Node',
      nodeType: 'hypothesis',
      status: 'planned',
    };
  }

  component(shape: ResearchNodeShape) {
    const { label, nodeType, status } = shape.props;
    const color = nodeColors[nodeType];

    return (
      <HTMLContainer>
        <div style={{
          width: '100%',
          height: '100%',
          backgroundColor: color + '20',
          border: `2px solid ${color}`,
          borderRadius: '8px',
          padding: '8px

SAFEgrade B · trust 89/100 Nothing in the source contradicts what it says it does. Grade A is reserved for packages that have also passed the behavioural sandbox.

What the source does

Filesystem

none-observed

Network

none-observed

Shell

none-observed

Dependencies

pinned

Secrets in source

none-found

Findings (0)

No findings outside the package's declared scope.

Gates applied: no_behavioural_pass.