{"id":"00e979e6-a007-4f58-9b23-78aace08aed7","shortId":"pr45Ly","kind":"skill","title":"tldraw Infinite Canvas Whiteboard SDK for React","tagline":"tldraw is a feature-complete infinite canvas engine and whiteboard SDK for React. It provides drawing, diagramming, real-time multiplayer collaboration, and AI integrations out of the box, with full extensibility for custom shapes, tools, and UI components.","description":"# tldraw Infinite Canvas Whiteboard SDK for React\n\ntldraw is a feature-complete infinite canvas engine and whiteboard SDK for React. It provides drawing, diagramming, real-time multiplayer collaboration, and AI integrations out of the box, with full extensibility for custom shapes, tools, and UI components.\n\n## Installation\n\nUse the upstream install or setup path that matches your environment:\n- npm i tldraw\n- npx create-tldraw@latest\n- npm i -g corepack\n- yarn\n\nRequirements and caveats from upstream:\n- **Workflow** — drag-and-drop node builder for automation pipelines, visual programming, and no-code platforms\n- **Image pipeline** — node-based builder for image generation pipelines\n- The development server runs the examples app at localhost:5420. You'll need [Node.js](https://nodejs.org) ^20.0.0. Clone the repo, then enable [corepack](https://nodejs.org/api/corepack.html) for the correct yarn vers...\n\nBasic usage or getting-started notes:\n- bash\n- Then, use the <Tldraw /> component in your React app:\n- tsx\n\n- Source: https://github.com/tldraw/tldraw\n- Extracted from upstream docs: https://raw.githubusercontent.com/tldraw/tldraw/HEAD/README.md\n\n## Source\n\n- [Agent Skill Exchange](https://agentskillexchange.com/skills/tldraw-infinite-canvas-whiteboard-sdk/)","tags":["tldraw","infinite","canvas","whiteboard","sdk","skills","agentskillexchange","agent-skills","ai-agents","ai-tools","awesome-list","claude-code"],"capabilities":["skill","source-agentskillexchange","skill-tldraw-infinite-canvas-whiteboard-sdk","topic-agent-skills","topic-ai-agents","topic-ai-tools","topic-awesome-list","topic-claude-code","topic-codex","topic-cursor","topic-llm","topic-mcp","topic-npx-skills","topic-openclaw","topic-skills-catalog"],"categories":["skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/agentskillexchange/skills/tldraw-infinite-canvas-whiteboard-sdk","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add agentskillexchange/skills","source_repo":"https://github.com/agentskillexchange/skills","install_from":"skills.sh"}},"qualityScore":"0.454","qualityRationale":"deterministic score 0.45 from registry signals: · indexed on github topic:agent-skills · 8 github stars · SKILL.md body (1,276 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-18T19:12:51.274Z","embedding":null,"createdAt":"2026-05-18T13:19:57.350Z","updatedAt":"2026-05-18T19:12:51.274Z","lastSeenAt":"2026-05-18T19:12:51.274Z","tsv":"'/api/corepack.html)':176 '/skills/tldraw-infinite-canvas-whiteboard-sdk/)':216 '/tldraw/tldraw':202 '/tldraw/tldraw/head/readme.md':209 '20.0.0':167 '5420':161 'agent':211 'agentskillexchange.com':215 'agentskillexchange.com/skills/tldraw-infinite-canvas-whiteboard-sdk/)':214 'ai':32,79 'app':158,197 'autom':133 'base':146 'bash':189 'basic':182 'box':37,84 'builder':131,147 'canva':3,15,50,62 'caveat':122 'clone':168 'code':140 'collabor':30,77 'complet':13,60 'compon':47,94,193 'corepack':118,173 'correct':179 'creat':112 'create-tldraw':111 'custom':42,89 'develop':153 'diagram':25,72 'doc':206 'drag':127 'drag-and-drop':126 'draw':24,71 'drop':129 'enabl':172 'engin':16,63 'environ':106 'exampl':157 'exchang':213 'extens':40,87 'extract':203 'featur':12,59 'feature-complet':11,58 'full':39,86 'g':117 'generat':150 'get':186 'getting-start':185 'github.com':201 'github.com/tldraw/tldraw':200 'imag':142,149 'infinit':2,14,49,61 'instal':95,99 'integr':33,80 'latest':114 'll':163 'localhost':160 'match':104 'multiplay':29,76 'need':164 'no-cod':138 'node':130,145 'node-bas':144 'node.js':165 'nodejs.org':166,175 'nodejs.org/api/corepack.html)':174 'note':188 'npm':107,115 'npx':110 'path':102 'pipelin':134,143,151 'platform':141 'program':136 'provid':23,70 'raw.githubusercontent.com':208 'raw.githubusercontent.com/tldraw/tldraw/head/readme.md':207 'react':7,21,54,68,196 'real':27,74 'real-tim':26,73 'repo':170 'requir':120 'run':155 'sdk':5,19,52,66 'server':154 'setup':101 'shape':43,90 'skill':212 'skill-tldraw-infinite-canvas-whiteboard-sdk' 'sourc':199,210 'source-agentskillexchange' 'start':187 'time':28,75 'tldraw':1,8,48,55,109,113 'tool':44,91 'topic-agent-skills' 'topic-ai-agents' 'topic-ai-tools' 'topic-awesome-list' 'topic-claude-code' 'topic-codex' 'topic-cursor' 'topic-llm' 'topic-mcp' 'topic-npx-skills' 'topic-openclaw' 'topic-skills-catalog' 'tsx':198 'ui':46,93 'upstream':98,124,205 'usag':183 'use':96,191 'ver':181 'visual':135 'whiteboard':4,18,51,65 'workflow':125 'yarn':119,180","prices":[{"id":"87f1f430-6f42-420f-abd4-69fe5ac6653e","listingId":"00e979e6-a007-4f58-9b23-78aace08aed7","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"agentskillexchange","category":"skills","install_from":"skills.sh"},"createdAt":"2026-05-18T13:19:57.350Z"}],"sources":[{"listingId":"00e979e6-a007-4f58-9b23-78aace08aed7","source":"github","sourceId":"agentskillexchange/skills/tldraw-infinite-canvas-whiteboard-sdk","sourceUrl":"https://github.com/agentskillexchange/skills/tree/main/skills/tldraw-infinite-canvas-whiteboard-sdk","isPrimary":false,"firstSeenAt":"2026-05-18T13:19:57.350Z","lastSeenAt":"2026-05-18T19:12:51.274Z"}],"details":{"listingId":"00e979e6-a007-4f58-9b23-78aace08aed7","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"agentskillexchange","slug":"tldraw-infinite-canvas-whiteboard-sdk","github":{"repo":"agentskillexchange/skills","stars":8,"topics":["agent-skills","ai-agents","ai-tools","awesome-list","claude-code","codex","cursor","llm","mcp","npx-skills","openclaw","skills-catalog"],"license":"mit","html_url":"https://github.com/agentskillexchange/skills","pushed_at":"2026-05-18T19:02:17Z","description":"The open catalog of AI agent skills — 2,000+ security-scanned skills for Claude Code, Cursor, Codex, and more.","skill_md_sha":"b6219e3d4d152059a1ec39d724ccdb3e3ece14d6","skill_md_path":"skills/tldraw-infinite-canvas-whiteboard-sdk/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/agentskillexchange/skills/tree/main/skills/tldraw-infinite-canvas-whiteboard-sdk"},"layout":"multi","source":"github","category":"skills","frontmatter":{"name":"tldraw Infinite Canvas Whiteboard SDK for React","description":"tldraw is a feature-complete infinite canvas engine and whiteboard SDK for React. It provides drawing, diagramming, real-time multiplayer collaboration, and AI integrations out of the box, with full extensibility for custom shapes, tools, and UI components."},"skills_sh_url":"https://skills.sh/agentskillexchange/skills/tldraw-infinite-canvas-whiteboard-sdk"},"updatedAt":"2026-05-18T19:12:51.274Z"}}