I have a drawing on beta.tldraw.com that I'm trying to export as PNG, but in the exported file, the arrow bodies are missing:

This happens every time with these particular arrows, but I can't reproduce it with newly-drawn arrows on the same canvas. If I duplicate one of the "bad" arrows, the new arrow also doesn't export properly.

As a workaround, I can just delete and recreate the arrows. But let me know if there's any other info I can give you to help debug this.

Create a toast that displays when background events complete, such as copying to SVG.

We should should a VSCode extension that allows .tldr files to be read and edited from within VSCode.

In the previous version, when a line or shape included text, the text color would match the shape color. I'm seeing a different behavior in the beta. Will there be different functionality in the future where a user can color the text separately from the shape?

Old tl;draw

The text in this screenshot comes from double-clicking the shape and typing in the provided text area. This is not free-form text added separately. The color changes with the color selected for the shape in the color palette.

Beta tl;draw

I created the text in the same way for this screenshot (apart from lines not supporting text any more). The color of the text is always black, regardless of what color I select from the color palette.

If you try to draw an arrow from inside of the shape it goes in the back and we need to move it for it to reappear on top

On the tldraw.com site, users will be able to visit rooms ("/room/some-room-id") in order to collaborate on a project.

I'm in touch with the team at liveblocks to provide the backend for this: there's already some initial architecture for the room that uses their API for presence.

To make it work, we'll need to sync both presence (i.e. who is in the room) and storage (the document).

The new tldraw beta doesn't have the File > Open button to reopen a file I saved to my computer as .tldraw. Where did that go?

tldraw/tldraw-v1#181

It happens when resizing from top to bottom or from left to right:

Expected the same behavior as for the other two directions:

Switching between other types of shapes doesn't change the dimensions.

I think the eraser should have it's own cursor.

The text is always centered regardless of its setting

{
    "shapes": [
        {
            "x": 0.29491460125234426,
            "y": -345.5603412935589,
            "rotation": 0,
            "id": "shape:YvhcYRPOxzC6DG39RZSty",
            "index": "a1",
            "type": "geo",
            "props": {
                "w": 259.70508539874766,
                "h": 95.5603412935589,
                "geo": "rectangle",
                "color": "red",
                "fill": "semi",
                "dash": "solid",
                "size": "s",
                "opacity": "1",
                "font": "draw",
                "text": "Left",
                "align": "start",
                "growY": 0
            },
            "parentId": "page:Y71oOJhEZGD4_0Qqi06ZJ",
            "typeName": "shape"
        },
        {
            "x": 270,
            "y": -345.5603412935589,
            "rotation": 0,
            "id": "shape:iePSorBBbMNMN0kL6XRMW",
            "index": "a2",
            "type": "geo",
            "props": {
                "w": 259.70508539874766,
                "h": 95.5603412935589,
                "geo": "rectangle",
                "color": "red",
                "fill": "semi",
                "dash": "solid",
                "size": "s",
                "opacity": "1",
                "font": "draw",
                "text": "Center",
                "align": "end",
                "growY": 0
            },
            "parentId": "page:Y71oOJhEZGD4_0Qqi06ZJ",
            "typeName": "shape"
        },
        {
            "x": 539.7050853987477,
            "y": -345.5603412935589,
            "rotation": 0,
            "id": "shape:ME7x85WpuTidScOtmhoYz",
            "index": "a3",
            "type": "geo",
            "props": {
                "w": 259.70508539874766,
                "h": 95.5603412935589,
                "geo": "rectangle",
                "color": "red",
                "fill": "semi",
                "dash": "solid",
                "size": "s",
                "opacity": "1",
                "font": "draw",
                "text": "Right",
                "align": "end",
                "growY": 0
            },
            "parentId": "page:Y71oOJhEZGD4_0Qqi06ZJ",
            "typeName": "shape"
        }
    ],
    "rootShapeIds": [
        "shape:YvhcYRPOxzC6DG39RZSty",
        "shape:iePSorBBbMNMN0kL6XRMW",
        "shape:ME7x85WpuTidScOtmhoYz"
    ]
}
  

