Collaboration mode - Self-hosting vs Collab on top of <Excalidraw/>

[pw-web]

Hi team
Thanks for creating Excalidraw!

I am looking to integrate it in my React webapp. I used Excalidraw and it is working great, but I also need to implement collaboration mode.

I looked at these options:

1. We can implement own collab mode on top of the Excalidraw component - as suggested by Aakansha here
2. We can self-host Excalidraw - as suggested here

Issues:

1. I will already be using WebSockets in my application for other functionalities. But developing own collab mode seems difficult, time-consuming, and prone to bugs, looking at comments of people who have tried it before.
2. Self-hosting causes a different problem for me. I don't need only Excalidraw on the page, I want to render it inside a
   along with other components of my application.

How should I proceed? What would the team suggest me to do?
Thanks

[pw-web]

Follow-up question regarding developing collab on top of component:

I was also reading Excalidraw's P2P collab blog. I saw several operations being performed on collab data like adding, deleting, dealing with conflicts. And it was mentioned there is more to do.

1. Do we also have to take care of these if we are implementing collab on top of the component?
2. Can we rely on CRDT libraries like Automerge, ShareDB, Yjs, Convergence, etc, for collaborative data merging?

[ad1992]

We have our own reconcilation algo which takes care of resolving merge conflicts.

Do we also have to take care of these if we are implementing collab on top of the component?

Yes if you are implementing collaboration you will have to take care of it.

Can we rely on CRDT libraries like Automerge, ShareDB, Yjs, Convergence, etc, for collaborative data merging?

Since collaboration is something consumer is taking care of so its completely up to you how you want to implement it. We trigger onChange callback whenever there is some change in excalidraw so there might be some additional data you might need along with elements and appState so that we can discuss based on the implementation.

[pw-web]

My specific use-case is to let one person draw and multiple other people can see (in view mode). Is there any easier way to achieve this?

Can we export the data from the writer, send it over to others via sockets, import in on the readers' side? Will that be fast enough for the users?

[Yoname]

Hi, @pw-web I release a WebSocket project that helps build multiplayer apps, we just release an integration of Excalidraw and multiplayer cursor chat. https://github.com/yomorun/presencejs Hope this will help, and feel free to reach out [email protected]

[ad1992]

Hi @pw-web 👋🏻 thanks for the question!
As the npm package or self-host Excalidraw doesn't come with collaboration so the consumer needs to implement it themselves.

As per your requirement you want to implement collaboration in excalidraw without writing from scratch. If you don't want to implement your own collaboration right now and reuse excalidraw's collaboration algorithm.
You can try out the below steps 👇🏻

1. Clone excalidraw-room and host the server yourself
2. Clone excalidraw and update the server end point as well.
3. Update the entry to excalidraw-app/index.tsx so that the bundle contains the package with collaboration.
4. Release the npm package and start using it.

If you want to avoid steps 2-4 and have your own implementation, you can take a look at collaboration of how we do at excalidraw and reuse the same at your end so you don't have to clone the excalidraw repo and change end points etc.

Though steps 2-4 will help you implement collab faster but I will suggest you avoid cloning excalidraw repo so you need not maintain your own npm package and rather copy the code which you want to use so you can modify it as well if needed.

Let me know if this helps!

We will soon try to make this process easier for consumers so its easy to use collaboration with excalidraw with your own servers.

[antwacky]

I got this working on docker, you just need to set REACT_APP_WS_SERVER_URL as an arg in the Dockerfile and then build the image (as well as doing step 3 mentioned in the original post).

I also have a working helm chart that will deploy excalidraw with collaboration. If anyone wants it, hook me up.

@UnionJoin I would like to see your helm chart and container that enables collaboration. I couldn't find a related repo in your user account. If you just did it on your local machine, I'll probably set up some CI to build this. However, the helm chart would be useful instead of building it myself.

I'll post this in the next week or so.

[JonasJR]

This would really be interesting!! Hope to see that helm chart soon @antwacky

[ranoble]

Double thumbs up on this @antwacky, also looking forward to taking a gander.

[ryan-mcd]

I got tired of waiting, and decided to produce this myself.

• You can obtain the image via ghcr at https://github.com/ryan-mcd/containers/pkgs/container/excalidraw-collab.
• I don't use kubernetes manifests directly; I use flux to deploy bjw-s's app-template helm chart: https://github.com/bjw-s/helm-charts. You can find my example at https://github.com/ryan-mcd/gitops-home-cluster/tree/main/cluster/apps/home/excalidraw/app.
• The environment variable that needs set is COLLAB_ADDR. Your excalidraw server instance needs set via COLLAB_ADDR= e.g. COLLAB_ADDR=https://draw-collab.mydomain.tld
• I haven't confirmed, but I believe to deploy this, both excalidraw-room and excalidraw need to have separate URLs or subdomains and a valid certificate. I don't believe subpath will work. It may be possible to have both of these run unencrypted as well, but I have not tested this.

[PseudoResonance]

To put Excalidraw in a subdirectory, you can define a base path in vite.config.ts. Example:

