• 🎨 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

1. Clone the repository

git clone https://github.com/HassanXTech/letmesketch.git
cd letmesketch

2. Install dependencies

npm install
# or
yarn install

3. Set up environment variables

cp .env.example .env.local

Add your Supabase credentials for collaboration features.

4. Run the development server

npm run dev
# or
yarn dev

5. 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

1. Select a tool from the toolbar
2. Click and drag on the canvas to draw
3. Use the color picker and stroke width controls to customize your drawings

1. Method 1: Select the text tool (T) and click on the canvas
2. Method 2: Double-click anywhere on the canvas to instantly create text
3. Type your text and press Enter to confirm, or Escape to cancel

1. Use the select tool (V) and double-click on existing text to edit it
2. Text editing happens directly on the canvas for a seamless experience

1. Click the "Collaborate" button in the top-right
2. Create a new session or join an existing one
3. Share the session link with others
4. See real-time cursors and changes from collaborators

1. Use the Export/Import buttons in the top-left
2. Choose from PNG, SVG, or JSON formats
3. 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:

1. Fork the repository
2. Create a feature branch

git checkout -b feature/amazing-feature

3. Make your changes
4. Commit your changes

git commit -m 'Add some amazing feature'

5. Push to the branch

git push origin feature/amazing-feature

6. 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