Components / React infinite-canvas editor SDK
tldraw
Start with a working canvas interaction model when your product needs a spatial editing surface.
Understand the resource
What it is.
The tldraw SDK provides a React canvas editor with tools, shapes, selection, camera movement and undo/redo behavior. It is a foundation for applications where arranging objects in space is part of the work, rather than a replacement for every form or document editor. The application still chooses its data model, persistence, asset handling and collaboration architecture. The SDK is source-available under its own license; examples with permissive licenses do not change the SDK’s production terms.
When it is useful
Use it when a diagram, planning board or visual annotation workflow needs dependable editing primitives and custom shapes. Define what a shape represents in the business process before building a large toolbar. A simple ordered checklist may remain easier to use when spatial relationships add little value.
A proposed application
Put it to work.
This example illustrates a possible use. The proposed workflow and expected result are separate from the bounded checks recorded below.
Try this
Proposed workflow: create a process-review canvas with cards for steps and connectors for handoffs. Store business identifiers separately from visual positions, validate incoming records, and define who may edit or view each board. Provide a non-canvas summary of the process. Our public-example check created one rectangle and used undo/redo; it did not implement this application.
Result to aim for
A canvas prototype with explicit document, permission, persistence and accessibility boundaries before collaboration is introduced.
Before you start
What you need.
- A React application, the SDK stylesheet and a container with usable dimensions.
- A valid applicable production license/key; the default SDK license covers development rather than unrestricted production use.
- Application-owned decisions for persistence, assets, validation, collaboration, authorization and non-canvas access.
The practical boundaries
What to watch for.
- The SDK is not permissively open-source licensed. Production use requires the applicable trial, commercial or hobby license arrangement.
- The basic example is documented as nonpersistent by default; a passing draw/undo/redo cycle says nothing about reload recovery or multi-user consistency.
- External assets, embeds, uploads and collaboration introduce data flows and permission checks that were not exercised.
Review record
What we could establish.
- Why included (2026-10-19): a heavily followed canvas SDK that exposes useful editing primitives and a production-license boundary easy to overlook. GitHub tldraw/tldraw showed 50,991 stars; the inspected default-branch commit was dated 2026-10-19. This is one adoption/activity snapshot, not evidence of trend growth or safety.
- The proposed workflow above is an application idea. Executed checks and untested boundaries are stated separately in the evaluation.
The source-review notes describe documentation and identity. The account-free evaluation below records exactly which public interaction or local fixture was checked, what happened, and what remains untested.
Check current access, terms, licensing and data handling before using a resource with your own material.
Runtime and security evaluation
What the evaluation covers.
The official basic example created one rectangle, removed it with Undo and restored it with Redo. No service-write or WebSocket request was allowed. Persistence, collaboration, uploads and production-license behavior were not tested.
Methods: Public browser sample · Source review. A completed check covers the stated sample; it is not a safety certification.
- Target
- https://examples.tldraw.com/basic/full
- Version or capture
- Unversioned public build observed 2026-10-19
- Integrity scope
- Entry-response SHA-256 db15b4efa9f78c814ca87572098ccc691a8a805e54c0e18552d6bebe24aac696; not whole-application integrity.
Test conditions
- Chromium 155.0.8059.82; fresh disposable browser context, no account state or ambient credential variables.
- Synthetic inputs only; no uploads, purchases, accounts or private data.
- Exact allowlisted public HTTPS origins with GET/HEAD; credentials, non-default ports, forms, downloads, service writes, auth/telemetry routes and WebSockets blocked. Restrictions may change page behavior.
Individual checks and observations
Public application entry
passPublic browser sample: Load fresh browser document and inspect visible controls
Observed: HTTP 200; 45 sampled button controls, 0 visible inputs. Reachability alone does not establish product functionality.
Draw a rectangle
passPublic browser sample: Select observed Rectangle tool and drag a synthetic shape on blank basic-example canvas
Observed: {"before":0,"created":1}
Undo shape creation
passPublic browser sample: Activate observed Undo button
Observed: {"created":1,"undone":0}
Redo shape creation
passPublic browser sample: Activate observed Redo button
Observed: {"redone":1}
Persistence and collaboration
not-runPublic browser sample: Save/reload or share a multi-user canvas
Observed: The basic anonymous example was used without persistence or collaboration; no server data or room was created.
Security findings and boundaries
Passive inspection of the named public response headers, requested origins and bounded public controls. No exploitation, authentication or backend permission tests.
Observed · caution
The basic sample worked without a write request
The isolated public example moved through 0→1→0→1 rendered shapes. No blocked service-write/WebSocket attempt was recorded in this run; that does not establish the network behavior of other examples or integrations.
Documented · caution
Production licensing and trial telemetry are explicit
Official SDK guidance requires an applicable production license/key and describes trial-license usage pings. License enforcement and telemetry behavior were not tested or modified.
Practical advice · caution
The application must protect its canvas records
Validate records and assets and enforce authorization on the server that owns persistence or collaboration. A working local editor is not an access-control system.
Practical caveats
- Prototype a small domain-specific shape set before adding custom tools and collaboration.
- Test non-canvas task access, keyboard paths and recovery from interrupted saves in the actual application.
What remains untested
- Official mutable basic example, one rectangle and two history controls; no pinned SDK build.
- No reload persistence, asset transfer, upload, multiplayer room, synchronization server, authorization, custom record or production license test.
Security limits
- No reload persistence, asset transfer, upload, multiplayer room, synchronization server, authorization, custom record or production license test.
- No complete dependency/vulnerability audit, authenticated data access, server authorization, retention or production security certification.
Evaluation sources
Follow the evidence
Sources and further reading.
Keep exploring