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
|
# 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).
|
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).
|
- Read the docs and learn more at [tldraw.dev](https://tldraw.dev).
|
||||||
- Learn about [our license](https://github.com/tldraw/tldraw#License).
|
- 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
|
## Local development
|
||||||
|
|
||||||
The local development server will run our examples app. The basic example will show any changes you've made to the codebase.
|
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:
|
Install dependencies:
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
yarn
|
yarn i
|
||||||
```
|
```
|
||||||
|
|
||||||
Start the local development server:
|
Start the local development server:
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
yarn dev
|
yarn run dev
|
||||||
```
|
```
|
||||||
|
|
||||||
Open the example project at `localhost:5420`.
|
Open the example project at `localhost:5420`.
|
||||||
|
|
||||||
## License
|
## 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.
|
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).
|
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
|
## Contributors
|
||||||
|
|
||||||
<a href="https://github.com/tldraw/tldraw/graphs/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%"/>
|
<img src="https://contrib.rocks/image?repo=tldraw/tldraw&max=400&columns=20" width="100%"/>
|
||||||
</a>
|
</a>
|
||||||
|
|
|
@ -6,13 +6,9 @@ date: 11/7/2023
|
||||||
order: 2
|
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 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).
|
||||||
|
|
||||||
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).
|
|
||||||
|
|
||||||
## Trademarks
|
## Trademarks
|
||||||
|
|
||||||
|
|
|
@ -6,19 +6,13 @@ date: 3/22/2023
|
||||||
order: 1
|
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.
|
```bash
|
||||||
|
npm i tldraw
|
||||||
<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'}} />
|
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|
||||||
|
@ -105,7 +99,7 @@ In order to use the [Tldraw](?) component, the app must be able to find certain
|
||||||
|
|
||||||
### Using a public CDN
|
### 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:
|
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>
|
<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:
|
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:
|
- Install the tldraw library using this command:
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
npm install @tldraw/tldraw@beta
|
npm install tldraw
|
||||||
```
|
```
|
||||||
|
|
||||||
### 2. Import Styles
|
### 2. Import Styles
|
||||||
|
@ -32,7 +32,7 @@ To import fonts and CSS for tldraw:
|
||||||
|
|
||||||
```CSS
|
```CSS
|
||||||
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@500;700;&display=swap");
|
@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 {
|
body {
|
||||||
font-family: "Inter";
|
font-family: "Inter";
|
||||||
|
@ -43,14 +43,14 @@ body {
|
||||||
|
|
||||||
To render the Tldraw component
|
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
|
- 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 }`
|
- 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:
|
This will render a full screen canvas:
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
import { Tldraw } from "@tldraw/tldraw";
|
import { Tldraw } from "tldraw";
|
||||||
import "./index.css";
|
import "./index.css";
|
||||||
|
|
||||||
export default function App() {
|
export default function App() {
|
||||||
|
|
|
@ -99,7 +99,7 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": "tldraw",
|
"id": "tldraw",
|
||||||
"title": "tldraw",
|
"title": "@tldraw/tldraw",
|
||||||
"description": "",
|
"description": "",
|
||||||
"groups": [
|
"groups": [
|
||||||
{
|
{
|
||||||
|
|
|
@ -505,6 +505,7 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
.article p code,
|
.article p code,
|
||||||
|
.article li code,
|
||||||
.article td code {
|
.article td code {
|
||||||
background-color: var(--color-tint-0);
|
background-color: var(--color-tint-0);
|
||||||
font-size: 15px;
|
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