[docs] Tighten up wording & structure of Usage page #1624
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
| The `<Tldraw/>` component is the easiest way to get started with tldraw. It combines several lower-level libraries: the `TldrawEditor` component from `@tldraw/editor` and the `TldrawUi` component from `@tldraw/ui`. | ||
|
|
||
| To use the `<Tldraw/>` component, create a file like this one: | ||
| The `<Tldraw>` component is the easiest way to get started. To use it, create a file like this one: |
There was a problem hiding this comment.
This is a bigger edit. I think it's good to get straight to the action here, rather than distract/confuse with info about why it's the best. (We mention it again lower on this page, instead)
Happy to be overuled on this one though
|
|
||
| ```tsx | ||
| import { Tldraw } from '@tldraw/tldraw' | ||
| import '@tldraw/tldraw/tldraw.css' | ||
|
|
||
| export default function TldrawExample() { | ||
| export default function () { |
There was a problem hiding this comment.
Changed this so it's the same as the one on the Introduction page. If it's different, people might think that it's different for a specific reason. If we want to keep the function name, we should add one to the Introduction page too, so that it's consistent.
| @@ -25,28 +23,28 @@ export default function TldrawExample() { | |||
|
|
|||
| ### CSS | |||
|
|
|||
| In order to use the `<Tldraw/>` component, you should also import the `tldraw.css` file from the `@tldraw/tldraw` library. You can alternatively import this file inside of another CSS file using the `@import` syntax. | |||
| In order to use the `<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. | |||
There was a problem hiding this comment.
Changed library to package to match some recent changes that I've done elsewhere. I think there is one tldraw library, which contains multiple packages. It's one very good product, with multiple parts. Not lots of little products.
Also, throughout this file, I'm changing components from
<Tldraw/> to <Tldraw>
I think it's more readable, and it's consistent with the Introduction page.
I do think it's good to write in as a component though! It reminds people that it's just a React component.
|
|
||
| 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 component in a full-screen app, you probably also want to updte your `index.html`'s meta viewport element as shown below. | ||
| 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. |
| ## Server rendering | ||
|
|
||
| The `<Tldraw/>` component can't be server-rendered. If you're using the component in a server-rendered framework (such as Next.js) then you will need to import it dynamically. Check the [examples repository](https://github.com/tldraw/examples) to see examples. | ||
| 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. |
There was a problem hiding this comment.
Changed a double-negative to a positive.
Still a bit wordy though! any ideas?
| ## Using in Next.js, Create React App, Vite, etc. | ||
|
|
||
| Check the [examples repository](https://github.com/tldraw/examples) to see examples of the tldraw component being used in various frameworks. | ||
| Check the [examples repository](https://github.com/tldraw/examples) to see examples of tldraw being used in various frameworks. | ||
|
|
||
| By the way, the `<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. |
There was a problem hiding this comment.
I combined some repeated info together for clarity and conciseness.
apps/docs/content/docs/usage.mdx
Outdated
| The `<Tldraw>` component combines two lower-level components: `<TldrawEditor>` and `<TldrawUi>`. |
There was a problem hiding this comment.
I moved this info down here from above. (see the top comment for more info)
apps/docs/content/docs/usage.mdx
Outdated
| The `<Tldraw>` component combines two lower-level components: `<TldrawEditor>` and `<TldrawUi>`. | ||
|
|
||
| If you want to have more granular control, you can also 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. |
There was a problem hiding this comment.
Changed tense to present here to match the rest of the docs.
This PR tightens up the wording of the Usage docs page, and it restructures it slightly.
See my comments in the code for more info.
Change Type
documentation— Changes to the documentation only1Release Notes
Footnotes
will not publish a new version ↩