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 on the canvas. Includes node and connection shapes, automatic connection routing, and a replaceable execution engine.
<StarterKitBento type="workflow" href="/starter-kits/workflow" img={{ src: '/images/starter-kits/workflow.png', alt: 'Workflow Starter Kit' }} />
A canvas for sketching, annotating, and marking up images before sending them to an AI chat.
<StarterKitBento type="chat" href="/starter-kits/chat" img={{ src: '/images/starter-kits/chat.png', alt: 'Chat Starter Kit' }} />
An AI agent that interprets and manipulates drawings and other elements on the canvas.
<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/pipeline.png', alt: 'Image Pipeline Starter Kit' }} />
A visual branching conversation interface for creating 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' }} />
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' }} />
WebGL shader backgrounds that respond to shapes and interactions on the canvas.
<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.