Example image:

There is a bit of clipping that occurs for the size icon buttons within the styling menu:

For reference, what is seen on Chrome:

Seems like a regression happened with control (Mac) clicking, at least on Firefox.

With debug mode enabled, it looks like a pointer down event isn't firing when pointers are released with control button pressed:

I've started using the beta a bit more and the main difference in UX that I've noticed is the persistence of tooling after a session or interaction has occurred.

In V1, the select tool is always resorted back to after a session completes (ie. drawing a shape!). In V2, said shape tool will instead persist to let more shapes be created. This may be a desired behaviour in V2, but I figured it is worth calling out as I think it is a major UX difference and requires some unlearning.

Following some discussions in the discord channel, it would be good to be able to lock shapes, like in v1.

Steps to recreate

1. Create a new frame
2. Edit frame label
3. Add shapes inside frame
4. Export as image

Expectation: Frame label should be shown
Current: Frame label is not shown

can't give you the tldraw file because the file menu is not present

https://github.com/tldraw/tldraw/blob/main/packages/core/src/inputs.ts#L4

I want to know how the Line4 import works.
There is no paths setting in the tsconfig.

Does anyone familiar with the tsconfig can help me?

When the number of shapes to render on a page is zero, display a button to return to the page's shapes.

The criteria for selection is "if the selection area touches even one pixel of the object it gets selected", and it is inconsistent with some other apps like Inkscape which there it is "if the selection area include all the pixels of the object"

Can we have an option at least that we can specify which selection rule the app would work with?

To me, the latter seems to have a lot of usecases for overlapping objects.

On a separate note, Selection tool keyboard shortcut is set to "V", is there any reason why it is not "S"? (similar to other tools which is basically the first letter?)

Thanks

When loading a new file, the user should be prompted to save their current file.

The initial theme is always dark. We should load it from local storage as soon as possible to avoid the flash when using a light theme.

The original tldraw allows you to pick 1 of 4 fonts. The beta version does not (yet) allow this.

I saw this comment by @TodePond that a font update is incoming.

Will that also introduce that feature?

Thanks for this awesome tool, btw! tldraw ftw

I ran into an odd issue with a new board this morning. For a while, I was able to create text as usual.

Then, for some reason, my text will only go to a certain width and can't be any wider.

Additionally, text that was originally created gets shrunk when it is duplicated.

This is happening across multiple boards on my machine this morning.

Please see this comment on the "Self Hosting" thread (which apparently no-one has really figured out how to run this thing yet?! 😳) -- I thought I'd sit down tonight and try, but then going back over the thread I realised one stickling point.

• Build amazing real‑time collaborative products - Liveblocks

This is essentially a 3rd-party external (yet another) Cloud / SaaS service that tldraw depends on for some (quite useful) feature(s) IMO -- Namely real-time collaboration/viewing of a drawing.

There's a couple of problems with this however:

• This is no longer a "tiny drawing app" as you immediately depend on one or more 3rd-party Cloud/SaaS services. I believe even AWS S3 is required somewhere?
• This is security and privacy concern and basically makes the app unsuitable for self-hosting (at all).

I urge the project maintainers and/or developers to reconsider alternatives. Surely a simple backend can be written using Web Sockets that achieves the same desired behaviour and features? 🤔 -- I understand (anda actively use) HedgeDoc has a similar set of features and requires no 3rd-party Cloud/SaaS services.

Thank you ! 🙏

I'm not sure if this is a bug.

The sponsorship page needs a second pass, with more examples and descriptions of what the app is.

Incorporate design system work by @ilikescience.

Hello creator,

The beta version does not show the images, only its box. To reproduce, simply copy and paste an image into a project in beta.

However, when you export it in a image format, pasted images are displayed.

Not sure if this is how it's expected to work or is this a bug
I have a grouped shapes, binding the arrow to the grouped shape, and automatically the arrow is grouped with the grouped shape but I just want to bind not group it, more info on the video

Drawing long lines, especially within a small space, can make stroke width suddenly increase.

