---
title: Starter kits
sidebarTitle: Overview
status: published
author: tldraw
date: 1/30/2026
order: 1
keywords:
  - starter kit
  - templates
  - examples
---

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.

---

## Create with tldraw

You can access starter kits using the `npm create tldraw@latest` command:

```bash
npm create tldraw@latest
```

Or by using a template repository on [GitHub](https://github.com/orgs/tldraw/repositories).

---

## Available kits

### [Workflow](/starter-kits/workflow)

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' }}
/>

### [Chat](/starter-kits/chat)

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' }}
/>

### [Agent](/starter-kits/agent)

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' }}
/>

### [Image pipeline](/starter-kits/image-pipeline)

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' }}
/>

### [Branching chat](/starter-kits/branching-chat)

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' }}
/>

### [Multiplayer](/starter-kits/multiplayer)

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' }}
/>

### [Shader](/starter-kits/shader)

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' }}
/>

---

## Why build with starter kits

<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>

<br />

<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>

    <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>

    <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.

  </Feature>

  </div>

---

Starter kits use the same [license](/community/license) as the tldraw SDK.