Skip to content

feat(examples): add arrow labels example#8079

Merged
steveruizok merged 1 commit intomainfrom
ani/arrow-labels-example
Feb 28, 2026
Merged

feat(examples): add arrow labels example#8079
steveruizok merged 1 commit intomainfrom
ani/arrow-labels-example

Conversation

@AniKrisn
Copy link
Copy Markdown
Contributor

@AniKrisn AniKrisn commented Feb 24, 2026

Closes #7472

Adds an example demonstrating how to create and customize text labels on arrows. The example covers:

  • Creating arrows with labels using toRichText() and the richText prop
  • Positioning labels along the arrow path with labelPosition (0 = start, 0.5 = middle, 1 = end)
  • Setting independent labelColor distinct from the arrow's color
  • All four font styles: draw, sans, serif, mono
  • Curved arrows with bend

Change type

  • feature

Test plan

  1. Run yarn dev and navigate to the "Arrow labels" example under Editor API
  2. Verify arrows render with correct labels, positions, colors, and fonts
  3. Verify the curved arrow displays with a bend and centered label

Release notes

  • Add arrow labels example showing how to create and customize text labels on arrows.

Note

Low Risk
Adds new example/demo code and documentation only, with no changes to core editor behavior.

Overview
Adds a new Editor API example, Arrow labels, that seeds the canvas with several arrow shapes showcasing labeled arrows via richText/toRichText().

Demonstrates label customization including labelPosition, independent labelColor, multiple font styles, and a curved (bend) arrow, plus a matching README.md to surface the example in the examples catalog.

Written by Cursor Bugbot for commit fea149b. This will update automatically on new commits. Configure here.

Add an example demonstrating how to create and customize text labels
on arrows, covering label positioning, colors, fonts, and curved arrows.

Closes #7472
@vercel
Copy link
Copy Markdown

vercel bot commented Feb 24, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
examples Ready Ready Preview Feb 24, 2026 5:25pm
5 Skipped Deployments
Project Deployment Actions Updated (UTC)
analytics Ignored Ignored Feb 24, 2026 5:25pm
tldraw-docs Ignored Ignored Feb 24, 2026 5:25pm
chat-template Skipped Skipped Feb 24, 2026 5:25pm
tldraw-shader Skipped Skipped Feb 24, 2026 5:25pm
workflow-template Skipped Skipped Feb 24, 2026 5:25pm

Request Review

Copy link
Copy Markdown
Contributor

@kaneel kaneel left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This gives us a lot of very nice examples but why not including some, if not all, the tiny little arrow shapes differences + dotted etcetcetc

Image

@steveruizok steveruizok added this pull request to the merge queue Feb 28, 2026
Merged via the queue into main with commit 7fea263 Feb 28, 2026
24 checks passed
@steveruizok steveruizok deleted the ani/arrow-labels-example branch February 28, 2026 13:44
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

feature New feature

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Arrow labels example

3 participants