Introduction: Why Combine Excalidraw with Jitsi?
In today’s remote-first world, effective collaboration tools are essential. Imagine combining the power of Jitsi, a secure video conferencing platform, with Excalidraw, a creative whiteboarding tool. This integration transforms virtual meetings into dynamic brainstorming sessions, enabling teams to visualize ideas in real-time. Whether you’re hosting workshops or team discussions, this setup is perfect for enhancing productivity.
What You’ll Learn
- How to set up the Excalidraw backend.
- Steps to configure Excalidraw with Jitsi.
- Tips for optimizing the integration for smooth collaboration.
Step 1: Setting Up the Excalidraw Backend
To integrate Excalidraw with Jitsi, you first need to set up the backend server.
Clone the Repository
Start by cloning the Excalidraw backend repository:
git clone https://github.com/jitsi/excalidraw-backend.git
Install Dependencies
Navigate to the cloned directory and install dependencies:
npm install
Build and Start the Server
Build the backend application:
npm run build
Then start the server:
npm start
At this point, your backend server should be live and ready to connect with Jitsi.
Step 2: Configuring Excalidraw with Jitsi
Once your backend is running, it’s time to integrate it with your self-hosted Jitsi instance.
Edit Configuration File
Locate your Jitsi configuration file (e.g., jitsi.example.com-config.js) and enable whiteboard support:
whiteboard: {
enabled: true,
collabServerBaseUrl: 'https://excalidraw-backend.example.com'
},
Restart Your Jitsi Server
Save changes and reboot your server:
Copy
sudo reboot now
After restarting, you’ll see a new “Whiteboard” option in your Jitsi meeting interface.
Step 3: Advanced Setup Using Docker
For enhanced scalability and ease of management, consider deploying Excalidraw in a Docker container.
Create a Docker Compose File
Navigate to the excalidraw-backend directory and create a docker-compose.yml file:
Copy
version: "3.8"
services:
excalidraw:
build:
context: .
ports:
- "80:80"
restart: always
environment:
- NODE_ENV=development
Build and Launch Docker Container
Run the following command to build and start your container:
Copy
docker compose up --build -d
Once launched, assign a subdomain (e.g., excalidraw.yourdomain.com) and secure it using SSL via Nginx Proxy Manager.
Benefits of Integrating Excalidraw with Jitsi
- Enhanced Collaboration: Teams can brainstorm visually while discussing ideas on video calls.
- Ease of Use: Accessible directly from the Jitsi interface.
- Customizable Setup: Fully configurable for self-hosted environments.
- Improved Productivity: Combines communication and creativity seamlessly.
Conclusion
Integrating Excalidraw with Jitsi opens up new possibilities for virtual collaboration, making meetings more interactive and productive. Whether you’re hosting team brainstorming sessions or client workshops, this setup ensures seamless communication and creativity. Ready to transform your online meetings? Follow this guide today!