SketchIDraw is a powerful, free collaborative whiteboard that brings the charm of hand-drawn sketches to digital collaboration. Built with modern web technologies, it offers real-time collaboration with end-to-end encryption, making it perfect for brainstorming, design thinking, and visual communication.
- 🎨 Hand-drawn aesthetics - Beautiful, organic-looking shapes and lines
- 🔒 Secure collaboration - End-to-end encrypted real-time collaboration
- ⚡ Lightning fast - Optimized canvas engine with smooth performance
- 🌐 Free forever - Open source and completely free to use
- 🎯 Feature-rich - Everything you need for visual collaboration
| 🎨 Drawing & Shapes | 🔧 Tools & Controls | 🌟 Collaboration |
|---|---|---|
| Rectangle ▫️ | Instant property updates ⚡ | Real-time cursor tracking 🖱️ |
| Ellipse ⭕ | Shape resizing & dragging 🔄 | End-to-end encryption 🔒 |
| Diamond 🔷 | Text editing ✏️ | Secure authentication 🔑 |
| Lines & Arrows ➖➡️ | Pencil tool 🖊️ | Multi-user support 👥 |
- Shape Rendering: Create perfect rectangles, ellipses, diamonds, lines, and arrows
- Pencil Tool: Free-hand drawing with smooth curves
- Text Tool: Add, edit, resize, and move text elements
- Smart Controls: Instant property updates for all elements
- Infinite Canvas: Pan seamlessly across unlimited workspace
- Zoom Support: Programmatic and pinch gesture zooming
- Smooth Performance: Butter-smooth interactions with optimized rendering
- Shape Manipulation: Easy resizing, dragging, and deleting
- Light/Dark Mode: Beautiful themes powered by next-themes
- Local Storage Sync: Never lose your work
- Type-safe: Built with TypeScript for reliability
- Responsive Design: Works perfectly on all devices
- End-to-end Encryption: Your data stays private
- Real-time Collaboration: See changes instantly
- Secure Authentication: Powered by NextAuth.js
- Postgres Database: Reliable data persistence
Frontend:
- ⚛️ Next.js - React framework with SSR
- 🎯 TypeScript - Type-safe development
- 🎨 Tailwind CSS - Utility-first styling
- 🌍 Zustand - Global state management
- 🌗 next-themes - Theme management
Backend:
- 🔑 NextAuth.js - Authentication
- 🗄️ PostgreSQL - Database
- 🔒 End-to-end encryption - Secure collaboration
Canvas Engine:
- 🧑💻 Custom OOP Architecture - Modular and maintainable
- ⚡ Optimized Rendering - Smooth 60fps performance
- 📱 Touch Support - Mobile-friendly interactions
Make sure you have the following installed:
- Docker and Docker Compose
- Git
- Clone the repository
git clone https://github.com/markande98/sketchidraw.git
cd sketchidraw- Set up environment variables for the main app
cd apps/sketchidraw
cp .env.example .env
cd ../..- Set up environment variables for the WebSocket server
cd apps/ws
cp .env.example .env
cd ../..- Start the application
docker compose up -d- Open your browser Navigate to http://localhost:3000 and start sketching! 🎨
Note: Make sure to update the .env files in both apps/sketchidraw and apps/ws directories with your specific configuration before running the application.
We love contributions! Here's how you can help make SketchIDraw even better:
- Check if it's already reported in Issues
- Create a new issue with detailed steps to reproduce
- Include screenshots or videos if helpful
- Open an issue to discuss your idea
- Fork the repository
- Create a feature branch:
git checkout -b feature/amazing-feature - Make your changes
- Commit:
git commit -m 'Add amazing feature' - Push:
git push origin feature/amazing-feature - Open a Pull Request
- Follow TypeScript best practices
- Write clean, self-documenting code
- Add tests for new features
- Update documentation as needed
- Ensure all tests pass before submitting
This project is licensed under the MIT License - see the LICENSE file for details.
- Inspired by Excalidraw for the hand-drawn aesthetic
- Built with amazing open-source technologies
- Thanks to all contributors and users! 💙