TLBaseBinding

Extends BaseRecord<'binding', TLBindingId>.

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

All 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.

interface TLBaseBinding<Type extends string, Props extends object>
  extends BaseRecord<'binding', TLBindingId> {}

Example

// Define a custom binding type
interface MyCustomBinding extends TLBaseBinding<'custom', MyCustomProps> {}

interface MyCustomProps {
  strength: number
  color: string
}

// Create a binding instance
const binding: MyCustomBinding = {
  id: 'binding:abc123',
  typeName: 'binding',
  type: 'custom',
  fromId: 'shape:source1',
  toId: 'shape:target1',
  props: {
    strength: 0.8,
    color: 'red',
  },
  meta: {},
}

Parameters

Properties

ID of the source shape in this binding relationship

fromId: TLShapeId

readonly id: Id

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: TypeName