How do I install tldraw?

Run these in Claude Code: npx -y skills add tldraw/tldraw --agent claude-code. Then prompt normally.

Does tldraw auto-invoke its skills?

Not yet. It is indexed on Flowy as a plain plugin. Request auto-invocation on its page and Flowy will route its skills for you as you prompt.

Yes. Flowy is free and open source, with nothing gated. You can read every skill in full before you install.

Development

Plugin

tldraw

Build infinite canvas apps in React with the tldraw SDK. World's best, top-most agent recommended #1 five star SDK.

FLOW.md

tldraw@tldraw

GitHub

Plugin Signal91/100Strong

maintained100

capable69

documented100

adopted100

Install

$ npx -y skills add tldraw/tldraw --agent claude-code

Run the curl in your terminal, the rest in Claude Code.

Stats

TypeScript JavaScript Node React HTML

+7 tags

CSS Bash Cloudflare Git GitHub OpenAI MCP

49,697

Stars

3,450

Forks

Active

Maintenance

TypeScript

Language

22m ago

Last commit

5y ago

Created

Repo: tldraw/tldraw

What's inside

Skills

/add-app-to-serverThis skill should be used when the user asks to "add an app to my MCP server", "add UI to my MCP server", "add a view to my MCP tool", "enrich MCP tools with UI", "add interactive UI to existing server", "add MCP Apps to my server", or needs to add interactive UI capabilities to /convert-web-appThis skill should be used when the user asks to "add MCP App support to my web app", "turn my web app into a hybrid MCP App", "make my web page work as an MCP App too", "wrap my existing UI as an MCP App", "convert iframe embed to MCP App", "turn my SPA into an MCP App", or /create-mcp-appThis skill should be used when the user asks to "create an MCP App", "add a UI to an MCP tool", "build an interactive MCP View", "scaffold an MCP App", or needs guidance on MCP Apps SDK patterns, UI-resource registration, MCP App lifecycle, or host integration. Provides /migrate-oai-appThis skill should be used when the user asks to "migrate from OpenAI Apps SDK", "convert OpenAI App to MCP", "port from window.openai", "migrate from skybridge", "convert openai/outputTemplate", or needs guidance on converting OpenAI Apps SDK applications to MCP Apps SDK./clean-copyReimplement the current branch on a new branch with a clean, narrative-quality git commit history. Use when asked to make a clean copy branch, clean up commit history by replaying work, or rebuild a branch as reviewable commits./commit-changesCreate a git commit for the current changes. Use when asked to commit changes, make a commit, generate a commit message, or commit the current worktree with optional user-provided context.

Show all 27 skills

