At the moment the
@tldraw/tldraw package is in beta. We also ship a canary version which is always up to date with the main branch of tldraw repository.
First, install the
@tldraw/tldraw package using
@beta for the latest beta release.
You can use the
Tldraw component inside of any React component.
It's important that the
Tldraw component is wrapped in a parent container that has an explicit size. Its height and width are set to
100%, so it will fill its parent container.
In addition to the
Tldraw component itself, you should also import the
tldraw.css file from the
You can alternatively import this file inside of another CSS file using the
If you'd like to deeply change the way that tldraw looks, you can copy the
tldraw.css file into a new CSS file, make your changes, and import that instead.
We also use Inter as the default tldraw font. You can import this font however you like (or use a different font!) but here's the CSS import from Google fonts that we use:
If you're using the
Tldraw component in a full-screen app, you probably also want to update your
index.html's meta viewport element as shown below.
This may not be critical to
Tldraw performing correctly, however some features (such as safe area positioning) will only work correctly if these viewport options are set.
Tldraw component can't be server-rendered. If you're using the component in a server-rendered framework (such as Next.js) then you need to import it dynamically.
If you're using a bundler like webpack or rollup, you can import the assets directly from the
@tldraw/assets package. Here you can use
getAssetUrlsByMetaUrl helper function:
Visit our framework examples repository to see examples of tldraw being used in various frameworks.
In order to use the
Tldraw component, the app must be able to find certain assets. These are contained in the
translations folders. We offer a few different ways of making these assets available to your app.
By default we serve these assets from a public CDN called unpkg, so everything should work out of the box and is a good way to get started.
If you would like to customize some of the assets you can pass the customizations to our
Tldraw component. For example, to use a custom icon for the
hand tool you can do the following:
This will use the custom icon for the
hand tool and the default assets for everything else.
If you want more flexibility you can also host these assets yourself:
- Download the
translationsfolders from the assets folder of the tldraw repository.
- Place the folders in your project's public path.
assetUrlsprop to our
<Tldraw/>component to let the component know where the assets live.
You can use our
getAssetUrls helper function from the
@tldraw/assets package to generate these urls for you.
While these files must be available, you can overwrite the individual files: for example, by placing different icons under the same name or modifying / adding translations.
If you use a CDN for hosting these files you can specify the base url of your assets. To recreate the above option of serving the assets from unpkg you would do the following:
Tldraw component combines two lower-level components:
TldrawUi. If you want to have more granular control, you can use those lower-level components directly. See this example for reference.