Quick Start

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

You can use the tldraw SDK to craft infinite canvas experiences for the web. It's perfect for collaborative whiteboards but you can use it for lots of other things, too.

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

1. Installation

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

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:
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@500;700;&display=swap");
@import url("tldraw/tldraw.css");

body {
  font-family: "Inter";
}

3. Render Tldraw Component

To render the Tldraw component

  • Import the <Tldraw /> component from the tldraw` package
  • 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:

import { Tldraw } from "tldraw";
import "./index.css";

export default function App() {
  return (
    <div style={{ position: 'fixed', inset: 0 }}>
      <Tldraw />
    </div>
  );
}

Next Steps

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
Installation