export default defineConfig({
  base: '/excalidraw/',
  server: {

As for the collab server, SocketIO strips the path for some reason, so you have to define a path where it's initialized in src/excalidraw-app/collab/Collab.tsx The path must end in /socket.io/ as that is the endpoint used by the server. Example:

        socketIOClient(socketServerData.url, {
          path: '/excalidrawcollab/socket.io/',
          transports: socketServerData.polling

I then used Nginx to strip the /excalidrawcollab/ part of the location with the following, the / after proxy_pass and the Upgrade/Connection headers being the most important.

        location /excalidrawcollab/ {
                proxy_pass http://host:port/;
                ...
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection $connection_upgrade;
        }

I think it would be good if both the server and client had proper environment variables to allow you to set the expected path as sometimes a subdomain isn't a viable option.

I've made the necessary changes to allow for these to be set in environment variables #6990, excalidraw/excalidraw-room#363

I was also wondering about the Firebase server, as with this configuration, it is still dependent on Excalidraw's public Firebase to store any drawing data, so there's really little point in "self-hosting". Looking into it, if self hosting is important enough of a feature, there are services such as AppWrite or Supabase that claim to be mostly compatible with Firebase while offering native support for self hosting. Obviously that would be a huge ask though, as Excalidraw would either have to support both, or migrate their official hosting to an alternative.

Edit: I just realized there are some issues about this and it's been suggested to abstract away Firebase to allow for a variety of storage backends.

[akashg3627]

hey @ad1992
I wanted to use excalidraw collaboration mode with an option to have save button that saves the current canvas into my backend.
I am trying to implement the same using 4 steps you mentioned. I needed some help and guidance on how do we publish the package as the folder lies deep inside. So, can you please guide me in how do we publish the package as in which folder should be taken as root folder?

[ad1992]

Hey @akashg3627 👋🏻, do you mind asking about publish package as a separate question?

[akashg3627]

Yeah sure, would be better

[finallyivn]

Why does my hosted excalidraw server only work on my own computer (using two different browsers) after completing points 1 and 2 above, but not on other computers? Points 3 and 4, I don't understand

[ad1992]

@Joshua-onwuzu lets keep it simple then

After updating package name and version

yarn build:umd
yarn publish

[Joshua-onwuzu]

@ad1992 i recloned the package and followed the steps from afresh and i was able to release the package but i get this error on the browser when i try to import Excalidraw from the released package
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. , you got any idea where is might be coming from ??

here is how i am importing it in my code

[ad1992]

@Joshua-onwuzu this happens when components are not exported correctly, probably you might have made some changes in the code due to which comp wasn't exported correctly. If you can share a code sandbox example / changes you made, I might be able to check

[Joshua-onwuzu]

@ad1992 sure, here in the modified package on codesandbox
https://codesandbox.io/p/github/Joshua-onwuzu/excalidraw/main?file=%2FREADME.md&workspace=%257B%2522activeFilepath%2522%253A%2522%252FREADME.md%2522%252C%2522openFiles%2522%253A%255B%2522%252FREADME.md%2522%255D%252C%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522gitSidebarPanel%2522%253A%2522COMMIT%2522%252C%2522spaces%2522%253A%257B%2522clgncgeie000x3b6naismdokl%2522%253A%257B%2522key%2522%253A%2522clgncgeie000x3b6naismdokl%2522%252C%2522name%2522%253A%2522Default%2522%252C%2522devtools%2522%253A%255B%257B%2522key%2522%253A%2522clgncgeie000y3b6ne5jlz3sx%2522%252C%2522type%2522%253A%2522PROJECT_SETUP%2522%252C%2522isMinimized%2522%253Afalse%257D%252C%257B%2522type%2522%253A%2522PREVIEW%2522%252C%2522taskId%2522%253A%2522start%2522%252C%2522port%2522%253A3000%252C%2522key%2522%253A%2522clgnchkgc00843b6nj4952ora%2522%252C%2522isMinimized%2522%253Afalse%257D%252C%257B%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522start%2522%252C%2522key%2522%253A%2522clgnchi6t004t3b6nf2pg9sqj%2522%252C%2522isMinimized%2522%253Afalse%257D%255D%257D%257D%252C%2522currentSpace%2522%253A%2522clgncgeie000x3b6naismdokl%2522%252C%2522spacesOrder%2522%253A%255B%2522clgncgeie000x3b6naismdokl%2522%255D%252C%2522hideCodeEditor%2522%253Afalse%257D

[Joshua-onwuzu]

@ad1992 i didnt edit the code that much, just the changes that were suggested above, so i am not sure of what that is not exported correctly

[prephyte]

could you perhaps add a docker env variable like COLLAB_SERVER_URL, so that this would be easier to implement?

[okanji]

That would be helpful

[archef2000]

@ad1992 Is there now an easy way to get collab working on the selfhosted version?

[Mihai-CMM]

Is this a dead topic? Are there any helm charts with all the requirements out there? The last docker image cannot be built and there is PR opened. And also the documentation on how we should be able to integrate the 2 seems outdated
Thank you

[Anddd7]

I tried https://github.com/alswl/excalidraw-collaboration, it works for me.

Base on alswl's changes, excalidraw hardcoded backend api, so you cannot enable collaboration without changing the code. 🙈

---

I deployed it in kubernetes, if you wanna try: https://github.com/Anddd7/rubber-duck/tree/main/excalidraw