2.1.4 • Published 3 days ago

@tldraw/tldraw v2.1.4

Weekly downloads
-
License
SEE LICENSE IN LI...
Repository
github
Last release
3 days ago

@tldraw/tldraw

This package contains the tldraw editor as a standalone React component.

Installation

npm i @tldraw/tldraw

or

yarn add @tldraw/tldraw

Usage

Import the TLDraw React component and use it in your app.

import { TLDraw } from '@tldraw/tldraw'

function App() {
  return <TLDraw />
}

Documentation

TLDraw

The TLDraw React component is the tldraw editor exported as a standalone component. You can control the editor through props, or through the TLDrawState's imperative API.

PropTypeDescription
idstring(optional) An id under which to persist the component's state.
documentTLDrawDocument(optional) An initial TLDrawDocument object.
currentPageIdstring(optional) A current page id, referencing the TLDrawDocument object provided via the document prop.
onMount(TLDrawState) => void(optional) A callback function that will be called when the editor first mounts, receiving the current TLDrawState.
onChange(TLDrawState, string) => void(optional) A callback function that will be called whenever the TLDrawState updates. The update will include the current TLDrawState and the reason for the change.

TLDrawDocument

A TLDrawDocument is an object with three properties:

  • id - A unique ID for this document
  • pages - A table of TLPage objects
  • pageStates - A table of TLPageState objects
const tldocument: TLDrawDocument = {
  id: 'doc',
  pages: {
    page1: {
      id: 'page1',
      shapes: {},
      bindings: {},
    },
  },
  pageStates: {
    page1: {
      id: 'page1',
      selectedIds: [],
      currentParentId: 'page1',
      camera: {
        point: [0, 0],
        zoom: 1,
      },
    },
  },
}

Important: In the pages object, each TLPage object must be keyed under its id property. Likewise, each TLPageState object must be keyed under its id. In addition, each TLPageState object must have an id that matches its corresponding page.

In the example above, the page above with the id page1is at tldocument.pages["page1"]. Its corresponding page state has the same id (page1) and is at tldocument.pageStates["page1"].

Shapes

Your TLPage objects may include shapes: objects that fit one of the TLDrawShape interfaces listed below. All TLDrawShapes extends a common interface:

PropertyTypeDescription
idstringA unique ID for the shape.
namestringThe shape's name.
typestringThe shape's type.
parentIdstringThe ID of the shape's parent (a shape or its page).
childIndexnumberThe shape's order within its parent's children, indexed from 1.
pointnumber[]The [x, y] position of the shape.
rotationnumber[](optional) The shape's rotation in radians.
childrenstring[](optional) The shape's child shape ids.
handlesTLHandle{}(optional) A table of TLHandle objects.
isLockedbooleanTrue if the shape is locked.
isHiddenbooleanTrue if the shape is hidden.
isEditingbooleanTrue if the shape is currently editing.
isGeneratedbooleanTrue if the shape is generated.
isAspectRatioLockedbooleanTrue if the shape's aspect ratio is locked.

Important: In order for re-ordering to work correctly, a shape's childIndex values must start from 1, not 0. The page or parent shape's "bottom-most" child should have a childIndex of 1.

The ShapeStyle object is a common style API for all shapes.

PropertyTypeDescription
sizeSizeStyleThe size of the shape's stroke.
dashDashStyleThe style of the shape's stroke.
colorColorStyleThe shape's color.
isFilledboolean(optional) True if the shape is filled.

Draw

PropertyTypeDescription
pointsnumber[][]An array of points as [x, y, pressure].
Rectangle
PropertyTypeDescription
sizenumber[]The [width, height] of the rectangle.

Ellipse

PropertyTypeDescription
radiusnumber[]The [x, y] radius of the ellipse.

Arrow

PropertyTypeDescription
handlesobjectAn object with three TLHandle properties: start, end, and bend.

Text

PropertyTypeDescription
textstringThe shape's text content.

Development

