Tldraw

This project is a programmable, high-performance drawing engine designed for building collaborative whiteboards, diagramming tools, and infinite canvas applications. It provides a reactive graphics runtime that manages complex canvas interactions, viewport animations, and input handling through a unified signal-based API. The framework is built on a schema-driven data store that maintains application state in a strictly typed, centralized record system, enabling efficient UI updates and persistent data management.

The engine distinguishes itself through a highly modular architecture that supports deep customization of visual elements and interactive behaviors. Developers can define domain-specific shapes, custom bindings, and unique interaction tools using a utility-based system that encapsulates rendering logic and lifecycle hooks. The platform also includes robust support for multi-user environments, offering real-time state synchronization, user presence tracking, and conflict resolution, alongside a pluggable storage layer that allows for flexible backend integration.

Beyond its core drawing capabilities, the project provides a comprehensive suite of features for accessibility, security, and extensibility. It includes built-in support for keyboard navigation, screen reader announcements, and motion preference handling to ensure inclusive user experiences. Security is managed through a sanitized content pipeline that filters external data, while developers can further extend the system with custom record types, themes, and asset management utilities to tailor the canvas to specific application requirements.

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.

tldraw/draw-a-ui

5,445View on GitHub

This project is an AI-powered visual canvas and collaborative whiteboard framework. It functions as a customizable vector drawing engine and a tool for converting hand-drawn interface sketches and wireframes into functional code using artificial intelligence. The system distinguishes itself through the integration of AI agents that can read, modify, and generate visual diagrams directly on the canvas. It also provides a node-based workflow editor for building automation pipelines and data processing flows by connecting multimodal components. The platform covers a broad range of capabilities,

awesome-selfhosted/awesome-selfhosted

299,516View on GitHub

This project is a community-curated directory of open-source software designed for deployment in private server environments and home labs. It serves as a comprehensive resource for discovering independent, self-hosted alternatives to mainstream cloud services, enabling users to maintain full data ownership and control over their digital infrastructure. The directory is structured through a hierarchical taxonomy that organizes a vast collection of applications into logical categories, ranging from media management and data analytics to private communication and team productivity tools. It dis

jonataslaw/getx

11,181View on GitHub

GetX is a comprehensive state management framework for Flutter that provides a toolkit for managing application state, dependency injection, and routing without requiring build context. It serves as a core architectural system for reactive state management, navigation, service location, and multi-language theme support. The project is distinguished by its ability to handle context-free navigation and the use of observable variables that automatically trigger user interface updates. It features a dependency injection container with lazy loading and automated memory management, alongside a rout

Chalarangelo/30-seconds-of-code

128,121View on GitHub

30-seconds-of-code is a comprehensive knowledge base and programming snippet library designed to support software engineering education and professional development. It provides a curated collection of reusable code units and technical guides that help developers master core language mechanics, design patterns, and architectural philosophies. The project distinguishes itself by offering a wide-ranging library of algorithmic solutions and web development patterns that are organized into modular, independently testable units. It emphasizes functional programming paradigms and declarative logic,

tldrawtldraw

Features