TLBaseBinding

Base interface for all binding types in tldraw. Bindings represent relationships between shapes, such as arrows connecting to other shapes or organizational connections.

All default bindings extend this base interface with specific type and property definitions. The binding system enables shapes to maintain relationships that persist through transformations, movements, and other operations.

Custom bindings should be defined by augmenting the TLGlobalBindingPropsMap type and getting the binding type from the TLBinding type.

interface TLBaseBinding<Type extends string, Props extends object> {}

Example

// Define a default binding type
interface TLArrowBinding extends TLBaseBinding<'arrow', TLArrowBindingProps> {}

interface TLArrowBindingProps {
  terminal: 'start' | 'end'
  normalizedAnchor: VecModel
  isExact: boolean
  isPrecise: boolean
  snap: ElbowArrowSnap
}

// Create a binding instance
const arrowBinding: TLArrowBinding = {
  id: 'binding:abc123',
  typeName: 'binding',
  type: 'arrow',
  fromId: 'shape:source1',
  toId: 'shape:target1',
  props: {
    terminal: 'end',
    normalizedAnchor: { x: 0.5, y: 0.5 },
    isExact: false,
    isPrecise: true,
    snap: 'edge',
  },
  meta: {},
}

Parameters

Properties

ID of the source shape in this binding relationship

fromId: TLShapeId

readonly id: TLBindingId

User-defined metadata for extending binding functionality

meta: JsonObject

Binding-specific properties that define behavior and appearance

props: Props

ID of the target shape in this binding relationship

toId: TLShapeId

The specific type of this binding (e.g., 'arrow', 'custom')

type: Type

readonly typeName: 'binding'