Log inSubmit server
Tldraw logo

Tldraw

React SDK for building infinite canvas applications with custom shapes, tools, bindings, and AI-oriented canvas primitives.

InstallRepositoryWebsite
Full README Compare alternatives Embed widget Claim this listing

Install Tldraw

Pick your client, then add it in one click or paste the config.

STDIONode.js
~/Library/Application Support/Claude/claude_desktop_config.json
claude_desktop_config.json
{
  "mcpServers": {
    "tldraw": {
      "command": "npx",
      "args": [
        "-y",
        "create-tldraw@latest"
      ]
    }
  }
}

Settings → Developer → Edit Config, merge this into mcpServers, then fully quit and reopen Claude Desktop.

We couldn’t confirm it starts correctly

We ran the install command but it didn't respond within our test window — this can mean a slow first-time install rather than a real problem.

npx -y create-tldraw@latest

No response to initialize.

This is an experimental automated check and can have false negatives — missing environment variables, a slow cold install, etc. It doesn’t necessarily mean something’s wrong. Last checked 7d ago.

Overview

It provides a runtime Editor API, drawing and diagramming features, extensibility for shapes and tools, and optional multiplayer support through @tldraw/sync. Reach for the documented SDK when building a browser-based canvas, agent-oriented canvas experience, workflow builder, or collaborative whiteboard rather than when seeking a confirmed MCP tool server.

Use cases

  • Build a React whiteboard
  • Create custom canvas tools and shapes
  • Add multiplayer collaboration
  • Prototype an agent-driven canvas
  • Develop a visual workflow builder

Key features

  • React infinite canvas component
  • Runtime Editor API
  • Custom shapes and tools
  • Real-time collaboration support
  • AI-oriented canvas primitives
  • Starter kits for canvas applications

Security & health

What it can reach and how reliably it runs — from our own checks, not the maintainer’s claims.

ActiveLast checked Today

Recent health check succeeded.

12/12 checks healthy over the last 44d

Supply-chain signal

No high-severity advisories surfaced by our automated scan.

Critical 0High 0Medium 0Low 0

Scanned 6d ago via OSV.dev · create-tldraw@latest (npm)

Adoption & maintenance

Factual signals from GitHub, npm, and our automated checks — not a rating.

GitHub stars51kStargazers on the source repository.
npm downloads32kPackage downloads in the last 30 days.
Last commitTodayMost recent push to the default branch.
Install checkInconclusiveDidn't respond in our test window — often a slow first install.
Directory activity1 installsConfig copies, upvotes, and views on AllMCPs.

How Tldraw works

What tldraw MCP server does

It presents tldraw as a React SDK for creating infinite canvas applications. The SDK can provide a whiteboarding foundation or act as a set of lower-level primitives for custom shapes, interactions, bindings, interface components, side effects, and event hooks.

The repository also identifies canvas primitives for building with large language models and includes an Agent starter kit for applications where AI agents read, interpret, and modify canvas content. These references support agent-oriented application development, but they do not document how an MCP client would connect to the project.

How it works

A React application installs the tldraw package and renders the <Tldraw /> component. The component supplies the canvas experience, while the Editor API allows application code to drive the canvas at runtime. Developers can keep the default whiteboarding tools or build different interactions from the SDK's primitives.

Canvas content can include pressure-sensitive drawing, geometric shapes, rich text, arrows, snapping, images, video, and exported images. Browser rendering supports embedded web content, including examples such as YouTube, Figma, and GitHub. For shared sessions, the README points to self-hosted real-time collaboration using @tldraw/sync and Cloudflare Durable Objects.

Setup and configuration

Install the SDK with:

Terminal
npm i tldraw

A basic React application imports Tldraw and the package stylesheet, then places the component in a full-size container. The repository also provides starter kits through:

Terminal
npx create-tldraw@latest

For local repository development, the documented environment uses Node.js ^20.0.0, Corepack, pnpm, and a development server at localhost:5420.

Tools and capabilities

The underlying SDK documentation does identify these application capabilities:

  • Runtime canvas control through the Editor API
  • Custom shapes, tools, bindings, and UI components
  • Drawing, diagramming, rich text, arrows, snapping, and media support
  • Image export and browser-supported embedded content
  • Self-hosted multiplayer through @tldraw/sync
  • Starter kits for agents, workflows, canvas chat, image pipelines, branching chat, and shaders

Limitations and notes

Do not assume that the repository's SDK description establishes an MCP server interface. It does not name a transport, installation command for an MCP server, client compatibility, authentication method, or MCP tool schema.

The SDK uses the tldraw license. Development use is described as free, while production use requires a license key. The repository states that contributions are not currently being accepted and directs bug reports and feature requests to GitHub issues. The tldraw MCP server should therefore be separately verified before being selected for an MCP-specific integration.

Read the full README View source on GitHub

Reviews

No reviews yet — be the first to share how it worked for you.

Frequently Asked Questions about Tldraw

The repository instead describes a React infinite-canvas SDK, with an Editor API plus customizable shapes, tools, bindings, and UI components.

No MCP server installation procedure is provided.

The material describes tldraw as a React SDK and mentions AI integrations and agent starter kits, but it does not name Cursor or any other MCP client.

Yes, the SDK supports self-hosted real-time collaboration through `@tldraw/sync` and Cloudflare Durable Objects. This is documented as an application capability, not as an MCP feature.

Related MCP servers

All in Architecture & Design All alternatives
Add a badge to your READMEShow it’s listed — live SVG, Markdown or HTML.

AllMCPs Directory Badge

Full Badge Customizer

Showcase your server listing on GitHub or your project documentation. Embed this dynamic SVG badge to highlight official listing status and live engagement.

Badge Style:
Live Dynamic SVG PreviewTldraw AllMCPs Directory Badge
Markdown (GitHub README)
[![AllMCPs](https://allmcps.com/api/badge/tldraw?style=directory)](https://allmcps.com/mcp/tldraw)
HTML Embed
<a href="https://allmcps.com/mcp/tldraw"><img src="https://allmcps.com/api/badge/tldraw?style=directory" alt="Tldraw on AllMCPs" /></a>