Build Infinite Canvas Apps in React with the tldraw SDK

1. Overview

• tldraw is a robust, feature-full infinite canvas engine designed to serve as the foundation for any canvas-powered application. Built for React, it exposes a powerful SDK that lets developers craft custom shapes, tools, bindings, and UI components to create a unique drawing and diagramming experience.

• The system can operate in two modes: use the default whiteboarding toolset for rapid prototyping and collaboration, or leverage the library’s primitives to compose entirely new shapes, interactions, and workflows tailored to a specific domain. The emphasis is on flexibility and composability, allowing teams to move from a ready-made whiteboard to a bespoke canvas solution without rewriting core logic.

• Visual identity is central to tldraw. The project provides a cohesive set of components and styles that maintain consistency across tools, shapes, and UI bindings, ensuring a polished user experience while remaining adaptable to brand needs.

• Visual reference: Image capturing the hero identity is included in the input. Image: tldraw hero. Source: https://github.com/tldraw/tldraw/raw/main/assets/github-hero-light.png

• The architecture is designed for real-time collaboration, extensibility, and embeddability. You can host a multiplayer experience yourself using the built-in synchronization primitives, then tailor the experience for teams, classrooms, or design studios.

• A broad spectrum of capabilities covers both drawing and diagramming tasks. Expect pressure-sensitive drawing, a variety of geometric shapes, rich text support, arrows and connectors, snapping to shapes, edge scrolling, and support for images and videos on the board. Images can be embedded, exported, and manipulated as first-class primitives, enabling multimedia diagrams and media-rich whiteboards.

• The runtime API provides programmatic control of the canvas at runtime. This means you can drive the editor from your application logic, orchestrate complex interactions, and integrate canvas content with other parts of your product.

• Extensibility is at the core. Developers can add custom shapes, tools, bindings, and UI components. The SDK is designed to accommodate side effects and event hooks, making it straightforward to hook into lifecycle events, respond to user actions, and introduce new interactions without forking the core system.

• AI integrations are target-ready helpers within the ecosystem. The platform includes primitives for building AI-assisted experiences, including tools for leveraging large language models (LLMs) to read, interpret, and influence canvas content. This enables use cases such as AI-assisted diagramming, content analysis, and interactive chat features that respond to sketches.

• The DOM canvas capability ensures web rendering remains fully compatible with the browser environment. It supports embedding websites and other web content directly within the canvas, enabling mixed-media experiences that combine live web content with native canvas primitives. This makes it possible to host YouTube players, Figma embeds, GitHub previews, and more inside a single canvas surface.

• Compatibility and reach are broad. tldraw is designed to work across desktop and touch-enabled devices, including tablets and phones. The responsive, touch-friendly UI ensures that users can draw, annotate, and interact with canvas content in diverse contexts, from large desktop displays to on-the-go mobile devices.

1. Feature Highlights

• 2.1 Multiplayer and real-time collaboration

• Self-hostable real-time collaboration is a core offering, powered by the @tldraw/sync module. This enables teams to work on the same canvas concurrently, with synchronization that scales across devices and network conditions.

• The collaboration stack can be deployed behind your own infrastructure, giving teams control over data residency, latency, and access control while benefiting from the same smooth, collaborative experience users expect from modern whiteboards.

• 2.2 Drawing and diagramming capabilities

• Pressure-sensitive drawing supports a natural, responsive feel as users sketch lines and shapes, adjusting line weight in real time to reflect velocity and stroke dynamics.

• A broad set of geometric shapes is available out of the box, enabling the rapid construction of diagrams, flowcharts, wireframes, and schematic representations.

• Rich text support lets users annotate shapes and boards with typography, bullets, and inline formatting, enhancing clarity and expressiveness in diagrams.

• Arrows and connectors provide a robust set of relationships between objects, with snapping to shapes that helps maintain neatness and alignment.

• Edge scrolling makes large canvases navigable as content grows beyond the visible area, enabling seamless exploration of expansive boards.

• Image and video support allows multimedia content to be embedded directly on the canvas, supporting presentations, annotated media, and richer diagrams.

• Image export provides a straightforward path to capturing and exporting canvas content in usable formats for sharing, documentation, or archival purposes.

• 2.3 Runtime API

• The Editor API gives developers programmatic control over the canvas at runtime. This enables dynamic interactions, scripted updates, and integration with other application logic, turning the canvas into a programmable workspace.

• 2.4 Full extensibility

• Custom shapes, tools, bindings, and UI components can be built to tailor the canvas experience to a specific domain or product. The architecture supports side effects and event hooks, allowing deep customization without compromising core stability.

• Bindings let you connect canvas events and data flows to external systems or domain models, enabling sophisticated interactions and integrations.

• UI components can be embedded or composed to deliver a cohesive, branded user experience within the canvas environment.

• 2.5 AI integrations

