Giter Club home page Giter Club logo

excalidraw-room's Introduction

Excalidraw

An open source virtual hand-drawn style whiteboard.
Collaborative and end-to-end encrypted.


Excalidraw is released under the MIT license. npm downloads/month PRs welcome! Chat on Discord Follow Excalidraw on Twitter

Product showcase

Create beautiful hand-drawn like diagrams, wireframes, or whatever you like.

Features

The Excalidraw editor (npm package) supports:

  • 💯 Free & open-source.
  • 🎨 Infinite, canvas-based whiteboard.
  • ✍️ Hand-drawn like style.
  • 🌓 Dark mode.
  • 🏗️ Customizable.
  • 📷 Image support.
  • 😀 Shape libraries support.
  • 👅 Localization (i18n) support.
  • 🖼️ Export to PNG, SVG & clipboard.
  • 💾 Open format - export drawings as an .excalidraw json file.
  • ⚒️ Wide range of tools - rectangle, circle, diamond, arrow, line, free-draw, eraser...
  • ➡️ Arrow-binding & labeled arrows.
  • 🔙 Undo / Redo.
  • 🔍 Zoom and panning support.

Excalidraw.com

The app hosted at excalidraw.com is a minimal showcase of what you can build with Excalidraw. Its source code is part of this repository as well, and the app features:

  • 📡 PWA support (works offline).
  • 🤼 Real-time collaboration.
  • 🔒 End-to-end encryption.
  • 💾 Local-first support (autosaves to the browser).
  • 🔗 Shareable links (export to a readonly link you can share with others).

We'll be adding these features as drop-in plugins for the npm package in the future.

Quick start

Note: following instructions are for installing the Excalidraw npm package when integrating Excalidraw into your own app. To run the repository locally for development, please refer to our Development Guide.

npm install react react-dom @excalidraw/excalidraw

or via yarn

yarn add react react-dom @excalidraw/excalidraw

Check out our documentation for more details!

Contributing

Integrations

Who's integrating Excalidraw

Google CloudMetaCodeSandboxObsidian ExcalidrawReplitSliteNotionHackerRank • and many others

Sponsors & support

If you like the project, you can become a sponsor at Open Collective or use Excalidraw+.

Thank you for supporting Excalidraw

Last but not least, we're thankful to these companies for offering their services for free:

Vercel Sentry Crowdin

excalidraw-room's People

Contributors

ad1992 avatar barnabasmolnar avatar dependabot-preview[bot] avatar dependabot[bot] avatar dwelle avatar idlewinn avatar kbariotis avatar lipis avatar maielo avatar nminhnguyen avatar spartanz51 avatar vjeux avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

excalidraw-room's Issues

Starting excalidraw-room using the recommended pm2 command does not work.

Expected Behavior

Running pm2 start pm2.production.json starts excalidraw-room.

Observed Behavior

excalidraw-room fails to start.

[PM2][WARN] Applications excalidraw-collab not running, starting...
[PM2][ERROR] Error: Script not found: /home/user/Desktop/excalidraw-room/dist/index.js

Steps to reproduce

  1. Download and build excalidraw-room per README.md
> git clone https://github.com/excalidraw/excalidraw-room.git
> cd excalidraw-room 
> yarn 
  1. Run pm2 start pm2.production.json

System Information

OS: Linux Mint 21.1 x86_64
Typescript version: 4.2.3
Yarn version: 3.6.1
NPM version: 10.1.0

Update `socket.rooms` iteration to support `Set<string>` in `for..in` loop

While messing around with a simple Real-Time app, I encountered the following issue:

Issue Summary:

When the socket receives the disconnecting event, it fails to properly notify the associated rooms about the disconnection due to the usage of the incompatible for..in loop (no iteration is performed).

Currently, within the codebase, there exists a situation where the socket.rooms object, defined as a Set<string>, is being iterated using a for..in loop. However, for..in loops aren't compatible with Sets, potentially causing unexpected behavior or errors.

Due to this problem, the server fails to emit the expected room-user-change event.

Proposed Solution:

Refactor the iteration of socket.rooms to use for..of, forEach, or any loop mechanism compatible with Set<string> to ensure proper iteration and avoid potential issues related to incompatible iteration methods.

Additional Information:

$ npm -v
9.8.1

$ node -v
v18.18.2

$ lsb_release -a
No LSB modules are available.
Distributor ID:	Ubuntu
Description:	Ubuntu 22.04.3 LTS
Release:	22.04
Codename:	jammy

Links

MDN For..in
MDN For..of
Socket.io | socket.rooms
Codebase

Mark this project as archived

Looks like this project is no longer used at portal.excalidraw.com, so that information is now misleading. It is no longer compatible with the current version of excalidraw/excalidraw. Please mark this project as archived, it will save some time to a lot of people.

How to see, if exclidraw is using this instead of main server?

Hi!

I tried to setup excalidraw (Docker) to use this colab server (Docker) via overlay network, but it seems as if it is totally ignoring it. I set the necessary env variables in the .env file for excalidraw, but does not seem to use them at all.

It would be nice to get a hint how to use this.

Many thanks!
Regards
Holger

Broken live collaboration

Play by Play

Today at 7:12 AM (9 hours ago) #109 was merged which fixed the build which triggered a new release to be deployed and broke live collaboration.

image

I tried reverting it but the previous commit actually didn't build. I tried to reverting another pull request ( #112 ) but that didn't build either.

Instead of blindly reverting things, I looked at the commit that last built from heroku (August 21) and reverted the code to that commit ( #113 )

This brought the old version alive and live collaboration is now working again.

Next steps

Right now we should be good with that old version, the problem is mitigated. Some thoughts about what to do next:

  • We should figure out how to restore the changes that were done since then.
  • We should add a test that makes sure that the build actually works somehow.
  • We should have some alarms so we are notified by automation rather than confused customer.

Build fails

Hello,

I tried building this project using

docker build -t excalidraw-room .

This works for commit 3531472, but not for the latest master.

Self Hosted Collab Excalidraw with containers

Hello,

I want to setup a self hosted environnement using the 2 containers: excalidraw and excalidraw-room
There is no documentation on how to connect / link the client to the server..

I tried to set the variable REACT_APP_WS_SERVER_URL, but nothing.
Could you guys help me please?
How to make this work?

docker pull docker.io/excalidraw/excalidraw
docker pull docker.io/excalidraw/excalidraw-room

docker run -d -p 8081:80 excalidraw/excalidraw-room:latest
docker run -d -p 8080:80 -e REACT_APP_WS_SERVER_URL=http://127.0.0.1:8081 excalidraw/excalidraw:latest

Thx

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.