Roughly

An Collaborative, Open-source, Hand-drawn style, AI-integrated whiteboard

I'm cloning the Excalidraw project to learn more about the tech stacks and how to build a real-time collaboration app.
I built it from scratch using TypeScript, NextJS, TailwindCSS, RoughJS, and Socket.io.

Features

• 🔄 Real-time Collaboration
• 🎨 Hand-drawn Style w/ Papyrus-Paper-like Background
• 🤖 LLM-based Shape Auto-Generation
• TO BE CONTINUED...

Roadmap

• Papyrus-Paper-like Background
• OOP-refactor
• Fix Randomness of a single shape
• Draw Gizmo when a shape is selected
• Change Canvas to SVG
• Shape Creation
  • Line
  • Curve Line (using SVG)
  • Another Line/Arrow Implementation
  • Rectangle
  • Ellipse
  • Straight Arrow (using SVG)
  • Diamond (using Polygon)
  • Bezier Arrow (using SVG)
  • Circle (pressing Shift while drawing Ellipse)
  • More shapes using SVG or Polygon
• Shape Manipulation
  • Move
  • Resize
  • Select
  • Rotate (using Matrix ?)
  • Delete
• Keyboard Shortcuts
• Real-time collaboration
• LLM (OpenAI API) integration to auto-generate shapes
• Redo / Undo
• Drawing Options
  • Stroke Color (include Opacity)
  • Background Fill
  • Background Fillstyle
  • Stroke Width
  • Stroke Style
  • Roughness
  • Rounded Corners
• Freehand Drawing
• Text
• Eraser
• Performance Optimizations

Tech Stacks

Getting Started

Run this command in the root folder.

cd clinet && npm dev

You can now play around with it on http://localhost:3000.

License

[Back to Top]