Q: Why do newline characters render literally in tldraw text shapes?

Newline characters render as literal \n in tldraw text shapes created programmatically. Use separate shapes for each line of text instead of embedding line breaks in a single richText value.

Question 1

How do I create tldraw shapes programmatically in React?

Accepted Answer

Use the onMount callback of the Tldraw component to get the Editor instance, then call editor.createShape with a type like text, geo, or arrow plus x, y, and props. Text content goes in props.richText using the toRichText helper.

Question 2

How to extract text from a .tldr file?

Accepted Answer

A .tldr file is JSON with records at data['records']; filter for typeName == 'shape'. Text lives in props.richText as a ProseMirror tree, not props.text, so walk the tree to collect text nodes and sort shapes by (y, x) for reading order.

Question 3

Why do tldraw arrows fail with boundShapeId?

Accepted Answer

Binding-based arrows using boundShapeId throw validation errors when created via createShape. Use point-based arrows instead by setting props.start and props.end as relative coordinates.

Question 4

Can I load an existing .tldr file into the tldraw React app?

Accepted Answer

Yes, place the .tldr file in the public folder, fetch it on mount, and use parseTldrawJsonFile with getSnapshot and loadSnapshot from the SDK. Back up App.tsx first because load-on-mount replaces the current store.

Question 5

Why do newline characters render literally in tldraw text shapes?

Accepted Answer

Newline characters render as literal 
 in tldraw text shapes created programmatically. Use separate shapes for each line of text instead of embedding line breaks in a single richText value.

tldraw-whiteboard

SYSTEM DOCUMENTATION & REQUIREMENTS

Frequently Asked Questions about tldraw-whiteboard

Related Skills

deck-from-outline

space-video-edit

content-creator

excalidraw-slides