Yjs for Tldraw with Image Support

Hi there, I am using Yjs for collaboration with Tldraw (GitHub - tldraw/tldraw: a very good whiteboard).
I have downloaded the code from this link (yjs-tldraw - CodeSandbox). I basically need help with two things.

1- How to enable image support while using yjs
2- Currently in the demo link above, we are connecting to “wss://demos.yjs.dev” in store.ts file. Basically I need to connect to my own server instead of “wss://demos.yjs.dev”.
Is it possible ? If it is then pls share any example. I am very new to Yjs and Backend development.

Note: In the above sandbox link, there is no UI for importing image bcz they have disabled image via a prop. I updated the Tldraw to latest stable version and also enabled images.
Currently I see this blank rectangle instead of image. My guess is Yjs does n’t store images bcz of it’s long base64 strings.

Thanks in advance !

You can start a local YJS websocket server like this:

HOST=localhost PORT=1234 npx y-websocket

And then connect to ws://localhost:1234

I’m not sure how to add image support, but they are probably best stored outside of YJS given that they are in binary and cannot benefit from CRDT merging.

Thanks @raine for your response. Then what should be the best solution for image support ?
And how to start YJS websocket server on production app e.g. if url is web.xyz.com/abc/efg ?

I’m not sure, I’ve never done that before. But Amazon AWS is good for storing images.

The command is the same, but the port will be different. It depends a lot on your hosting platform. I have a DigitalOcean app that opens port 8080 and specifies a start script of HOST= PORT=8080 npx y-websocket .

Thanks @raine, really appreciate your response

1 Like

Good luck!!! :four_leaf_clover::four_leaf_clover::four_leaf_clover::four_leaf_clover: