Add a tldraw canvas to your React app in just 5 minutes.

The tldraw SDK provides a really simple way to craft infinite canvas experiences for the web. It's perfect for collaborative applications, productivity tools, interfacing with multi-modal AI, and more.

By the end of this guide you will have made something that looks like this:

Follow the steps below to make your own version of it, or clone the repo to skip to the end.

  1. Installation

    • Set up a React project however you normally do. We recommend Vite.
    • Install the tldraw library using this command:
  2. Import Styles

    To import fonts and CSS for tldraw:

    • Create or edit a css file called index.css
    • Copy and paste this into the file:
  3. Render Tldraw Component

    To render the Tldraw component

    • Import the <Tldraw /> component from @tldraw/tldraw
    • Import the index.css CSS file from earlier
    • Wrap the Tldraw component in a <div> element with the style attribute set to: { position: 'fixed', inset: 0 }

    This will render a full screen canvas:

Next Steps

You did it! Now that you have your canvas working, you may be wondering: what next? You can try:

We provide the above examples and more in our examples section. Go build something creative and please do share it with us in our #show-and-tell channel on Discord!

Edit this page
Last edited on 22 March 2023