Skip to content

ayushii06/CollabDraw-Frontend

Repository files navigation

Next.js React TailwindCSS Socket.IO License

Introduction

Hello Everyone, I welcome you to the official GitHub repository of CollabDraw – a real-time collaborative drawing platform where you can draw, brainstorm, and have fun with friends or teammates on the same canvas.

Whether you're sketching ideas, teaching concepts, or simply drawing for fun, CollabDraw lets multiple users collaborate instantly.

Allow me to introduce you to all the features and how you can use it!

What is CollabDraw?

Just as the name suggests, CollabDraw is a real-time collaborative whiteboard application where multiple users can draw together on the same canvas.

It is designed with a simple and intuitive interface, making it easy for anyone to start drawing instantly — no signups required.

How to Begin

  1. Open the shared CollabDraw link.
  2. Join the room instantly.
  3. Start drawing with your friends.

That's it — no login or setup needed!

Features

Drawing Tools

  • Pen : Draw freely with smooth strokes. You can use your stylus or mouse or just your fingers if you have touchscreen .

  • Rectangle, Circle, Line : Choose any of the shape you want to draw, and just start drawing!

  • Text : Want to write something? Use Text tool and write in different style and size. (Currenlty supports English text).

  • Erase : Did not like what your draw? Don't worry, you have eraser tool also. Just select the tool and erase any of you drawing.

Canvas Controls

  • Undo : Want to undone your action? Click on Undo command!

  • Redo : Want to redone your action? Click on Redo command!

  • Resize : You have drawn a shape, but now you want to decrease its area. Don't worry, you need not to re-draw anything. Just select the shape and resize it.

  • Move: Want to move a shape to newer place? Just click on select tool and select the shape and drag and drop it!

  • Zoom : Want to increase or decrease the canvas area? Use our zoom tool and the canvas will zoom in or out.

  • Pan: Want to move canvas? Use Pan Tool and move your canvas!

  • Reset: Want to clear all drawings and reset to original state? Just click on reset tool! (Remember this action is irreversible!)

  • Save Your Drawing: You can click on download button and the drawing will be saved as image in your desktop!

Collaboration Tool:

  • Invite Someone: Drawing alone is too boring right? Invite your friends and family to join the room and share your drawing together!

  • Leave Room: Whenever you are done drawing, you can click leave room to exit.

Toolbar

The horizontal toolbar at the botton centre of your screen has all the tools you would required! Hover over the tool to get it's name in case you can not understand the tool from its image.

Menu Toolbar

Whenever you will select any drawing tool like pen, circle , line or rectangle, you will see a menu toolbar in right of your screen. This will contains options like stroke color, stroke width, fill color, stoke style. You can customize as per your need.

Tech Stack

Frontend

  • Next.js
  • React
  • TailwindCSS
  • Socket.IO Client
  • Perfect Freehand

Backend

  • Node.js
  • Express
  • Socket.IO

Backend Repository

Backend code is available here:

http://github.com/ayushii06/CollabDraw-Backend

Contributing

CollabDraw is an open-source project, and contributions are welcome.

You can:

  • Open issues
  • Suggest improvements
  • Submit pull requests

Author

Ayushi Pal
https://github.com/ayushii06

License

Distributed under the MIT License.

Personal Note

I built CollabDraw to create a space where people can express creativity together.
Drawing is for everyone — regardless of age, background, or location.

I hope this tool helps you share ideas, collaborate, and enjoy creative moments with friends and family.

Happy Drawing! 🎨

About

Resources

Stars

1 star

Watchers

1 watching

Forks

Releases

No releases published

Packages

 
 
 

Contributors

Languages