Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.tsdraw.com/llms.txt

Use this file to discover all available pages before exploring further.

The @tsdraw/react package includes a toolbar and style panel, configurable via uiOptions.

Toolbar

Hiding

<Tsdraw uiOptions={{ toolbar: { hide: true } }} />

Layout

The parts option controls grouping:
<Tsdraw uiOptions={{ toolbar: { parts: [['pen'], ['undo']] } }} />

Placement

Position relative to the edge:
<Tsdraw uiOptions={{ toolbar: { placement: { anchor: 'bottom-right' } } }} />

Draggable

<Tsdraw uiOptions={{ toolbar: { draggable: true, saveDraggedPosition: true } }} />

Style panel

Hiding

<Tsdraw uiOptions={{ stylePanel: { hide: true } }} />

Custom elements

Add arbitrary overlays:
<Tsdraw
  uiOptions={{
    customElements: [{
      id: 'logo',
      render: () => <div>tsdraw</div>
    }]
  }}
/>

Theming

<Tsdraw theme="light" /> // or "dark", "system"

Cursors

<Tsdraw uiOptions={{ cursor: { getCursor: (ctx) => 'crosshair' } }} />