tldraw/tldraw

Features

• Collaborative Whiteboarding - Enables real-time multi-user editing of shared visual workspaces with conflict resolution.
• Collaborative Whiteboard Frameworks - Provides a toolkit for creating multi-user visual workspaces that synchronize state and user presence in real-time.
• Infinite Canvas Engines - Provides the core engine for building interactive, zoomable, and pannable whiteboard interfaces.
• State Management Stores - Manages all application state through a strictly typed, centralized record store that supports custom data types and persistence.
• Custom Shape Frameworks - Provides a framework for extending the engine with custom shapes and interaction behaviors.
• Infinite Canvas SDKs - Provides a high-performance drawing engine for building collaborative whiteboards and visual interfaces with a reactive data store.
• Multiplayer Synchronization - Enables real-time multiplayer state synchronization with support for custom user data.
• Reactivity Systems - Uses a fine-grained observable system to track state changes and trigger efficient UI updates.
• Custom Data Models - Allows registration of custom record types for domain-specific data persistence.
• Database Connectors - Provides pluggable storage support including native SQLite persistence.
• Visual Data Synchronization - Manages the storage and synchronization of complex graphical records across local and remote environments.
• Storage Backend Integrations - Provides an interface for integrating custom storage backends for asset files.
• Awesome List - A community-curated directory that catalogs and links out to other open-source projects, rather than a standalone tool you run yourself.
• Content Sanitization - Processes external data through an allowlist-based filter to prevent security vulnerabilities.
• Accessible Graphics - Implements keyboard navigation and screen-reader support for interactive visual elements.
• Component Lifecycle Controllers - Defines shape behavior and rendering logic through modular classes that encapsulate lifecycle hooks and visual representation.
• Theming Systems - Provides a structured pipeline for registering and consuming custom themes to style visual elements.
• Diagramming Tools - Toolkit for building interactive drawing and diagramming applications.
• Asset Management Stores - Manages asset metadata records within the application state store.
• Persistence Layers - Provides configurable persistence keys for managing stored application state.
• User Attribution Systems - Tracks shape creation and modification history linked to specific user identities.
• Component Architectures - Organizes interaction logic into a hierarchical state machine where tools and behaviors are managed as discrete nodes.
• Reactive State Management - Uses reactive atoms to manage input state and event handling.
• Camera Control APIs - Provides programmatic methods for controlling viewport position, zoom, and smooth transitions.
• Visual Shape Engines - Offers a modular architecture for defining custom visual elements, geometric behaviors, and interactive bindings.
• Rich Text Editors - Integrates a rich text editing engine for document and content creation.
• Storage Adapters - Decouples application state from persistence backends by allowing custom adapters for syncing data.
• Keyboard Shortcut Managers - Supports cross-platform keyboard shortcut definitions for triggering application actions.
• Animation Engines - Enables smooth transitions for individual object properties.
• Camera Interaction Controllers - Provides smooth viewport transitions using easing functions.
• Clipboard Operations - Manages the serialization and placement flows for copy and paste operations.
• Extensible Asset Systems - Enables the registration of custom asset types through a modular base class pattern.
• Relationship Binding APIs - Provides programmatic APIs for creating and managing relationships between graphical elements.
• Schema Extension Systems - Supports extending core data schemas with custom metadata fields.
• Accessibility Labeling Systems - The drawing engine allows developers to define descriptive text for screen readers by providing alt text for media or overriding methods to return custom labels for visual shapes.
• Camera Configuration - Configures viewport behavior including constraints, zoom steps, and interaction speeds.
• Canvas Rendering Engines - Optimizes UI performance by rendering shape indicators using 2D canvas.
• Interaction Event Handlers - Provides handler interfaces for responding to user input events within custom tools.
• Reactive Graphics Runtimes - Manages complex canvas interactions, viewport animations, and input handling through a unified signal-based API.
• Asset Type Definitions - Defines built-in schemas for common media asset types.
• Command Actions - Defines executable actions that can be triggered via UI or keyboard shortcuts.
• Editor Configuration Interfaces - Copy markdown
• Custom Attribution Tracking - Allows developers to add attribution tracking to custom data objects.
• Binding Extension Frameworks - Enables the creation and registration of custom relationship types between graphical elements.
• Configuration Overrides - Allows customization of default application actions through an override interface.
• Custom Shape Definitions - Allows developers to plug custom geometric shapes into the existing rendering pipeline.
• External Content Handlers - Routes external content like files and URLs through registered handlers for integration.
• User State Management - Provides reactive signals for managing active user sessions and identity lookups.
• Accessibility Features - Provides visible text labels for icon-based elements to improve clarity and navigation.
• Canvas Components - Copy markdown
• Hit Detection Systems - Enables click-through interaction on transparent image pixels.
• Keyboard Navigation Utilities - The drawing engine supports keyboard-based focus management between shapes, automatically calculating reading order and allowing developers to exclude specific custom elements from the focus cycle.
• Overlay Systems - Provides a unified system for creating and customizing canvas overlays.
• Shape Customization - Allows configuration of visual shape options for custom drawing elements.
• Viewport Collaboration - Integrates camera systems with collaboration features like user following and viewport synchronization.

Star history