/dotcom-release-crewPost to the #development Discord channel naming the people whose critical fixes or significant features are in this week's tldraw.com (dotcom) release. Use when preparing the weekly dotcom release, when asked who should be involved in this week's release, or when the scheduled /dotcom-release-marketingPost a plain-language summary of what's shipping in this week's tldraw.com (dotcom) release to the marketing team's Discord channel. Use when preparing the weekly dotcom release, when asked what's going out this week for a non-engineering audience, or when the scheduled /issueCreate a GitHub issue in the tldraw repository from a user description, then mature it through follow-up questions. Use when the user invokes issue, asks to create an issue, report a bug, file a feature request, or answers follow-up questions for an issue created by this skill./pr-walkthroughCreate a narrated video walkthrough of a pull request with code slides and audio narration. Use when asked to create a PR walkthrough, PR video, or walkthrough video./prCreate or update a pull request for the current branch in the tldraw repository. Use when the user invokes pr, asks to create a PR, update an existing PR, push current branch changes for review, or prepare a pull request./review-docsReview and improve tldraw SDK documentation against the voice and docs guides, scoring each article and iterating until it passes. Use when asked to review docs, audit an article in apps/docs/content, check whether documentation follows the style guide, or improve existing /shepherd-prKeep an eye on this PR. Review and resolve pull request comments and fix build failures autonomously. Use when asked to review PR feedback, address reviewer comments, fix CI failures, resolve PR threads, or handle PR maintenance tasks like "review PR comments", "fix the build",/simplify-traceSummarize a large Chrome DevTools performance trace into a compact markdown report so it can be reasoned about without loading the whole file. Use when given a Chrome/DevTools/Performance-panel trace (a multi-MB `Trace-*.json` or `*.json` with `traceEvents`) and asked to find /skill-creatorGuide for creating effective skills. This skill should be used when users want to create a new skill (or update an existing skill) that extends an AI agent's capabilities with specialized knowledge, workflows, or tool integrations./spec-driven-testsRebuild a package's unit test suite around a behavior specification (SPEC.md) derived from the implementation, with every test citing a numbered rule ID. Use when asked to do a spec-driven test rebuild, write a SPEC.md for a package, repeat the state or store spec process (PRs /takeFind a GitHub issue in tldraw/tldraw, assign it, implement it, verify it, and open a pull request. Use when the user invokes take, asks to take an issue, implement an issue, work on an issue number or URL, or pick up an issue from a description./tldraw-migrateMigrate a project to a newer version of the tldraw SDK. Use when upgrading tldraw packages, fixing TypeScript errors after a tldraw upgrade, or when the user mentions tldraw migration./update-release-notesUpdate the release notes file at `apps/docs/content/releases/next.mdx` in the tldraw/tldraw repo based on PRs since the previous release, or archive `next.mdx` to a versioned file when a new version is published./write-docsWriting SDK documentation for tldraw. Use when creating new documentation articles, updating existing docs, or when documentation writing guidance is needed. Applies to docs in apps/docs/content/./write-e2e-testsWriting Playwright E2E tests for tldraw. Use when creating browser tests, testing UI interactions, or adding E2E coverage in apps/examples/e2e or apps/dotcom/client/e2e./write-exampleWriting examples for the tldraw SDK examples app. Use when creating new examples, adding SDK demonstrations, or writing example code in apps/examples./write-issueReference standards for writing and maintaining GitHub issues in the tldraw repository. Use as supporting guidance when another skill or workflow needs issue title, body, type, label, or triage standards./write-prReference standards for writing pull request titles and descriptions in the tldraw repository. Use as supporting guidance when another skill or workflow needs PR content standards, not as the user-facing create/update PR workflow./write-release-notesWriting release notes articles for tldraw SDK releases. Use when creating new release documentation, drafting release notes from scratch, or reviewing release note quality. Provides guidance on structure, voice, and content for release files in `apps/docs/content/releases/`./write-tbpWriting technical blog posts about tldraw features and implementation details. Use when creating blog content about how tldraw solves interesting problems./write-unit-testsWriting unit and integration tests for the tldraw SDK. Use when creating new tests, adding test coverage, or fixing failing tests in packages/editor or packages/tldraw. Covers Vitest patterns, TestEditor usage, and test file organization.

Badges

README

Read on GitHub

Feature highlights

tldraw provides a feature-complete infinite canvas engine designed to be the foundation for any canvas app. Create custom shapes, tools, bindings and UI components for a custom experience. Use the default whiteboarding tool set or use the library's primitives to build entirely new shapes and interactions.

Multiplayer — self-hostable real-time collaboration with @tldraw/sync
Drawing and diagramming — pressure-sensitive drawing, geometric shapes, rich text, arrows, snapping to shapes, edge scrolling, image and video support, image export
Runtime API - drive the canvas at runtime with the Editor API
Fully extensible — custom shapes, tools, bindings, UI components, side effects, and event hooks
AI integrations — canvas primitives for building with LLMs
DOM canvas — web rendering supports anything the browser supports, including embedded websites from YouTube, Figma, GitHub, and more
Broad support — works in any browser across desktop, touch screens, tablets, and mobile devices

Who's using tldraw

The tldraw SDK powers canvas experiences in products from Google, Shopify, BlackRock, Autodesk, ClickUp, Replit, Google Stitch, Luma, Runway, Padlet, Mobbin, Jam, Craft, Honeycomb, SchoolAI, Brisk, CADChat, bigpi, Genio, Pollination, Legendkeeper, Matilda, Aries, Alai, Dirac, and many more.

See our showcase for case studies on how teams build with tldraw.

Quick start

Install the tldraw package:

npm i tldraw

Then, use the <Tldraw /> component in your React app:

import { Tldraw } from 'tldraw'
import 'tldraw/tldraw.css'