Shrinking the entire drawing causes these to become blown out of proportion. Screenshots:

These were made in https://beta.tldraw.com/r/todepond.com

Wouldn't it be useful if the bounding box automatically appears on the newly created element? We have to select every element manually after it's been created in order to resize/reshape it. At least somewhere should be a toggle option for this feature to be enabled or disabled.

It's good to see that tldraw beta has awesome multiplayer feature!
I have one feature suggestion, and that is peer awareness

Peer awareness is crucial feature in real-time collaborative applications, and tldraw beta does not seem to have that feature :(
It may look like this (original tldarw already implemented named cursor for peer awareness)

• tldraw custom (multi) cursor

  

• tldraw-yorkie (which I implemented for multiplayer tldraw using CRDT store open source Yorkie, I customized tldarw core for namecd cursor)

  

Allow users to copy their drawings to SVG.

• Copy to SVG
• Keyboard shortcuts
• Include styling
• Fix positions
• Fix z ordering
• Copy text

wow once i clicked share and copy the link the page refreshed and this bug was fixed

Ref to Discord Message: https://discord.com/channels/859816885297741824/859816885801713729/1062601133610250324

I clicked something on the minimap and now my canvas is broken.
New project and hard reload don't seem to fix it, but incognito window did

framework-ff25748e596a3c59.js:9 Error: <g> attribute transform: Expected number, "…le(4) translate(NaN,NaN)".

We should publish the tldraw editor as its own NPM package, similar to how excalidraw publishes @excalidraw/excalidraw, so that it can be embedded in implementations other than tldraw.com, such as VSCode extensions.

This project is awesome! adding a favorite toolbar with preferred styles would be awesome like in OneNote

Hi,

I just discovered tldraw and it is awesome!
Congrats on all the work.
I would like to propose a feature to make it easier to diagram things.

Scenario

• Using tldraw as a quick diagraming tool for online meetings
• Need to be able to quickly put up shapes, add some text to them and draw lines from shape-to-shape

Suggestion

• When a user clicks on a shape in the sidebar, then clicks on the canvas, the shape would be created (current behaviour)
• When the user double-clicks on an existing shape on the canvas, the user could add text to the shape (new behaviour) instead of adding more of the same shape of a default size
• [Alternative/Add-on] Add Edit \ Add Text as a quick option alongside Duplicate when right-clicking on a shape

• When a user clicks & drag then the selected shape would be created at the expected user-dragged size

Hope this will be useful, and if you have any questions, let me know.

Cheers,
Alex R

The new font type is not too great, guys. Please, consider leaving the old one, it is beautiful and the condensation allows the text to not be spread all over the screen.

PS. Or consider leaving them both perhaps.

New

Old ✨

I can change to any other language except Chinese-Simplified.
If there's no Chinese version of translation now , maybe I can help with the i18n work.

Small issue report:

On the toolbox it's sometimes hard to hit the left column (on Safari iPad). It will only work if I hit the right half of the button.
I see you're already anticipating something like this and buttons extend to the edge of the screen:

I made a small recording to show it via accessibility features on iPadOS

With that recording I wasn't able to hit the button, but IRL it will work when hitting the right half. Maybe iPadOS is doing something weird with edges (even though there are no actions on the left). 🤷‍ Just wanted to report...

https://www.dropbox.com/s/mahhm9k3yo93g61/RPReplay_Final1668719304.mov?dl=0

I can't make small circles with short text inside on beta but can make them on v1.

• When I make very small circles on beta, and write a number in there, it becomes elongatte (A).
• When I resize it just a bit, it increases to B.

On right-side is the v1 version: small circle with text inside works.

Whenever a new text node is created -- regardless of the interaction -- it is appearing at the top left of my visible canvas. Screen recording with debug mode enabled (note the text in the top-left as I type!). This is on Firefox 106.0.5:

Let me know if you need anything else, beta looks great!

original Tldraw on the left, beta.tldraw on the right

Apple Mac + Chrome

Likely a regression introduced by the project panel changes.