Summary

Create an example demonstrating how to add and customize text labels on arrows.

Background

Arrows in tldraw support rich text labels that appear along the arrow path. This is useful for annotating connections in diagrams, flowcharts, and architecture diagrams. There is currently no example showing how to:

1. Create arrows with text labels programmatically
2. Position labels along the arrow using labelPosition
3. Customize label appearance with labelColor and font properties

Suggested implementation

The example should demonstrate:

• Creating arrows with text labels using the richText prop and toRichText() helper
• Adjusting labelPosition (0 = start, 0.5 = middle, 1 = end)
• Setting labelColor to differentiate label color from arrow color
• Using different font styles via the font prop

Relevant code references

• Arrow label positioning: packages/tldraw/src/lib/shapes/arrow/arrowLabel.ts
• Rich text helper: toRichText() function from @tldraw/editor
• Arrow shape props: packages/tlschema/src/shapes/TLArrowShape.ts
  • richText: TLRichText - the label content
  • labelPosition: number - position along the arrow (0-1)
  • labelColor: TLDefaultColorStyle - color of the label text
  • font: TLDefaultFontStyle - font style for the label

Example code snippet

import { createShapeId, toRichText } from 'tldraw'

editor.createShape({
  id: createShapeId(),
  type: 'arrow',
  props: {
    start: { x: 0, y: 0 },
    end: { x: 200, y: 0 },
    richText: toRichText('Connection'),
    labelPosition: 0.5, // Center the label
    labelColor: 'blue',
    font: 'sans',
  },
})

🤖 Generated with Claude Code