• Primitives and patterns are provided for building AI-driven experiences, enabling canvas content to be interpreted, generated, or guided by AI agents. This opens opportunities for AI-assisted diagramming, sketch-based prompts, and collaborative AI chat that responds to sketches and annotations.

• 2.6 DOM canvas and embeddable web content

• The DOM canvas approach ensures compatibility with the full browser toolset, allowing embedded websites and web apps to render inside the canvas space.

• The ability to embed YouTube, Figma, GitHub, and other web content makes tldraw a versatile platform for mixed-media canvases, demonstrations, and interactive prototypes.

• 2.7 Broad platform support

• The engine is designed to run in any modern browser and to work across desktop environments, touch-enabled devices, tablets, and mobile devices. This broad compatibility supports collaborative work in diverse contexts, from desks to classrooms to field work.

1. Quick Start

• 3.1 Installation

• To begin, install the tldraw package with a standard package manager command: npm i tldraw.

• This pulls in the core library and its runtime dependencies, setting up the foundation for building canvas-enabled apps.

• 3.2 Basic integration in a React app

• Import the Tldraw component and the associated CSS, then render the editor as part of your app.

• Example (conceptual): import { Tldraw } from 'tldraw'; import 'tldraw/tldraw.css'; function App() { return ; }

• The example above demonstrates a minimal integration that yields a fully interactive whiteboard with all default tools and shapes. From here, you can customize by plugging in your own shapes, tools, and bindings.

• 3.3 Quick-start notes

• The library is designed to be approachable for quick experiments yet powerful enough for production-grade apps. As you grow your project, you can replace default components with your own UI and extend behavior through the runtime API and bindings.

1. Starter Kits

• 4.1 Purpose and licensing

• Starter kits provide a curated set of custom shapes, tools, and user interface elements optimized for common application scenarios.

• All starter kits are MIT-licensed, offering freedom to hack, adapt, and redistribute in personal and commercial projects.

• 4.2 How to begin

• A typical workflow to begin building with tldraw starter kits involves using a helper tool to bootstrap a new project, enabling rapid experimentation and prototyping.

• 4.3 Starter kit examples

• Multiplayer: A self-hosted real-time collaboration experience, powered by the tldraw synchronization stack and Cloudflare Durable Objects—the same stack that powers the official site.

• Agent: AI agents capable of reading, interpreting, and modifying canvas content, enabling AI-assisted workflows on top of your canvas.

• Workflow: A drag-and-drop node builder for automation pipelines, visual programming, and no-code platforms, turning the canvas into a visual automation canvas.

• Chat: A canvas-powered AI chat where users sketch, annotate, and mark up images while participating in a conversation.

• Branching chat: AI chat with visual branching that lets users explore and compare different conversation paths directly on the canvas.

• Shader: WebGL shader-based interactions that respond to canvas activity, enabling dynamic, visually rich effects as users draw and manipulate shapes.

• 4.4 Use cases and benefits

• Starter kits accelerate prototyping and give teams a practical blueprint for building domain-specific apps, from design and diagramming tools to AI-assisted collaboration and automated workflows.

• Each kit is a nested example of how the core engine can be composed with domain-specific shapes, interactions, and UI, offering a clear reference implementation.

1. Local Development

• 5.1 Development server

• The development server runs the examples app on localhost:5420, providing a live environment to iterate on demos and test integrations.

• 5.2 Setup and tooling

• To ensure you’re using the correct yarn version, enable corepack. A common setup step is: npm i -g corepack.

• After installing dependencies, start the development server using yarn dev or the project’s defined dev script, allowing you to see changes in real time as you modify code and UI.

• 5.3 Workflow tips

• Cloning the repository and enabling corepack helps ensure consistency across development environments.

• Regularly checking the starter kits and example apps can provide practical references for implementing custom shapes, bindings, and UI components.

1. Community

• 6.1 Discord

• The project maintains an active Discord community for questions, feedback, and discussion. It’s a friendly space to seek help, share ideas, and connect with other developers building on tldraw.

• 6.2 Social channels

• Updates and news are shared on Twitter/X, providing a channel for announcements and product milestones.

• Community members can also submit issues on GitHub to report bugs or request features, keeping the project transparent and responsive to user needs.

• 6.3 Engagement and collaboration

• The community ecosystem emphasizes openness and collaboration, encouraging developers to contribute improvements, share use cases, and participate in ongoing conversations about the SDK’s direction.

1. Contributing

• 7.1 Contributing guide

• The project maintains a dedicated contributing guide to help new and experienced contributors alike understand how to collaborate effectively.

• The guide covers topics such as code standards, workflows for submitting changes, testing practices, and how to propose enhancements.

• 7.2 Expected practices

• Contributors are encouraged to create meaningful PRs, document changes, and engage with maintainers to ensure new features integrate smoothly with the existing architecture.

• Community feedback and code reviews help ensure the SDK remains robust, maintainable, and aligned with developer needs.

1. Licensing and Trademarks

