Collab Canvas

Real-time collaboration add-on for Adobe Express with chat, live editing, and invite features — empowering remote teamwork.

Comment

Inspiration

As a graphic designer, I often find myself seeking quick feedback and collaboration from friends and teammates — whether it's about color choices, layout ideas, or content alignment. Traditional platforms like Zoom or Drive feel heavy for this. That’s why I created Collab Canvas, a lightweight and elegant space to collaborate inside the Adobe Express environment.

What it does

Collab Canvas allows users to:

  • Invite teammates via email
  • View a real-time list of participants
  • Read and share updates through a message board
  • Use mock features like live screen sharing, presentation mode, and audio toggle to simulate a collaborative workspace
  • Live editing is a controlled feature — it can only be enabled by the admin to avoid confusion and maintain session flow

How I built it

  • The UI was developed using HTML, CSS, and JavaScript
  • EmailJS is integrated to send invite emails directly from the front end
  • The design emphasizes clarity and usability, with a modern and responsive layout

Challenges I ran into

  • Connecting a fully functional backend for live features (e.g., messaging sync) was a challenge due to time and scope limits
  • Working with EmailJS and handling success/error feedback cleanly took some debugging
  • Ensuring the UI looked consistent and professional across screen sizes

Accomplishments that I proud of

  • Successfully created a clean, responsive interface that looks professional
  • Seamlessly integrated email functionality using EmailJS
  • Developed a ready-to-extend front-end experience for real-time collaboration

What I learned

  • Learned how to set up and use EmailJS for frontend-triggered email sending
  • Strengthened my skills in organizing a project for a real-world platform like Adobe Express
  • Understood how small collaborative tools can empower designers in creative flows

What's next for Collab Canvas

  • Add live chat and real-time collaboration features using WebSocket or Firebase
  • Build a proper backend infrastructure to store and sync messages and participants
  • Integrate with Adobe Express’s real assets to allow commenting directly on design elements
  • Add voice feedback or polls for creative sessions

Built With

Share this project:

Updates