A modern, web-based design tool built with React, TypeScript, and Canvas API. Create, edit, and manipulate shapes, text, images, and freehand drawings with a professional Figma-like interface.
- Rectangle Tool: Create and resize rectangles with customizable fill and stroke
- Circle Tool: Draw perfect circles with adjustable radius
- Text Tool: Add and edit text with real-time property updates
- Image Tool: Upload and manipulate images with auto-resizing and aspect ratio preservation
- Pen Tool: Freehand drawing with smooth path rendering
- Selection Tool: Select, move, and modify any object
- Figma-like Layout: Left sidebar for tools and layers, right sidebar for properties
- Layer Management: Visual layer panel with proper naming and selection
- Properties Panel: Comprehensive controls for position, size, appearance, and more
- Editable Project Title: Click to rename your project
- Undo/Redo System: Full history management with Ctrl+Z/Cmd+Z shortcuts
- Copy/Paste/Duplicate: Standard shortcuts (Ctrl+C, Ctrl+V, Ctrl+D)
- Keyboard Shortcuts: Professional shortcuts matching design tool conventions
- Real-time Updates: Smooth interactions with optimized performance
- Cross-platform: Works on Windows, macOS, and Linux
- Drag & Drop: Move objects around the canvas
- Resize Handles: Visual resize handles for rectangles and images
- Proportional Scaling: Hold Shift for aspect ratio preservation
- Property Controls: Fine-tune position, size, colors, opacity, and rotation
- Selection Feedback: Clear visual indicators for selected objects
- Node.js 18+
- pnpm (recommended) or npm
-
Clone the repository
git clone <repository-url> cd design-tool
-
Install dependencies
pnpm install # or npm install -
Start the development server
pnpm dev # or npm run dev -
Open your browser Navigate to
http://localhost:5173
- Select a tool from the left sidebar
- Create shapes by clicking and dragging on the canvas
- Select objects using the selection tool
- Modify properties in the right sidebar
- Use keyboard shortcuts for efficient workflow
| Action | Windows/Linux | macOS |
|---|---|---|
| Undo | Ctrl + Z |
Cmd + Z |
| Redo | Ctrl + Shift + Z or Ctrl + Y |
Cmd + Shift + Z or Cmd + Y |
| Copy | Ctrl + C |
Cmd + C |
| Paste | Ctrl + V |
Cmd + V |
| Duplicate | Ctrl + D |
Cmd + D |
| Delete | Delete or Backspace |
Delete or Backspace |
- Click and drag to create rectangles
- Use resize handles to adjust size
- Hold Shift while resizing for proportional scaling
- Click and drag to create circles
- Radius adjusts based on drag distance
- Click to place text
- Edit content in the properties panel
- Customize font color and appearance
- Click to open file picker
- Supports all common image formats
- Auto-resizes large images while preserving aspect ratio
- Click and drag to draw freehand
- Creates smooth vector paths
- Customizable stroke width and color
- Frontend: React 18 + TypeScript
- Routing: TanStack Router
- State Management: Zustand
- Styling: Tailwind CSS + shadcn/ui
- Canvas: Native HTML5 Canvas API
- Build Tool: Vite
src/
├── components/ # React components
│ ├── Canvas.tsx # Main canvas component
│ ├── LeftSidebar.tsx # Tools and layers panel
│ ├── RightSidebar.tsx# Properties panel
│ └── ui/ # shadcn/ui components
├── store/ # Zustand store
│ └── drawingStore.ts # Main application state
├── routes/ # TanStack Router routes
└── types/ # TypeScript type definitions
- Why: Avoided react-konva and fabric.js due to dependency conflicts
- Benefit: Full control, better performance, no external dependencies
- Trade-off: More manual implementation but greater stability
- Why: Lightweight, TypeScript-friendly, minimal boilerplate
- Benefit: Simple API, excellent performance, easy testing
- Features: History management, real-time updates, action batching
- Why: Avoided canvas.node native dependencies
- Benefit: Works in all environments, no build complications
- Implementation: FileReader API + Image caching system
# Development
pnpm dev # Start dev server
pnpm build # Build for production
pnpm preview # Preview production build
pnpm lint # Run ESLint
pnpm type-check # Run TypeScript checks- TypeScript: Strict mode enabled
- ESLint: Standard configuration
- Prettier: Automatic formatting
- Conventions: React functional components, custom hooks
- Image Caching: Prevents redundant image loading
- Real-time Updates: Separate functions for smooth interactions
- History Batching: Prevents excessive undo/redo entries
- Canvas Optimization: Efficient redraw cycles
- Fork the repository
- Create a feature branch:
git checkout -b feature/amazing-feature - Commit changes:
git commit -m 'Add amazing feature' - Push to branch:
git push origin feature/amazing-feature - Open a Pull Request
- Follow TypeScript best practices
- Add tests for new features
- Update documentation for API changes
- Ensure cross-platform compatibility
This project is licensed under the MIT License - see the LICENSE.md file for details.
- shadcn/ui for the beautiful component library
- Lucide React for the icon set
- TanStack Router for modern routing
- Zustand for elegant state management
- Figma for design inspiration
- Large images may take time to load initially
- Complex pen drawings with many points may impact performance
- Browser zoom affects canvas coordinate calculations
- Layer reordering and grouping
- More shape tools (polygons, stars, arrows)
- Text formatting options (font family, size, weight)
- Export functionality (PNG, SVG, PDF)
- Collaborative editing
- Plugin system
- Mobile touch support
If you encounter any issues or have questions:
- Check the Issues page
- Create a new issue with detailed description
- Include browser version and steps to reproduce
Built with ❤️ using modern web technologies