https://github.com/fiqryx/draw-board
A modern whiteboard application for sketching, note-taking, presentations, and digital art creation.
https://github.com/fiqryx/draw-board
digital-art drawboard react reactrouterv7 sketching tailwindcss whiteboard
Last synced: 10 months ago
JSON representation
A modern whiteboard application for sketching, note-taking, presentations, and digital art creation.
- Host: GitHub
- URL: https://github.com/fiqryx/draw-board
- Owner: fiqryx
- License: mit
- Created: 2025-06-13T10:15:39.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2025-06-17T13:55:44.000Z (12 months ago)
- Last Synced: 2025-06-28T18:42:41.564Z (11 months ago)
- Topics: digital-art, drawboard, react, reactrouterv7, sketching, tailwindcss, whiteboard
- Language: TypeScript
- Homepage: https://pry-draw-board.vercel.app/
- Size: 1.34 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Draw Board
A modern, feature-rich whiteboard application built with React and CSS (Tailwind). Perfect for sketching, note-taking, presentations, and digital art creation.
[](https://pry-draw-board.vercel.app/)
## ✨ Features
### Drawing Tools
- **👋 Hand Tool** - Pan and navigate the canvas freely
- **✔️ Choice Tool** - Select and manipulate objects
- **🖊️ Pen Tool** - Solid, precise lines for detailed work
- **✏️ Pencil Tool** - Softer, semi-transparent strokes
- **🖍️ Highlighter** - Thick, translucent lines for emphasis
- **🧽 Eraser** - Remove content with adjustable size
- **📏 Line Tool** - Draw straight lines with precision
- **➡️ Arrow Tool** - Create directional arrows for diagrams
- **⬛ Rectangle Tool** - Draw perfect squares/rectangles
- **⭕ Circle Tool** - Create ellipses or perfect circles
- **🔤 Text Tool** - Add customizable text labels
- **🧽 Eraser** - Remove content with adjustable size
### Customization Options
- **🎨 Color Palette** - 7 preset colors plus custom color picker
- **📏 Brush Size Control** - Adjustable from 1px to 50px
- **🌗 Theme Modes** - White board and dark board options
- **💾 History Management** - Full undo/redo functionality
### User Interface
- **📱 Responsive Design** - Works on desktop, tablet, and mobile
- **🎯 Floating Controls** - Intuitive, non-intrusive interface
- **🎮 Touch Support** - Native touch drawing for mobile devices
[](https://pry-draw-board.vercel.app/)
## 🚀 Quick Start
### Option 1: Direct Use
1. Download the HTML file
2. Open in any modern web browser
3. Start drawing immediately!
### Option 2: Local Development
```bash
# Clone or download the file
git clone https://github.com/fiqryx/draw-board.git
# and
npm install
# then
npm run dev
```
## 🎮 How to Use
### Basic Drawing
1. **Select a Tool** - Click on pen, pencil, highlighter, or eraser
2. **Choose a Color** - Click any color from the palette or use custom picker
3. **Adjust Size** - Use the slider to set brush thickness
4. **Start Drawing** - Click and drag on the canvas
### Keyboard Shortcuts
- `Ctrl/Cmd + Z` - Undo (planned feature)
- `Ctrl/Cmd + Y` - Redo (planned feature)
- `Ctrl/Cmd + A` - Clear canvas (planned feature)
### Tool Behaviors
- **Pen**: Solid, opaque lines - perfect for writing and precise drawing
- **Pencil**: 70% opacity with reduced width - ideal for sketching
- **Highlighter**: 2x width with 30% opacity - great for emphasis
- **Eraser**: 2x width with destination-out blend mode - removes content
### Browser Support
- ✅ Chrome 88+
- ✅ Firefox 85+
- ✅ Safari 14+
- ✅ Edge 88+
- ✅ Mobile browsers (iOS Safari, Chrome Mobile)
### Performance Features
- Efficient canvas rendering
- Optimized touch event handling
- Minimal memory footprint
## 📱 Mobile Experience
The whiteboard is fully optimized for mobile devices:
- Touch-friendly interface with larger buttons
- Responsive floating panels
- Native touch drawing support
- Automatic canvas scaling
## 🔧 Customization
## 🎯 Use Cases
- **Education**: Digital blackboard for online teaching
- **Presentations**: Live sketching during meetings
- **Art & Design**: Digital sketching and ideation
- **Note-taking**: Visual note-taking and mind mapping
- **Collaboration**: Shared whiteboard sessions (with backend)
## 🤝 Contributing
Contributions are welcome! Here's how to get started:
1. Fork the repository
2. Create a feature branch (`git checkout -b feature/amazing-feature`)
3. Commit your changes (`git commit -m 'Add amazing feature'`)
4. Push to the branch (`git push origin feature/amazing-feature`)
5. Open a Pull Request
### Development Guidelines
- Follow existing code style
- Test on multiple browsers
- Ensure mobile compatibility
- Add comments for complex logic
## 📄 License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
## 📞 Support
If you encounter any issues or have questions:
- Check the [Issues](../../issues) page
- Create a new issue with detailed description
- Include browser version and steps to reproduce
---
*Happy Drawing! 🎨*