Imagine adding a full-featured digital whiteboard, like Miro or FigJam, directly into your React application. That's what tldraw provides. It's an open-source library that gives you an infinite canvas component, ready to be dropped into any project. Users can draw, write, add shapes, and connect ideas, all within an interface you control.

It handles all the complex parts of building a canvas—like drawing tools, selection, and zooming—so you can focus on building your app's features. Let's get it set up.

First, you need to add the tldraw package to your project. Since it's a standard npm package, you can install it with a single command in your terminal.

This command downloads and adds the library to your project's dependencies.

With the package installed, you can now render the canvas component. This requires two steps: importing the Tldraw component itself, and importing its required CSS file for styling.

Here is a basic example of how to render a fullscreen tldraw canvas in a React App component.

Let's break that down.

First, we import the component and the stylesheet: import { Tldraw } from '@tldraw/tldraw' import '@tldraw/tldraw/tldraw.css'

The CSS file is crucial. Without it, the canvas and its UI elements won't look right.

Next, we render the component inside a div. We use inline styles to make this div fixed to the edges of the browser window (position: 'fixed', inset: 0), ensuring the canvas fills the entire screen. Finally, we place the <Tldraw /> component inside it. That's all it takes to get a working canvas.

That's it. You now have a functional, infinite canvas running in your React application.