e3b07631ce
Describe what your pull request does. If appropriate, add GIFs or images showing the before and after. ### Change Type - [ ] `patch` — Bug fix - [ ] `minor` — New feature - [ ] `major` — Breaking change - [ ] `dependencies` — Changes to package dependencies[^1] - [x] `documentation` — Changes to the documentation only[^2] - [ ] `tests` — Changes to any test code only[^2] - [ ] `internal` — Any other changes that don't affect the published package[^2] - [ ] I don't know [^1]: publishes a `patch` release, for devDependencies use `internal` [^2]: will not publish a new version Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
48 lines
2 KiB
Text
48 lines
2 KiB
Text
---
|
|
title: Usage
|
|
status: published
|
|
author: steveruizok
|
|
date: 3/22/2023
|
|
order: 2
|
|
---
|
|
|
|
The [`<Tldraw>`](/gen/tldraw/Tldraw) component is the easiest way to get started. To use it, create a file like this one:
|
|
|
|
```tsx
|
|
import { Tldraw } from '@tldraw/tldraw'
|
|
import '@tldraw/tldraw/tldraw.css'
|
|
|
|
export default function () {
|
|
return (
|
|
<div style={{ position: 'fixed', inset: 0 }} >
|
|
<Tldraw />
|
|
</div>
|
|
)
|
|
}
|
|
```
|
|
|
|
### CSS
|
|
|
|
In order to use the [`<Tldraw>`](/gen/tldraw/Tldraw) component, you should also import the `tldraw.css` file from the `@tldraw/tldraw` package. You can alternatively import this file inside of another CSS file using the `@import` syntax.
|
|
|
|
You can overwrite these files with other CSS or copy the contents into a different file and import that instead.
|
|
|
|
### HTML
|
|
|
|
If you're using the [`<Tldraw>`](/gen/tldraw/Tldraw) component in a full-screen app, you probably also want to update your `index.html`'s meta viewport element as shown below.
|
|
|
|
```html
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
|
|
```
|
|
|
|
This may not be critical to [`<Tldraw>`](/gen/tldraw/Tldraw) performing correctly, however some features (such as safe area positioning) will only work correctly if these viewport options are set.
|
|
|
|
## Using in Next.js, Create React App, Vite, etc.
|
|
|
|
Check the [examples repository](https://github.com/tldraw/examples) to see examples of tldraw being used in various frameworks.
|
|
|
|
By the way, the [`<Tldraw>`](/gen/tldraw/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.
|
|
|
|
## Going deeper
|
|
|
|
The [`<Tldraw>`](/gen/tldraw/Tldraw) component combines two lower-level components: [`<TldrawEditor>`](/gen/editor/TldrawEditor) and [`<TldrawUi>`](gen/ui/TldrawUi). If you want to have more granular control, you can use those lower-level components directly. See [this example](https://github.com/tldraw/tldraw/blob/main/apps/examples/src/examples/ExplodedExample.tsx) for reference.
|