tldraw
npm create tldraw
Quick Start
Build infinite canvas applications with the tldraw SDK
Make whiteboards, diagrams and design tools. The tldraw SDK offers a complete canvas out of the box.
Why tldraw?
Everything below the two display roles collapses to 14px — hierarchy comes from weight and colour.
Canvas infrastructure A complete, production-ready canvas with shapes, tools and collaboration built in.
Accelerate development Skip the backlog with an SDK that handles the hard parts of interaction.
Customize, extend and ship Bring your own shapes, tools and UI — everything is replaceable.
Get involved Join the community shaping the canvas layer for the web.
Powering software across the web
The alt-* family is a complete inverted set — surface, hover, foreground and muted — used wholesale rather than hand-mixed.
● ● ● App.tsx
// the code frame is styled independently of both light and alt chrome
import { Tldraw } from "tldraw"
import "tldraw/tldraw.css"
export default function App () {
return (
<div style ={{ position : "fixed" , inset : 0 }}>
<Tldraw persistenceKey ="my-app" />
</div >
)
}
Small, tight controls
Primary · 40px · 6px · 14/400 — #155dfc hovering to the published #2b7fff
Alt / dark 40px / 6px · tonal 40px / 9px at 12/500
Ghost on the alt surface · 32px / 6px at 12/500
Input — default and focus (border token #e3e3e3)
Canvas tools & shape palette — the only place colour appears
✎ □ ◯ → T
Selection ring — drawn as an INSET shadow so it never shifts layout
rgb(46,46,46) 0 0 0 2px inset
Buttons are deliberately small — 40px at a 6px radius — and the shape palette never leaks into chrome. The input focus ring was not captured on the live site; the focused field above derives its state by stepping the #e3e3e3 input border to the #155dfc primary token. Motion is one curve, cubic-bezier(.4, 0, .2, 1) , at 0.15s and 0.3s.
Line-height below font size
Hero h1 · Archivo · 48/45.12 · 600 · -0.96px Build infinite canvas
Section h2 · Archivo · 32/30.08 · 600 · -0.96px Why tldraw?
Sub-heading h3 · Archivo · 14/19.25 · 500 · normal Canvas infrastructure
Body · Archivo · 14/21 · 400 · #404047 Make whiteboards, diagrams and design tools.
Button label · Archivo · 14 · 400 (500 tonal) Quick Start
Small button · Archivo · 12 · 500 Move focus to canvas
Code · Geist Mono · 12.5/19 · 400 import { Tldraw } from "tldraw"
Three token families
Core semantic
emphasis / heading#000000
Inverted alt-* family — use wholesale, never hand-mixed
Code-frame family
Editor shape palette — canvas only, never chrome
Code syntax (VS Code dark, inside frames)
Overlay
Flat chrome, floating canvas UI
panel — 0 0 2px .16 / 0 2px 3px .24 / 0 2px 6px .1
select ring — rgb(46,46,46) 0 0 0 2px inset
flat chrome — #e3e3e3 hairline only
Chrome is flat and separated by #e3e3e3 hairlines; the layered shadow belongs to floating editor panels. The live embed runs 2 canvas elements and 58 svg nodes. No gradients, backdrop-filter, grain or WebGL anywhere in chrome.
tldraw The infinite canvas SDK for React — make whiteboards, diagrams and design tools.