A modern, fast, and intuitive paint and photo editor built with Preact and Vite. Create digital artwork or edit photos with a comprehensive set of tools, all running smoothly in your browser with dark mode support.
- Draw with brush, pencil, eraser, fill, rectangle, ellipse, line, and text tools
- Adjustable brush size and color picker
- Undo/redo and clear canvas
- Zoom in/out and reset zoom
- Load images as backgrounds
- Export your artwork as PNG, JPEG, or WEBP
- Load and edit photos with non-destructive controls
- Adjust brightness, contrast, saturation, blur, and hue
- Crop images with precise selection overlay (works at all zoom levels)
- Rotate, flip (horizontal/vertical), and scale images
- Undo/redo for all photo edits
- Reset filters and transformations
- Modern, responsive UI with sidebar for quick access to tools
- 🌙 Dark Mode Support - Light/Dark/System theme options
- Keyboard shortcuts for common actions (new canvas, open image, help, etc.)
- Helpful tooltips and help modal
- Error handling and loading indicators
- Cross-platform compatibility (desktop, tablet, mobile)
- Frontend: Preact - Fast 3kB alternative to React
- Build Tool: Vite - Lightning fast build tool
- Styling: CSS3 with CSS Variables for theming
- State Management: Context API with hooks
- Image Processing: HTML5 Canvas API
- Testing: Puppeteer for UI evidence capture
- Node.js (LTS/jod version recommended)
- Yarn package manager
-
Clone the repository:
git clone <your-repo-url> cd paintshop
-
Install dependencies:
yarn install
-
Start development server:
yarn dev
-
Open your browser to
http://localhost:5173
# Development
yarn dev # Start development server with hot reload
yarn build # Build for production
yarn preview # Build and preview production locally
# Utilities
yarn capture-evidence # Capture UI screenshots for testing
yarn analyze-ui # Full UI analysis workflow- Upload an Image: Drag and drop an image file or click the upload area
- Choose Mode: Toggle between Paint mode (🎨) and Photo Edit mode (🖼️)
- Edit: Use the comprehensive tools and controls to edit your image
- Theme: Switch between Light/Dark/System themes using the theme toggle
- Export: Click the Export button to download your edited image in various formats
- Supported Formats: JPEG, PNG, GIF, WebP
- Maximum File Size: 10MB
- Maximum Dimensions: 4096x4096 pixels
- Export Formats: PNG, JPEG, WebP with quality control
- Chrome 88+
- Firefox 84+
- Safari 14+
- Edge 88+
The application includes several performance optimizations:
- Throttled drawing operations (60fps)
- Debounced filter applications
- Optimized canvas operations
- Memory-efficient undo/redo stacks
- Image compression for large files
Comprehensive error handling covers:
- Unsupported file formats
- File size limits
- Canvas operation failures
- Memory constraints
- Network errors
Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.
- Follow the existing code style and patterns
- Test your changes thoroughly
- Update documentation as needed
- Use meaningful commit messages
The project includes automated UI evidence capture. Screenshots are generated in the evidence/ folder showing the application across different screen sizes and modes.
This project is licensed under the MIT License - see the LICENSE file for details.