Running unit tests

Run nx test tldraw to execute the unit tests via Jest.

2.1.4

22 days ago

2.1.2

27 days ago

2.1.3

27 days ago

2.1.1

27 days ago

2.1.0

29 days ago

2.0.2

2 months ago

2.0.1

2 months ago

2.0.0

3 months ago

2.0.0-beta.9

3 months ago

2.0.0-beta.8

3 months ago

2.0.0-beta.7

3 months ago

2.0.0-beta.6

3 months ago

2.0.0-beta.4

3 months ago

2.0.0-beta.3

3 months ago

2.0.0-beta.2

4 months ago

2.0.0-beta.1

5 months ago

2.0.0-alpha.19

5 months ago

2.0.0-alpha.18

6 months ago

2.0.0-alpha.17

7 months ago

2.0.0-alpha.16

7 months ago

2.0.0-alpha.15

8 months ago

2.0.0-alpha.14

11 months ago

2.0.0-alpha.13

11 months ago

2.0.0-alpha.7

1 year ago

2.0.0-alpha.8

1 year ago

2.0.0-alpha.9

1 year ago

2.0.0-alpha.11

1 year ago

2.0.0-alpha.3

1 year ago

2.0.0-alpha.10

1 year ago

2.0.0-alpha.4

1 year ago

2.0.0-alpha.5

1 year ago

2.0.0-alpha.6

1 year ago

2.0.0-alpha.2

1 year ago

2.0.0-alpha.12

1 year ago

1.29.0

1 year ago

1.29.1

1 year ago

1.29.2

1 year ago

1.27.1

1 year ago

1.28.0

1 year ago

1.26.4

1 year ago

1.27.0

1 year ago

1.25.0

2 years ago

1.26.0

2 years ago

1.26.3

1 year ago

1.26.1

2 years ago

1.26.2

2 years ago

1.21.0

2 years ago

1.22.0

2 years ago

1.22.1

2 years ago

1.23.0

2 years ago

1.24.1

2 years ago

1.24.2

2 years ago

1.24.0

2 years ago

1.24.5

2 years ago

1.24.3

2 years ago

1.24.4

2 years ago

1.18.1

2 years ago

1.18.0

2 years ago

1.18.3

2 years ago

1.18.2

2 years ago

1.19.0

2 years ago

1.19.1

2 years ago

1.17.2

2 years ago

1.17.1

2 years ago

1.17.0

2 years ago

1.20.0

2 years ago

1.14.1

2 years ago

1.14.0

2 years ago

1.14.2

2 years ago

1.15.0

2 years ago

1.11.1

2 years ago

1.15.1

2 years ago

1.12.3

2 years ago

1.12.2

2 years ago

1.12.1

2 years ago

1.12.0

2 years ago

1.12.6

2 years ago

1.12.5

2 years ago

1.16.0

2 years ago

1.12.4

2 years ago

1.13.0

2 years ago

1.16.0-next.0

2 years ago

1.10.0

2 years ago

1.11.0

2 years ago

1.9.3

2 years ago

1.9.1

2 years ago

1.9.0

2 years ago

1.9.2

2 years ago

1.6.1

2 years ago

1.6.0

2 years ago

1.5.2

2 years ago

1.5.1

2 years ago

1.5.0

2 years ago

1.8.1

2 years ago

1.8.0

2 years ago

1.4.3

2 years ago

1.7.0

2 years ago

1.2.8

2 years ago

1.2.7

2 years ago

1.2.6

2 years ago

1.2.5

2 years ago

1.2.4

2 years ago

1.2.3

2 years ago

1.2.2

2 years ago

1.2.10

2 years ago

1.1.1

3 years ago

1.1.0

3 years ago

1.1.8

2 years ago

1.1.7

2 years ago

1.1.6

2 years ago

1.1.5

2 years ago

1.1.4

2 years ago

1.1.3

2 years ago

1.1.2

3 years ago

1.2.9

