tldraw  by tldraw

Infinite canvas SDK for building interactive web applications

Created 4 years ago
45,345 stars

Top 0.6% on SourcePulse

GitHubView on GitHub
Project Summary

Summary

tldraw is a feature-complete infinite canvas SDK for React, designed to serve as the foundation for custom canvas applications. It empowers developers to build sophisticated interactive experiences, from whiteboards and diagramming tools to no-code platforms, by offering a highly extensible engine and a rich set of primitives. The SDK aims to accelerate development for those needing a robust, flexible, and collaborative canvas solution.

How It Works

The core of tldraw is a feature-complete infinite canvas engine built with extensibility in mind. It allows developers to leverage default whiteboarding tools or construct entirely new shapes, tools, bindings, and UI components using its primitives. The engine supports pressure-sensitive drawing, geometric shapes, rich text, snapping, edge scrolling, and image/video embedding. Rendering is handled via DOM canvas, supporting embedded web content, and a runtime API enables programmatic control of the canvas.

Quick Start & Requirements

  • Installation: npm i tldraw
  • Usage: Integrate the <Tldraw /> component into a React application.
  • Starter Kits: Use npx create-tldraw@latest for pre-built application templates.
  • Development: Clone the repo, install dependencies with yarn, and start the dev server with yarn dev.
  • Prerequisites: React.

Highlighted Details

  • Self-hostable real-time collaboration powered by @tldraw/sync and Cloudflare Durable Objects.
  • Comprehensive drawing and diagramming features including pressure sensitivity, geometric shapes, rich text, and image export.
  • Fully extensible architecture for custom shapes, tools, bindings, UI components, side effects, and event hooks.
  • DOM canvas rendering supports embedded websites (YouTube, Figma, GitHub) and works across desktop and mobile devices.
  • Primitives for building AI integrations and agent-based canvas interactions.

Maintenance & Community

  • Community: Discord for discussion, Twitter/X for updates.
  • Support: Submit issues on GitHub for bug reports and feature requests.
  • Development: Active development indicated by copyright 2024-present.

Licensing & Compatibility

The tldraw SDK is provided under the "tldraw license". It is free for development use, but production use requires a license key. Trademarks are held by tldraw Inc.

Limitations & Caveats

Production deployment is contingent on obtaining a license key, which may impose commercial restrictions or costs. The specific terms of the "tldraw license" for production use should be carefully reviewed.

Health Check
Last Commit

17 hours ago

Responsiveness

Inactive

Pull Requests (30d)
247
Issues (30d)
87
Star History
519 stars in the last 30 days

Explore Similar Projects

Feedback? Help us improve.