No description
Find a file
Lu[ke] Wilson b1569c97e0
add docs for TLShapeUtil (#1215)
This PR adds docs for the methods in the TLShapeUtil class.
I think that it's a good page to have docs on, as it shows people what's
possible with the custom shape API.

Currently, our docs are not showing `@param` info for lots of methods,
including the ones added in this PR.
I'll do fix for that in a follow-up PR, so that it's easier to review.

---

Note: Moving forward, we probably want to consider **_where_** these
docs are shown, and how we achieve that.

For example, do we put the docs for these methods in:
* The docs page for the `TLShapeUtil` class?
* The docs pages for the handler types, eg:
[`OnResizeHandler`](http://localhost:3000/gen/editor/OnResizeHandler-type)?
* Both?

Right now, I opted for putting them in the the TLShapeUtil class, as it
keeps them all in one place, and it's what we already do for some
others.

We should consider both - what works best for the docs? and what works
best for code editors?

---

This PR also includes a fix to our pre-commit step that @SomeHats did.
2023-05-05 14:05:25 +00:00
.github Add link to original tldraw within issue template (#1225) 2023-05-05 13:01:30 +00:00
.husky add docs for TLShapeUtil (#1215) 2023-05-05 14:05:25 +00:00
.yarn transfer-out: transfer out 2023-04-25 12:01:25 +01:00
apps New vite-based examples app (#1226) 2023-05-05 13:10:36 +00:00
assets lite: run prettier on js + json files 2023-05-02 16:12:34 +01:00
config readmes 2023-05-04 13:47:56 +01:00
packages add docs for TLShapeUtil (#1215) 2023-05-05 14:05:25 +00:00
scripts New vite-based examples app (#1226) 2023-05-05 13:10:36 +00:00
.eslintignore [chore] update lazyrepo (#1211) 2023-05-02 12:25:26 +00:00
.eslintplugin.js transfer-out: transfer out 2023-04-25 12:01:25 +01:00
.eslintrc.js transfer-out: transfer out 2023-04-25 12:01:25 +01:00
.gitignore Added pHYs to import/export of png images (#1200) 2023-04-29 22:10:01 +00:00
.prettierignore transfer-out: transfer out 2023-04-25 12:01:25 +01:00
.prettierrc [fix] pick a better default language (#1201) 2023-04-29 23:06:02 +00:00
.yarnrc.yml lite: tweak lockfile name 2023-04-25 12:01:38 +01:00
CODE_OF_CONDUCT.md transfer-out: transfer out 2023-04-25 12:01:25 +01:00
CONTRIBUTING.md [improvement] readme / contributing (#1199) 2023-05-03 08:32:52 +00:00
lazy.config.ts [chore] update lazyrepo (#1211) 2023-05-02 12:25:26 +00:00
lerna.json transfer-out: transfer out 2023-04-25 12:01:25 +01:00
LICENSE transfer-out: transfer out 2023-04-25 12:01:25 +01:00
package.json lite: run prettier on js + json files 2023-05-02 16:12:34 +01:00
public-yarn.lock New vite-based examples app (#1226) 2023-05-05 13:10:36 +00:00
README.md readmes 2023-05-04 13:47:56 +01:00

tldraw

tldraw

Welcome to the public monorepo for tldraw.

What is tldraw?

tldraw is a collaborative digital whiteboard available at tldraw.com. Its editor, user interface, and other underlying libraries are open source and available in this repository. They are also distributed on npm. You can use tldraw to create a drop-in whiteboard for your product or as the foundation on which to build your own inifinite canvas applications.

Learn more at tldraw.dev.

Note

This repo contains source code for the current version of tldraw. You can find the source for the original version here.

Installation & Usage

To learn more about using tldraw in your React application, follow our guide here or see this CodeSandbox.

import { Tldraw } from '@tldraw/tldraw'
import '@tldraw/tldraw/editor.css'
import '@tldraw/tldraw/ui.css'

function TldrawExample() {
	return <Tldraw />
}

Local development

To run the local development server, first clone this repo.

Install dependencies:

yarn

Start the local development server:

yarn dev

Open the example project at localhost:5420.

Examples

Our development server contains several examples that demonstrates different ways that you can customize tldraw or use its APIs. Each example is found in the apps/examples/src folder.

  • eg: localhost:5420 for the basic example.
  • eg: localhost:5420/api for the API example.

To learn more about using tldraw, visit our docs.

About this repository

Top-level layout

This repository's contents is divided across four primary sections:

  • /apps contains the source for our applications
  • /packages contains the source for our public packages
  • /scripts contains scripts used for building and publishing
  • /assets contains icons and translations relied on by the app

Applications

Packages

  • editor: the tldraw editor
  • ui: the editor's user interface
  • tldraw: the main tldraw package containing both the editor and the UI
  • primitives: low-level primitives for working with vectors and geometry
  • tlschema: shape definitions and migrations
  • tlsync-client: a library for (locally) syncronizing editor instances
  • tlstore: an in-memory reactive database
  • tlvalidate: a validation library used for run-time validation
  • tlassets: a library for working with tldraw's fonts and translations
  • file-format: a library for working with tldraw's .tldr file format
  • utils: low-level data utilities shared by other libraries

Community

Have questions, comments or feedback? Join our discord or start a discussion.

Contribution

Please see our contributing guide. Found a bug? Please submit an issue.

Distributions

You can find tldraw on npm here.

License

The source code in this repository (as well as our 2.0+ distributions and releases) are currently licensed under Apache-2.0. These licenses are subject to change in our upcoming 2.0 release. If you are planning to use tldraw in a commercial product, please reach out at hello@tldraw.com.

Contact

Find us on Twitter at @tldraw or email hello@tldraw.com. You can also join our discord for quick help and support.