A modern, collaborative drawing application inspired by Excalidraw
Create beautiful hand-drawn style diagrams, wireframes, and sketches with real-time collaboration
- 🎨 Intuitive Drawing Tools - Pen, shapes, arrows, text, and more
- 🤝 Real-time Collaboration - Work together with others in real-time
- 🌓 Dark/Light Mode - Seamless theme switching with theme-aware stroke colors
- 📱 Responsive Design - Works perfectly on desktop, tablet, and mobile
- ⚡ Perfect-Freehand Integration - Realistic pressure-sensitive drawing
- 🔄 Undo/Redo - Full history management with 50-step memory
- 🔍 Zoom & Pan - Navigate large canvases with ease
- 📤 Export Options - PNG, SVG, and JSON export formats
- 💾 Auto-save - Never lose your work with automatic local storage
- ⌨️ Keyboard Shortcuts - Speed up your workflow
- 🎯 Precise Selection - Select, move, resize, and rotate elements
- 📐 Grid System - Optional grid for precise alignment
- ✏️ Double-Click Text Creation - Double-click anywhere to add text instantly
- 📝 Inline Text Editing - Edit text directly on canvas without modals
- 🎨 Advanced Color Picker - Stroke and fill color selection with opacity control
- Node.js 18+
- npm or yarn
- Clone the repository
git clone https://github.com/HassanXTech/letmesketch.git
cd letmesketch- Install dependencies
npm install
# or
yarn install- Set up environment variables
cp .env.example .env.localAdd your Supabase credentials for collaboration features.
- Run the development server
npm run dev
# or
yarn dev- Open your browser Navigate to http://localhost:3000
- Framework: Next.js 14 with App Router
- Language: TypeScript
- Styling: Tailwind CSS
- UI Components: shadcn/ui
- State Management: Zustand
- Drawing: Perfect-Freehand
- Database: Supabase (for collaboration)
- Deployment: Vercel
| Action | Shortcut |
|---|---|
| Select Tool | V |
| Pen Tool | P |
| Rectangle | R |
| Circle | O |
| Arrow | A |
| Line | L |
| Text | T |
| Hand Tool | H |
| Undo | Ctrl + Z |
| Redo | Ctrl + Y |
| Delete | Delete / Backspace |
| Zoom In | Ctrl + + |
| Zoom Out | Ctrl + - |
| Reset Zoom | Ctrl + 0 |
| Toggle Grid | Ctrl + ' |
- Select a tool from the toolbar
- Click and drag on the canvas to draw
- Use the color picker and stroke width controls to customize your drawings
- Method 1: Select the text tool (T) and click on the canvas
- Method 2: Double-click anywhere on the canvas to instantly create text
- Type your text and press Enter to confirm, or Escape to cancel
- Use the select tool (V) and double-click on existing text to edit it
- Text editing happens directly on the canvas for a seamless experience
- Click the "Collaborate" button in the top-right
- Create a new session or join an existing one
- Share the session link with others
- See real-time cursors and changes from collaborators
- Use the Export/Import buttons in the top-left
- Choose from PNG, SVG, or JSON formats
- Save your work locally or export for sharing
- Stroke colors automatically adjust when switching between light and dark modes
- White strokes in dark mode for better visibility
- Grid visibility optimized for both themes
- Toggle grid visibility with the grid button in the toolbar
- Snap-to-grid functionality for precise alignment
- Customizable grid spacing and opacity
- Multi-select with Shift+click
- Resize handles for precise scaling
- Drag to move selected objects
- Visual feedback with selection indicators
We welcome contributions! Here's how you can help:
- Fork the repository
- Create a feature branch
git checkout -b feature/amazing-feature- Make your changes
- Commit your changes
git commit -m 'Add some amazing feature'- Push to the branch
git push origin feature/amazing-feature- Open a Pull Request
- Follow the existing code style
- Add TypeScript types for new features
- Test your changes thoroughly
- Update documentation as needed
This project is licensed under the MIT License - see the LICENSE file for details.
- Inspired by Excalidraw
- Built with Perfect-Freehand for realistic drawing
- UI components from shadcn/ui
Hassan - @HassanXTech
Project Link: https://github.com/HassanXTech/letmesketch
Made with ❤️ by Hassan