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";