a316fd2ab4
This PR adds links to the API reference from within the docs pages. I think we should continue with this as we move forwards with more content. We could tweak the threshold of what we link or don't link. I tried to strike a good balance (maybe linked too much though). We'd want lots of stuff to be clickable, so that users can dive into the API. But we don't want the screen to be a splattering of blue, distracting away from more important stuff. ### Change Type - [x] `documentation` — Changes to the documentation only[^2] [^1]: publishes a `patch` release, for devDependencies use `internal` [^2]: will not publish a new version ### Test Plan 1. Try out some of the newly added links on the docs site. - [ ] Unit Tests - [ ] End to end tests ### Release Notes - Documentation: Added links to API reference in guides.
48 lines
No EOL
2 KiB
Text
48 lines
No EOL
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/5-exploded/ExplodedExample.tsx) for reference. |