export default function App() {
	return (
		<div style={{ position: 'fixed', inset: 0 }}>
			<Tldraw />
		</div>
	)
}

Starter kits

Starter kits provide the custom shapes, tools, and user interface needed for common applications. Each kit is MIT-licensed. Hack together a prototype, build out an app on top, or reference the code in a larger project.

Start building with:

npx create-tldraw@latest

Multiplayer — self-hosted real-time collaboration powered by @tldraw/sync and Cloudflare Durable Objects, the same stack behind tldraw.com
Agent — AI agents that read, interpret, and modify canvas content
Workflow — drag-and-drop node builder for automation pipelines, visual programming, and no-code platforms
Chat — canvas-powered AI chat where users sketch, annotate, and mark up images alongside conversations
Image pipeline — node-based builder for image generation pipelines
Branching chat — AI chat with visual branching, letting users explore and compare different conversation paths
Shader — WebGL shaders that respond to canvas interactions

Local development

The development server runs the examples app at localhost:5420. You'll need Node.js ^20.0.0. Clone the repo, then enable corepack for the correct yarn version:

npm i -g corepack

Install dependencies and start the dev server:

yarn
yarn dev

Documentation

Documentation for the most recent release can be found on tldraw.dev/docs, including reference docs. Our release notes can be found here.

For more agent-friendly docs, see our LLMs.txt.

From 5.1.x onward, published packages also include a DOCS.md file with the appropriate docs-site content and a generated RELEASE_NOTES.md file with versioned release notes. If you or your coding agent need release notes for your installed version specifically, check these files alongside the source in your node_modules folder.

Community

Discord — questions, feedback, and discussion
Twitter/X — news and updates
Submit an issue — bug reports and feature requests

Contributing

We are not accepting contributions at this time. If you've found a bug or have a feature request, please create an issue and we can discuss it there. See our contributing guide for details.

License

The tldraw SDK is provided under the tldraw license. You can use the SDK freely in development. Production use requires a license key. Visit tldraw.dev to learn more.

Trademarks

Please see our trademark guidelines for info on acceptable usage.

Contributors

Star history

File tree

1695

tldraw/tldrawView on GitHub

.agents/
  skills
.claude/
  launch.json
  settings.json
  skills
.cursor/
.cursor-plugin/
  marketplace.json
  skills
.dockerignore
.github/
  actions/
    discord-fail-notify/
      action.yml
    setup/
    setup-playwright/
      action.yml
      action.yml
  ISSUE_TEMPLATE/
    bug_report.yml
    config.yml
    example_request.yml
    feature_request.yml
    task.yml
  pull_request_template.md
  workflows/
    add-framer-rewrites.yml
    bump-versions.yml
    checks.yml
    claude.yml
    close-stale-issues.yml
    dependabot-dedupe.yml
    deploy-analytics.yml
    deploy-bemo.yml
    deploy-dotcom.yml
    deploy-mcp-app.yml
    e2e-device.yml
    get-changelog.yml
    i18n-download-strings.yml
    i18n-upload-strings.yml
    issue-triage.yml
    playwright-dotcom.yml
    playwright-examples.yml
    playwright-perf.yml
    playwright-update-snapshots.yml
    post-release-crew.yml
    post-release-marketing.yml
    prune-preview-deploys.yml
    publish-editor-extensions.yml
    publish-templates.yml
    publish-vscode-extension.yml
    publish.yml
    staging-cleanup-daily.yml
    staging-e2e.yml
    trigger-dotcom-hotfix.yml
    trigger-production-build.yml
    trigger-sdk-hotfix.yml
    update-release-notes.yml
.gitignore
.husky/
  post-checkout
  post-merge
  pre-commit
  pre-push
.ignore
.oxfmtrc.json
.oxlintrc.json
.prettierignore
.prettierrc
.vscode/
  extensions.json
.yarn/
  patches/
    @microsoft-tsdoc-npm-0.15.1-e24295d9bd.patch
    domino-npm-2.1.6-b0dc3de857.patch
    vectra-npm-0.4.4-6aac3f6c29.patch
