dark-mood
  • dark-mood
BACK

Integrating Excalidraw Whiteboard with Jitsi: A Step-by-Step Guide

Visual collaboration tools have become essential for enhancing online meetings and discussions. The combination of Excalidraw, a powerful collaborative whiteboarding tool, with Jitsi, a versatile video conferencing platform, can greatly enhance your virtual interactions. In this guide, we'll walk you through the process of setting up Excalidraw and integrating it with your self-hosted Jitsi instance, enabling you to seamlessly create, share, and collaborate on visual content in real-time.

  • Avkash Kakdiya
  • 23 Aug 2023
  • 3 min read

Introduction

Visual collaboration tools have become essential for enhancing online meetings and discussions. The combination of Excalidraw, a powerful collaborative whiteboarding tool, with Jitsi, a versatile video conferencing platform, can greatly enhance your virtual interactions. In this guide, we'll walk you through the process of setting up Excalidraw and integrating it with your self-hosted Jitsi instance, enabling you to seamlessly create, share, and collaborate on visual content in real-time.

Step 1: Set Up Excalidraw Backend

Before you can integrate Excalidraw with Jitsi, you need to set up the Excalidraw backend on your server. Follow these steps:

1) Clone the Repository: Open your terminal and run the following command to clone the Excalidraw backend repository:

git clone https://github.com/jitsi/excalidraw-backend.git

2) Install Dependencies: Navigate to the cloned directory and install the necessary dependencies by running:

npm install

3) Build the Application: Once the dependencies are installed, build the Excalidraw backend by running:

npm run build

4) Start the Server: Start the Excalidraw backend server using the following command:

npm start

Step 2: Configure Excalidraw with Jitsi

Now that you have the Excalidraw backend up and running, it's time to configure Excalidraw with your Jitsi instance:

  1. Access Jitsi Configuration Files: Log in to your server where you have Jitsi installed and navigate to the configuration files. These are typically located in the /etc/jitsi/meet directory.
  2. Edit the Configuration: Open the configuration file for your domain (e.g., yourdomain.com-config.js) using a text editor.
  3. Add Excalidraw Configuration: Within the configuration file, locate the section where you can customize features. Add the following lines to enable and configure the Excalidraw integration:
  4. Make sure to replace 'https://excalidraw-backend.example.com' with the actual URL of your Excalidraw backend server.
  5. Save and Apply Changes: Save the configuration file and restart your Jitsi services for the changes to take effect.
whiteboard: {
    enabled: true,
    collabServerBaseUrl: 'https://excalidraw-backend.example.com'
},

Step 3: Test the Integration

  1. Start a Jitsi Meeting: Create or join a Jitsi meeting on your self-hosted instance.
  2. Access Excalidraw: During the meeting, you'll see a new icon that represents the Excalidraw whiteboard. Click on this icon to open the Excalidraw canvas.
  3. Collaborate in Real-Time: Use the Excalidraw tools to draw, sketch, and collaborate with other participants in real-time.
  4. Discuss and Share Ideas: Utilize Jitsi's audio and video features to discuss and share ideas while collaborating on the Excalidraw canvas.

Step 4: Concluding the Session

  1. Save and Share: Once your collaborative session is complete, consider saving the Excalidraw canvas by bookmarking the URL or using any saving options provided by Excalidraw.
  2. End the Integration: Stop using the Excalidraw canvas by closing the Excalidraw tab. You can continue your Jitsi meeting without the whiteboard.

Conclusion

Integrating Excalidraw with your self-hosted Jitsi instance offers a seamless way to enhance visual collaboration during online meetings. By following these step-by-step instructions, you can set up Excalidraw backend, configure the integration with Jitsi, and experience the benefits of real-time visual collaboration. This combination of tools empowers you to engage, brainstorm, and create together with participants from anywhere, making your virtual meetings more interactive and productive.

Ready to Kick-Off a New Project?

We are committed to providing our clients with the top solutions through global business ventures.

    Trusted Clients

    iTechNotion-client-logo
    iTechNotion-client-review

    " They accepted a huge challenge and exceeded it. We're all better because they did. "

    - Bill Crose Founder & CEO, Adyton
    iTechNotion-client-review

    " The team’s in-depth knowledge extends to all things web and beyond. "

    - Thomas Hayes Founder, Group Piex
    iTechNotion-client-review

    " The Leave and Attendance Management project has been a great value for our money. "

    - GoPaL Prajapati Chief Project Manager, DB Corp Ltd (Dainik Bhaskar)
    iTechNotion-client-review

    " Very Pleased with app development! highly recommended services! "

    - Joey Wargachuk App Development
    iTechNotion-client-review

    " Highly recommend for web development, apps, e-commerce, database management, etc. very reliable A+++ "

    - Tony eCommerce site
    iTechNotion-client-review

    " Avkash and his team at iTechNotion have done a great job developing our app and we are pleased enough to continue working with them to develop of our remaining applications. "

    - Selwyn IOS app development
    iTechNotion-client-review

    " Very good work again. I recommended this great professional and excellent provider. The communication is very good. Is my partner from Portugal and a member that i want in my team of www.toranjadesign.com my company. "

    - Amvidigal Android TV Launcher App
    iTechNotion-client-review

    " Hired team for few tasks in last 2-3 years. Prompt reply, top notch service and affordable quotes. They even went extra mile to deliver tasks which were not their responsibility. "

    - Manish Dedicated Resources Hiring (Canada)
    Your subscription could not be saved. Please try again.
    Thank you! We have received your inquiry.

    Get in Touch