Update readmes / docs for 2.0 (#3011)
This PR updates the readmes for our 2.0 release. ### Change Type - [x] `documentation` — Changes to the documentation only[^2]
This commit is contained in:
parent
ed1a031a69
commit
fe07e9842e
7 changed files with 3134 additions and 35 deletions
39
README.md
39
README.md
|
@ -1,10 +1,3 @@
|
|||
<div alt style="text-align: center; transform: scale(.5);">
|
||||
<picture>
|
||||
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/tldraw/tldraw/main/assets/github-hero-dark-2.png"/>
|
||||
<img alt="tldraw" src="https://raw.githubusercontent.com/tldraw/tldraw/main/assets/github-hero-light-2.png"/>
|
||||
</picture>
|
||||
</div>
|
||||
|
||||
# tldraw
|
||||
|
||||
Welcome to the public monorepo for [tldraw](https://github.com/tldraw/tldraw). tldraw is a library for creating infinite canvas experiences in React. It's the software behind the digital whiteboard [tldraw.com](https://tldraw.com).
|
||||
|
@ -12,6 +5,29 @@ Welcome to the public monorepo for [tldraw](https://github.com/tldraw/tldraw). t
|
|||
- Read the docs and learn more at [tldraw.dev](https://tldraw.dev).
|
||||
- Learn about [our license](https://github.com/tldraw/tldraw#License).
|
||||
|
||||
## Installation
|
||||
|
||||
```bash
|
||||
npm i tldraw
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
```tsx
|
||||
import { Tldraw } from 'tldraw'
|
||||
import 'tldraw/tldraw.css'
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<div style={{ position: 'fixed', inset: 0 }}>
|
||||
<Tldraw />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
Learn more at [tldraw.dev](https://tldraw.dev).
|
||||
|
||||
## Local development
|
||||
|
||||
The local development server will run our examples app. The basic example will show any changes you've made to the codebase.
|
||||
|
@ -21,22 +37,22 @@ To run the local development server, first clone this repo.
|
|||
Install dependencies:
|
||||
|
||||
```bash
|
||||
yarn
|
||||
yarn i
|
||||
```
|
||||
|
||||
Start the local development server:
|
||||
|
||||
```bash
|
||||
yarn dev
|
||||
yarn run dev
|
||||
```
|
||||
|
||||
Open the example project at `localhost:5420`.
|
||||
|
||||
## License
|
||||
|
||||
tldraw's source code and distributed packages are provided under the non-commercial [tldraw license](https://github.com/tldraw/tldraw/blob/master/LICENSE.md).
|
||||
tldraw's source code and distributed packages are provided under the non-commercial [tldraw license](https://github.com/tldraw/tldraw/blob/main/LICENSE.md).
|
||||
|
||||
This license does not permit commercial use. If you wish to use tldraw in a commercial product or enterprise, you will need to purchase a commercial license. To obtain a commercial license, please contact us at [hello@tldraw.com](mailto:hello@tldraw.com).
|
||||
This license does not permit commercial use. If you wish to use tldraw in a commercial product or enterprise, you will need to purchase a commercial license. To obtain a commercial license, please contact us at [sales@tldraw.com](mailto:sales@tldraw.com).
|
||||
|
||||
To learn more, see our [license](https://tldraw.dev/community/license) page.
|
||||
|
||||
|
@ -53,6 +69,7 @@ Have questions, comments or feedback? [Join our discord](https://discord.gg/rhsy
|
|||
Please see our [contributing guide](https://github.com/tldraw/tldraw/blob/main/CONTRIBUTING.md). Found a bug? Please [submit an issue](https://github.com/tldraw/tldraw/issues/new).
|
||||
|
||||
## Contributors
|
||||
|
||||
<a href="https://github.com/tldraw/tldraw/graphs/contributors">
|
||||
<img src="https://contrib.rocks/image?repo=tldraw/tldraw&max=400&columns=20" width="100%"/>
|
||||
</a>
|
||||
|
|
|
@ -6,13 +6,9 @@ date: 11/7/2023
|
|||
order: 2
|
||||
---
|
||||
|
||||
tldraw uses a dual licensing model to support the development of the project.
|
||||
tldraw's source code and distributed packages are provided under the non-commercial [tldraw license](https://github.com/tldraw/tldraw/blob/main/LICENSE.md).
|
||||
|
||||
The project's source code, libraries, and distributions are provided under the [tldraw licence](https://github.com/tldraw/tldraw/blob/master/LICENSE.md).
|
||||
|
||||
This license does not permit commercial use. If you wish to use this project in a commercial product or enterprise, you need to purchase a commercial license.
|
||||
|
||||
To purchase a commercial license, or for more information, please contact us at [sales@tldraw.com](mailto:sales@tldraw.com).
|
||||
This license does not permit commercial use. If you wish to use tldraw in a commercial product or enterprise, you will need to purchase a commercial license. To obtain a commercial license, please contact us at [sales@tldraw.com](mailto:sales@tldraw.com).
|
||||
|
||||
## Trademarks
|
||||
|
||||
|
|
|
@ -6,19 +6,13 @@ date: 3/22/2023
|
|||
order: 1
|
||||
---
|
||||
|
||||
At the moment the `tldraw` package is in beta. We also ship a canary version which is always up to date with the main branch of tldraw [repository](https://github.com/tldraw/tldraw).
|
||||
## Installation
|
||||
|
||||
## Beta
|
||||
First, install the `tldraw` package:
|
||||
|
||||
First, install the `tldraw` package using `@beta` for the latest beta release.
|
||||
|
||||
<CodeBlock code={{'yarn': 'yarn add tldraw@beta', 'npm': 'npm install tldraw@beta', 'pnpm': 'pnpm add tldraw@beta'}} />
|
||||
|
||||
## Canary
|
||||
|
||||
To get the very latest version, use the [latest canary release](https://www.npmjs.com/package/tldraw?activeTab=versions). Docs for the very latest version are also available at [canary.tldraw.dev](https://canary.tldraw.dev).
|
||||
|
||||
<CodeBlock code={{'yarn': 'yarn add tldraw@canary', 'npm': 'npm install tldraw@canary', 'pnpm': 'pnpm add tldraw@canary'}} />
|
||||
```bash
|
||||
npm i tldraw
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
|
@ -105,7 +99,7 @@ In order to use the [Tldraw](?) component, the app must be able to find certain
|
|||
|
||||
### Using a public CDN
|
||||
|
||||
By default we serve these assets from a [public CDN called unpkg](https://unpkg.com/browse/@tldraw/assets@2.0.0-alpha.12/), so everything should work out of the box and is a good way to get started.
|
||||
By default we serve these assets from a public CDN. 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:
|
||||
|
||||
|
|
|
@ -8,7 +8,7 @@ order: 0
|
|||
|
||||
<h2>Add a tldraw canvas to your React app in just 5 minutes.</h2>
|
||||
|
||||
The tldraw SDK provides a really simple way to craft infinite canvas experiences for the web. It's perfect for collaborative applications, productivity tools, interfacing with multi-modal AI, and more.
|
||||
You can use the tldraw SDK to craft infinite canvas experiences for the web. It's perfect for collaborative whiteboards but you can use it for lots of other things, too.
|
||||
|
||||
By the end of this guide you will have made something that looks like this:
|
||||
|
||||
|
@ -20,7 +20,7 @@ By the end of this guide you will have made something that looks like this:
|
|||
- Install the tldraw library using this command:
|
||||
|
||||
```bash
|
||||
npm install @tldraw/tldraw@beta
|
||||
npm install tldraw
|
||||
```
|
||||
|
||||
### 2. Import Styles
|
||||
|
@ -32,7 +32,7 @@ To import fonts and CSS for tldraw:
|
|||
|
||||
```CSS
|
||||
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@500;700;&display=swap");
|
||||
@import url("@tldraw/tldraw/tldraw.css");
|
||||
@import url("tldraw/tldraw.css");
|
||||
|
||||
body {
|
||||
font-family: "Inter";
|
||||
|
@ -43,14 +43,14 @@ body {
|
|||
|
||||
To render the Tldraw component
|
||||
|
||||
- Import the `<Tldraw />` component from `@tldraw/tldraw`
|
||||
- Import the `<Tldraw />` component from the tldraw` package
|
||||
- Import the `index.css` CSS file from earlier
|
||||
- Wrap the Tldraw component in a `<div>` element with the style attribute set to: `{ position: 'fixed', inset: 0 }`
|
||||
|
||||
This will render a full screen canvas:
|
||||
|
||||
```javascript
|
||||
import { Tldraw } from "@tldraw/tldraw";
|
||||
import { Tldraw } from "tldraw";
|
||||
import "./index.css";
|
||||
|
||||
export default function App() {
|
||||
|
|
|
@ -99,7 +99,7 @@
|
|||
},
|
||||
{
|
||||
"id": "tldraw",
|
||||
"title": "tldraw",
|
||||
"title": "@tldraw/tldraw",
|
||||
"description": "",
|
||||
"groups": [
|
||||
{
|
||||
|
|
|
@ -505,6 +505,7 @@ body {
|
|||
}
|
||||
|
||||
.article p code,
|
||||
.article li code,
|
||||
.article td code {
|
||||
background-color: var(--color-tint-0);
|
||||
font-size: 15px;
|
||||
|
|
3091
packages/namespaced-tldraw/tldraw.css
Normal file
3091
packages/namespaced-tldraw/tldraw.css
Normal file
File diff suppressed because it is too large
Load diff
Loading…
Reference in a new issue