2 years ago

0.1.17

3 years ago

1.0.2

3 years ago

1.0.1

3 years ago

1.0.0

3 years ago

0.1.11

3 years ago

0.1.12

3 years ago

0.1.13

3 years ago

1.4.1

2 years ago

1.4.0

2 years ago

1.0.4

3 years ago

1.0.3

3 years ago

0.1.7

3 years ago

1.3.0

2 years ago

0.1.0

3 years ago

0.1.2

3 years ago

0.1.1

3 years ago

0.1.4

3 years ago

0.1.3

3 years ago

0.1.6

3 years ago

0.0.133

3 years ago

0.0.129

3 years ago

0.0.131

3 years ago

0.0.130

3 years ago

0.0.132

3 years ago

0.0.126

3 years ago

0.0.125

3 years ago

0.0.109

3 years ago

0.0.108

3 years ago

0.0.117

3 years ago

0.0.116

3 years ago

0.0.115

3 years ago

0.0.114

3 years ago

0.0.119

3 years ago

0.0.118

3 years ago

0.0.113

3 years ago

0.0.112

3 years ago

0.0.111

3 years ago

0.0.110

3 years ago

0.0.120

3 years ago

0.0.124

3 years ago

0.0.123

3 years ago

0.0.122

3 years ago

0.0.121

3 years ago

0.0.107

3 years ago

0.0.106

3 years ago

0.0.105

3 years ago

0.0.104

3 years ago

0.0.103

3 years ago

0.0.97

3 years ago

0.0.98

3 years ago

0.0.99

3 years ago

0.0.102

3 years ago

0.0.101

3 years ago

0.0.100

3 years ago

0.0.96

3 years ago

0.0.95

3 years ago

0.0.94

3 years ago

0.0.90

3 years ago

0.0.91

3 years ago

0.0.92

3 years ago

0.0.93

3 years ago

0.0.89

3 years ago

0.0.84

3 years ago

0.0.85

3 years ago

0.0.86

3 years ago

0.0.83

3 years ago

0.0.81

3 years ago

0.0.74-beta.1

3 years ago

0.0.75

3 years ago

0.0.76

3 years ago

0.0.77

3 years ago

0.0.79

3 years ago

0.0.70

3 years ago

0.0.71

3 years ago

0.0.72

3 years ago

0.0.62

3 years ago

0.0.63

3 years ago

0.0.64

3 years ago

0.0.65

3 years ago

0.0.66

3 years ago

0.0.67

3 years ago

0.0.68

3 years ago

0.0.69

3 years ago

0.0.60

3 years ago

0.0.61

3 years ago

0.0.59

3 years ago

0.0.58

3 years ago

0.0.51

3 years ago

0.0.52

3 years ago

0.0.53

3 years ago

0.0.54

3 years ago

0.0.55

3 years ago

0.0.56

3 years ago

0.0.57

3 years ago

0.0.50

3 years ago

0.0.48

3 years ago

0.0.49

3 years ago

0.0.42

3 years ago

0.0.46

3 years ago

0.0.47

3 years ago

0.0.40

3 years ago

0.0.41

3 years ago

0.0.37

3 years ago

0.0.38

3 years ago

0.0.39

3 years ago

0.0.32

3 years ago

0.0.33

3 years ago

0.0.34

3 years ago

0.0.35

3 years ago

0.0.30

3 years ago

0.0.26

3 years ago

0.0.27

3 years ago

0.0.28

3 years ago

0.0.29

3 years ago

0.0.22

3 years ago

0.0.23

3 years ago

0.0.24

3 years ago

0.0.20

3 years ago

0.0.21

3 years ago

0.0.15

3 years ago

0.0.17

3 years ago

0.0.19

3 years ago

0.0.11

3 years ago

0.0.8

3 years ago

0.0.5

3 years ago

0.0.6

3 years ago

0.0.4

3 years ago

0.0.3

3 years ago

0.0.2

3 years ago