{ "markdown": "
\n\t\n\t\t\n\t\t\"tldraw\"\n\t\n
\n\n

\n \"npm\"\n \"npm\n \"Discord\"\n \"Ask\n

\n\n

\n Build infinite canvas apps in React with the tldraw SDK.\n

\n\n

\n Docs · Examples · Starter kits\n

\n\n## Feature highlights\n\ntldraw 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.\n\n- **Multiplayer** — self-hostable real-time collaboration with [`@tldraw/sync`](https://tldraw.dev/docs/sync)\n- **Drawing and diagramming** — pressure-sensitive drawing, geometric shapes, rich text, arrows, snapping to shapes, edge scrolling, image and video support, image export\n- **Runtime API** - drive the canvas at runtime with the Editor API\n- **Fully extensible** — custom [shapes](https://tldraw.dev/docs/shapes), [tools](https://tldraw.dev/docs/tools), [bindings](https://tldraw.dev/sdk-features/bindings), [UI components](https://tldraw.dev/sdk-features/ui-components), side effects, and event hooks\n- **AI integrations** — canvas primitives for [building with LLMs](https://tldraw.dev/docs/ai)\n- **DOM canvas** — web rendering supports anything the browser supports, including embedded websites from YouTube, Figma, GitHub, [and more](https://tldraw.dev/sdk-features/embed-shape)\n- **Broad support** — works in any browser across desktop, touch screens, tablets, and mobile devices\n\n## Who's using tldraw\n\nThe tldraw SDK powers canvas experiences in products from [Google](https://about.google), [Shopify](https://www.shopify.com), [BlackRock](https://www.blackrock.com), [Autodesk](https://blogs.autodesk.com/forma/2024/06/20/forma-board-collaborative-tool-for-architects/), [ClickUp](https://tldraw.dev/blog/clickup), [Replit](https://docs.replit.com/replitai/canvas), [Google Stitch](https://stitch.withgoogle.com), [Luma](https://lumalabs.ai/app), [Runway](https://runwayml.com), [Padlet](https://tldraw.dev/blog/padlet), [Mobbin](https://tldraw.dev/blog/mobbin), [Jam](https://tldraw.dev/blog/jam), [Craft](https://support.craft.do/en/write-and-edit/whiteboards), [Honeycomb](https://www.honeycomb.io/platform/canvas), [SchoolAI](https://schoolai.com/products/powerups), [Brisk](https://www.briskteaching.com/post/boost-whiteboard), [CADChat](https://cadchat.com), [bigpi](https://www.bigpi.ai), [Genio](https://genio.co), [Pollination](https://www.pollination.solutions), [Legendkeeper](https://www.legendkeeper.com), [Matilda](https://www.matilda.io), [Aries](https://aries.com/infinite), [Alai](https://getalai.com), [Dirac](https://www.diracinc.com), and many more.\n\nSee our [showcase](https://tldraw.dev/showcase) for case studies on how teams build with tldraw.\n\n## Quick start\n\nInstall the tldraw package:\n\n```bash\nnpm i tldraw\n```\n\nThen, use the `` component in your React app:\n\n```tsx\nimport { Tldraw } from 'tldraw'\nimport 'tldraw/tldraw.css'\n\nexport default function App() {\n\treturn (\n\t\t
\n\t\t\t\n\t\t
\n\t)\n}\n```\n\n## Starter kits\n\nStarter 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.\n\nStart building with:\n\n```bash\nnpx create-tldraw@latest\n```\n\n- **Multiplayer** — self-hosted real-time collaboration powered by `@tldraw/sync` and Cloudflare Durable Objects, the same stack behind [tldraw.com](https://tldraw.com)\n- **Agent** — AI agents that read, interpret, and modify canvas content\n- **Workflow** — drag-and-drop node builder for automation pipelines, visual programming, and no-code platforms\n- **Chat** — canvas-powered AI chat where users sketch, annotate, and mark up images alongside conversations\n- **Image pipeline** — node-based builder for image generation pipelines\n- **Branching chat** — AI chat with visual branching, letting users explore and compare different conversation paths\n- **Shader** — WebGL shaders that respond to canvas interactions\n\n## Local development\n\nThe 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 version:\n\n```bash\nnpm i -g corepack\n```\n\nInstall dependencies and start the dev server:\n\n```bash\nyarn\nyarn dev\n```\n\n## Documentation\n\nDocumentation for the most recent release can be found on [tldraw.dev/docs](https://tldraw.dev/docs), including [reference docs](https://tldraw.dev/reference/editor/Editor). Our release notes can be found [here](https://tldraw.dev/releases).\n\nFor more agent-friendly docs, see our [LLMs.txt](https://tldraw.dev/llms.txt).\n\nFrom 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.\n\n## Community\n\n- [Discord](https://discord.tldraw.com/?utm_source=github&utm_medium=readme&utm_campaign=sociallink) — questions, feedback, and discussion\n- [Twitter/X](https://twitter.com/tldraw) — news and updates\n- [Submit an issue](https://github.com/tldraw/tldraw/issues/new) — bug reports and feature requests\n\n## Contributing\n\nWe are not accepting contributions at this time. If you've found a bug or have a feature request, please [create an issue](https://github.com/tldraw/tldraw/issues/new/choose) and we can discuss it there. See our [contributing guide](https://github.com/tldraw/tldraw/blob/main/CONTRIBUTING.md) for details.\n\n## License\n\nThe tldraw SDK is provided under the [tldraw license](https://github.com/tldraw/tldraw/blob/main/LICENSE.md). You can use the SDK freely in development. Production use requires a [license key](https://tldraw.dev/pricing). Visit [tldraw.dev](https://tldraw.dev) to learn more.\n\n## Trademarks\n\nCopyright (c) 2024-present tldraw Inc. The tldraw name and logo are trademarks of tldraw.\n\nPlease see our [trademark guidelines](https://github.com/tldraw/tldraw/blob/main/TRADEMARKS.md) for info on acceptable usage.\n\n## Contributors\n\n\n \n\n\n## Star History\n\n\n \n \n \n \"Star\n \n\n", "bytes": 8675, "sha": "db3ce68f8c5f0652fe9724cfb5c64cb98898a64c4776e59e134c6e719296ea00", "repo_slug": "tldraw/tldraw", "fonte": "repo", "truncated": false, "api": "https://agentalog.com/api/listings/mcp_io_github_tldraw_tldraw_cc841bcb/readme" }