• 8.1 Licensing

• The tldraw SDK is provided under the tldraw license, with production use requiring a license key. Development and experimentation can proceed freely under the terms of the license, while production deployments should obtain a license to ensure compliance and support.

• 8.2 Brand and trademarks

• The tldraw name and logo are trademarks of tldraw Inc. Trademark guidelines describe acceptable usage and provide guidance for maintaining brand integrity across applications built with the SDK.

• 8.3 What this means for developers

• The licensing model is designed to balance open development and production-grade deployment, encouraging experimentation while ensuring a sustainable path for the project.

1. Visuals and Milestones

• 9.1 Hero image and identity

• The project’s visual identity, including the hero illustration, is part of the input assets. This visual language informs the look and feel of the UI components, shapes, and interaction paradigms that appear in the SDK and its example apps.

• 9.2 Contributors badge

• The project highlights community contributions with a contributor badge image, signaling active participation and a transparent view of those who help shape the project. Image reference: https://contrib.rocks/image?repo=tldraw/tldraw&max=400&columns=20

• 9.3 Star history

• A star history visualization tracks the project’s popularity over time, offering a snapshot of community interest and ongoing maintenance activity. Image reference: https://api.star-history.com/svg?repos=tldraw/tldraw&type=Date

• 9.4 Practical implication

• Visual assets like these not only celebrate community involvement but also reflect the project’s trajectory and the ecosystem’s vibrancy. The combination of a polished hero image, contributor acknowledgment, and rising star momentum signals a healthy, active project suitable for building production-grade canvas apps.

1. Practical Considerations for Using tldraw

• 10.1 Integration strategy

• Teams can start with the default whiteboarding tools to validate ideas quickly, then progressively introduce custom shapes, bindings, and UI components as the product requirements crystallize.

• 10.2 Collaboration safety and hosting

• Self-hosted collaboration provides control over data and access. Organizations can deploy the synchronization stack in their own environments, ensuring compliance with internal policies and security standards.

• 10.3 Extensibility roadmap

• The architecture is designed to scale with your needs. You can begin with the built-in toolset and shapes, then add domain-specific primitives, complex bindings to external services, and custom editor UI hooks to unlock specialized workflows.

• 10.4 AI-enabled workflows

• With AI primitives, users can craft experiences that interpret sketches, offer suggestions, or drive automated content generation. The canvas becomes a responsive partner in design, planning, and problem-solving.

• 10.5 Web-centric capabilities

• Embedding web content shines in scenarios such as design reviews, education, and product demos. This capability reduces context switching and enables richer demonstrations within a single canvas environment.

1. Summary and Vision

• tldraw presents a compelling blend of performance, flexibility, and collaboration for developers who want to build immersive, media-rich, canvas-based applications on the web. Its infinite canvas, real-time collaboration, and extensible architecture position it as a versatile foundation for whiteboarding, diagramming, and visual programming experiences. The inclusion of AI-friendly primitives, DOM canvas support, and a broad cross-device footprint makes it suitable for teams seeking to deploy robust canvas apps across varied contexts—whether in the browser, in classrooms, or as embedded experiences within complex SaaS products.

• The ecosystem surrounding tldraw—starter kits, contributor ecosystems, and a clear licensing approach—ensures that you can prototype rapidly, iterate with your team, and scale into production with confidence. The project’s visual language, well-documented APIs, and community-driven development model create a productive environment for experimentation and growth.

• Visual references from the input reinforce the practical and collaborative nature of the project: an inviting hero image, contributor badges, and a star-history visualization that together tell a story of active development, community engagement, and ongoing momentum.

• If you are exploring a canvas-first approach in React, tldraw offers a compelling path from a ready-to-use whiteboard to a fully customized, production-ready canvas platform. The balance between out-of-the-box capabilities and deep customization points provides a scalable route from concept to shipped product.

Images included from Input (for reference)

• Hero image: https://github.com/tldraw/tldraw/raw/main/assets/github-hero-light.png
• Contributors badge: https://contrib.rocks/image?repo=tldraw/tldraw&max=400&columns=20
• Star history: https://api.star-history.com/svg?repos=tldraw/tldraw&type=Date

Notes on usage and navigation within the content

• The sections above are organized to give a practical progression: from a high-level overview to actionable quick-start steps, then to deeper details about starter kits, local development, community, contribution, licensing, and visuals that contextualize the project’s status.
• Each bullet point is designed to be self-contained, enabling readers to skim for specific capabilities (such as multiplayer or DOM canvas) or to follow a more narrative flow about how tldraw can be integrated into a real project.
• Where relevant, references to input assets (images and badges) are included to reinforce the connection between the textual description and the project’s visual identity.

If you’d like, I can tailor this description further for a specific audience (developers new to canvas apps, design teams evaluating diagramming tools, or engineering leaders considering production licensing), or adapt the tone to be more concise or more expansive across sections.