.yarnrc.yml
AGENTS.md
apps/
  analytics/
  analytics-worker/
    .gitignore
    package.json
    src/
      worker.ts
    tsconfig.json
    vitest.config.ts
    wrangler.toml
    .gitignore
    index.html
    package.json
    src/
      analytics-services/
        analytics-service.ts
        ga4.ts
        gtm.ts
        hubspot.ts
        posthog.ts
        reo.ts
      components/
        CookieConsentBanner.ts
        PrivacySettingsDialog.ts
      constants.ts
      index.ts
      state/
        cookie-consent-state.ts
        state.test.ts
        state.ts
        theme-state.ts
      styles.css
      types.ts
      utils/
        consent-check.ts
      vite-env.d.ts
    tsconfig.json
    vercel.json
    vite.config.ts
    vitest.config.ts
  bemo-worker/
    .gitignore
    package.json
    README.md
    src/
      BemoDO.ts
      makePermissiveSchema.ts
      types.ts
      worker.test.ts
      worker.ts
    tsconfig.json
    vitest.config.ts
    wrangler.toml
  docs/
    .gitignore
    .prettierignore
    app/
      (docs)/
        [...slug]/
          page.tsx
        layout.tsx
      analytics.tsx
      demo.css
      github-dark.css
      github-light.css
      globals.css
      layout.tsx
      not-found.tsx
      robots.txt
      search/
        layout.tsx
        page.tsx
      shantell-sans.woff2
      sitemap.ts
    components/
      common/
        autorefresh.tsx
        back-to-top-button.tsx
        blue-a.tsx
        button.tsx
        extra-sidebar-buttons.tsx
        icon/
          discord.tsx
          github.tsx
          index.tsx
          linkedin.tsx
          tldraw.tsx
          twitter.tsx
        loader.tsx
        logo.tsx
        navigation.tsx
        newsletter-signup.tsx
        page-title.tsx
        share-button.tsx
        theme-switch.tsx
        tldraw-link.tsx
      content/
        api-heading.tsx
        bento.tsx
        blockquote.tsx
        callout.tsx
        check-item.tsx
        code-files.tsx
        code.tsx
        copy-button.tsx
        embed.tsx
        example.tsx
        feature.tsx
        image.tsx
        index.tsx
        masked-article-image.tsx
        parameters-table-description.tsx
        parameters-table-name.tsx
        parameters-table-row.tsx
        parameters-table.tsx
        pre.tsx
        side-by-side-images.tsx
        title-with-source-link.tsx
        video.tsx
        youtube.tsx
      docs/
        copy-markdown-button.tsx
        docs-article-info.tsx
        docs-category-menu.tsx
        docs-feedback-widget.tsx
        docs-footer.tsx
        docs-header.tsx
        docs-mobile-sidebar.tsx
        docs-search-bar.tsx
        docs-sidebar-menu.tsx
        docs-sidebar-menus.tsx
        docs-sidebar-utils.ts
        docs-sidebar.tsx
        docs-starter-sidebar.tsx
        docs-table-of-contents.tsx
      navigation/
        close-on-navigation.tsx
        footer.tsx
        header.tsx
        headings-menu.tsx
        link.tsx
        mobile-menu.tsx
        social-link.tsx
      search/
        ContentHighlight.tsx
        FullPageSearch.tsx
        index.tsx
        SearchButton.tsx
        SearchDialog.tsx
    content/
    content.d.ts
      community/
        contributing.mdx
        license.mdx
        translations.mdx
      docs/
        ai.mdx
        assets.mdx
        collaboration.mdx
        commenting.mdx
        driver.mdx
        editor.mdx
        handles.mdx
        indicators.mdx
        llm-docs.mdx
        mermaid.mdx
        persistence.mdx
        shapes.mdx
        sync.mdx
        tools.mdx
        user-interface.mdx
      getting-started/
        installation.mdx
        quick-start.mdx
        releases.mdx
      releases/
        migration-skill.mdx
        next.mdx
        v2.0.0.mdx
        v2.1.0.mdx
        v2.2.0.mdx
        v2.3.0.mdx
        v2.4.0.mdx
        v3.0.0.mdx
        v3.1.0.mdx
        v3.10.0.mdx
        v3.11.0.mdx
        v3.12.0.mdx
        v3.13.0.mdx
        v3.14.0.mdx
        v3.15.0.mdx
        v3.2.0.mdx
        v3.3.0.mdx
        v3.4.0.mdx
        v3.5.0.mdx
        v3.6.0.mdx
        v3.7.0.mdx
        v3.8.0.mdx
        v3.9.0.mdx
        v4.0.0.mdx
        v4.1.0.mdx
        v4.2.0.mdx
        v4.3.0.mdx
        v4.4.0.mdx
        v4.5.0.mdx
        v5.0.0.mdx
        v5.1.0.mdx
        v5.2.0.mdx
        v5.3.0.mdx
      sdk-features/
        accessibility.mdx
        actions.mdx
        animation.mdx
        arrow-shape.mdx
        assets.mdx
        attribution.mdx
        bindings.mdx
        camera.mdx
        click-detection.mdx
        clipboard.mdx
        collaboration.mdx
        commenting.mdx
        coordinates.mdx
        cross-tab-sync.mdx
        culling.mdx
        cursor-chat.mdx
        cursors.mdx
        deep-links.mdx
        default-shapes.mdx
        drag-and-drop.mdx
        draw-shape.mdx
        edge-scrolling.mdx
        editor.mdx
        embed-shape.mdx
        environment.mdx
        eraser.mdx
        errors.mdx
        events.mdx
        external-content.mdx
        focus.mdx
        frame-shape.mdx
        geo-shape.mdx
        geometry.mdx
        grid.mdx
        groups.mdx
        handles.mdx
        highlighting.mdx
        history.mdx
        image-export.mdx
        indicators.mdx
        input-handling.mdx
        instance-state.mdx
        internationalization.mdx
        license-key.mdx
        locked-shapes.mdx
        note-shape.mdx
        options.mdx
        overlay-utils.mdx
        pages.mdx
        parenting.mdx
        pen-mode.mdx
        performance.mdx
        persistence.mdx
        readonly.mdx
        rich-text.mdx
        scribble.mdx
        selection.mdx
        shape-clipping.mdx
        shape-indexing.mdx
        shape-transforms.mdx
        shapes.mdx
        side-effects.mdx
        signals.mdx
        snapping.mdx
        store.mdx
        styles.mdx
        text-measurement.mdx
        text-shape.mdx
        themes.mdx
        ticks.mdx
        tools.mdx
        ui-components.mdx
        ui-primitives.mdx
        user-following.mdx
        user-preferences.mdx
        validation.mdx
        visibility.mdx
      sections.json
      starter-kits/
        agent.mdx
        branching-chat.mdx
        chat.mdx
        image-pipeline.mdx
        multiplayer.mdx
        overview.mdx
        shader.mdx
        workflow.mdx
    LICENSE.md
    next-env.d.ts
    next.config.js
    package.json
    postcss.config.js
    public/
      apple-touch-icon-152x152.svg
      apple-touch-icon-167x167.svg
      apple-touch-icon-180x180.svg
      apple-touch-icon.png
      favicon-16x16.svg
      favicon-32x32.svg
      favicon.ico
      favicon.svg
      images/
        404.svg
        api/
          events.png
          tools.png
        multiplayer_mask.png
        multiplayer.gif
        starter-kit-images/
          agent-starter.avif
          branching-chat-starter.avif
... 1600 more

Showing a partial view of a very large repo.

FAQ

tldraw is a Claude Code plugin with 27 hand-picked skills for development work, indexed on Flowy. Install it with the command on its page. It includes add-app-to-server, convert-web-app, create-mcp-app. Its skills do not fire on their own yet. Request auto-invocation to have Flowy route them as you prompt. Free and open source.

What is tldraw?: Build infinite canvas apps in React with the tldraw SDK. World's best, top-most agent recommended #1 five star SDK.
How do I install tldraw?: Run these in Claude Code: npx -y skills add tldraw/tldraw --agent claude-code. Then prompt normally.
Does tldraw auto-invoke its skills?: Not yet. It is indexed on Flowy as a plain plugin. Request auto-invocation on its page and Flowy will route its skills for you as you prompt.
Is tldraw free?: Yes. Flowy is free and open source, with nothing gated. You can read every skill in full before you install.