apps/docs/content/starter-kits/overview.mdx
Starter kits provide example implementations of common canvas-based use cases. Use them to prototype ideas or as the foundation for new projects. The source code is yours to hack on.
You can access starter kits using the npm create tldraw@latest command:
npm create tldraw@latest
Or by using a template repository on GitHub.
Build visual tools where users drag, connect and execute nodes to build automation pipelines within a canvas interface. Set up your first workflow builder in minutes, then customize nodes and behaviors for your specific use case. Drag-and-drop nodes, automatic connection routing, and execution management out of the box.
<StarterKitBento type="workflow" href="/starter-kits/workflow" img={{ src: '/images/starter-kits/workflow.png', alt: 'Workflow Starter Kit' }} />
Try the Workflow starter kit.
Canvas for sketching, annotation, and markup before sending to AI.
<StarterKitBento type="chat" href="/starter-kits/chat" img={{ src: '/images/starter-kits/chat.png', alt: 'Chat Starter Kit' }} />
Try the Chat starter kit.
Enabling AI agents to interpret and interact with canvas drawings and elements.
<StarterKitBento type="agent" href="/starter-kits/agent" img={{ src: '/images/starter-kits/agent.png', alt: 'Agent Starter Kit' }} />
Visual node-based builder for AI image generation pipelines. Chain prompts, models, and processing steps to create complex image workflows with real-time preview.
<StarterKitBento type="image-pipeline" href="/starter-kits/image-pipeline" img={{ src: '/images/starter-kits/image-pipeline.png', alt: 'Image Pipeline Starter Kit' }} />
Try the Image pipeline starter kit.
Visual branching conversation interface that lets you create interactive chat trees with AI integration.
<StarterKitBento type="branching" href="/starter-kits/branching-chat" img={{ src: '/images/starter-kits/branching.png', alt: 'Branching Starter Kit' }} />
Try the Branching chat starter kit.
Self-hosted tldraw with real-time multiplayer collaboration powered by tldraw sync and Cloudflare Durable Objects.
<StarterKitBento type="multiplayer" href="/starter-kits/multiplayer" img={{ src: '/images/starter-kits/multi.png', alt: 'Multiplayer Starter Kit' }} />
Try the Multiplayer starter kit.
Integrate WebGL shaders with tldraw, creating dynamic backgrounds that respond to canvas interactions.
<StarterKitBento type="shader" href="/starter-kits/shader" img={{ src: '/images/starter-kits/shader.png', alt: 'Shader Starter Kit' }} />
<CheckItem>Complete starter code built around the tldraw SDK</CheckItem> <CheckItem>Ready for real-time collaboration</CheckItem> <CheckItem>Custom shape systems and tool implementations</CheckItem>
<div className="flex flex-col gap-4"> <Feature icon="bolt" title="Ship features in weeks, not months"> Skip the months of research and implementation. Each kit provides tested solutions for complex canvas interactions. </Feature><Feature icon="cube" title="Production-ready from day one">
Start further, prototype faster. Get extra features, patterns, and components relevant to your use-case.
<Feature icon="wrench" title="Built for customization">
Use as a reference or the foundation for something new. The starter kit code is MIT licensed and free to hack with.
<Feature icon="shield" title="Validated by engineering teams">
Built around common use cases. Every component uses the SDK's extensible APIs. Add custom shapes, tools, and behaviors on top.
Starter kits use the same license as the tldraw SDK.