React Image Editor

• Upload & Display: Drag-and-drop or click to upload images (PNG, JPEG, WebP, GIF)
• Download: Export edited images in high quality
• Real-time Preview: See changes instantly as you edit

• Brightness: Adjust image brightness (-100 to +100)
• Contrast: Enhance or reduce contrast (-100 to +100)
• Grayscale: Convert to grayscale with intensity control
• Sepia: Apply vintage sepia tone effect
• Blur: Add blur effect with adjustable radius
• Invert: Invert colors for negative effect

• Rotate: 90°, 180°, 270° rotation
• Flip: Horizontal and vertical flipping
• Resize: Custom dimensions with aspect ratio options
• Crop: Select and crop specific regions (with visual overlay)

• Undo/Redo: Full editing history (up to 50 states)
• Non-destructive Editing: Original image always preserved
• Performance Optimized: Efficient Canvas API operations
• Responsive Design: Works on desktop, tablet, and mobile
• Keyboard Shortcuts: Ctrl+Z (undo), Ctrl+Y (redo)

• Node.js 18.0+
• npm 8.0+ or yarn 1.22+

1. Clone the repository

   git clone https://github.com/yuis-ice/react-image-editor.git
   cd react-image-editor

2. Install dependencies

   npm install
   # or
   yarn install

3. Start development server

   npm run dev
   # or
   yarn dev

4. Open your browser Navigate to http://localhost:5174

npm run build
# or
yarn build

The built files will be in the dist/ directory.

1. Upload an Image: Click the upload button or drag & drop an image
2. Apply Filters: Use the filter panel to adjust brightness, contrast, etc.
3. Transform: Rotate, flip, or resize your image
4. Crop (if needed): Select the crop tool and drag to select an area
5. Undo/Redo: Use the history buttons or keyboard shortcuts
6. Download: Save your edited image

react-image-editor/
├── 📁 src/
│   ├── 📁 components/          # React components
│   │   ├── CanvasComponent.tsx # Main canvas display
│   │   ├── FilterPanel.tsx     # Filter controls
│   │   ├── TransformPanel.tsx  # Transform controls
│   │   ├── ToolBar.tsx         # Tool selection
│   │   └── FileControls.tsx    # File operations
│   ├── 📁 store/              # Zustand stores
│   │   └── imageEditorStore.ts # Main state store
│   ├── 📁 utils/              # Utility functions
│   │   └── imageProcessor.ts   # Canvas API operations
│   ├── 📁 styles/             # CSS styles
│   └── 📄 App.tsx             # Main application
├── 📁 public/                 # Static assets
├── 📁 .github/                # GitHub templates
└── 📄 package.json            # Dependencies

The application uses Zustand for state management with the following structure:

interface ImageState {
  // Image data
  originalImage: HTMLImageElement | null;
  currentImageData: ImageData | null;
  
  // Filters
  brightness: number;
  contrast: number;
  grayscale: number;
  sepia: number;
  blur: number;
  invert: boolean;
  
  // Transformations
  rotation: number;
  flipHorizontal: boolean;
  flipVertical: boolean;
  width: number;
  height: number;
  
  // History
  history: ImageState[];
  currentHistoryIndex: number;
  
  // UI state
  selectedTool: Tool;
  cropArea: CropArea | null;
}

We welcome contributions! Please see our Contributing Guide for details.

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

• Follow the TypeScript style guide
• Use Canvas API for image operations (avoid external libraries)
• Write tests for new features
• Update documentation for API changes
• Follow the existing code style and patterns

// Apply filters to image
applyFilters(imageData: ImageData, filters: FilterState): ImageData

// Transform image (rotate, flip, resize)
transformImage(image: HTMLImageElement, transforms: TransformState): ImageData

// Crop image to specified area
cropImage(imageData: ImageData, cropArea: CropArea): ImageData

// Load new image
loadImage(file: File): void

// Apply filter changes
updateFilter(filterName: string, value: number): void

// Undo/Redo operations
undo(): void
redo(): void

// Save current state to history
saveToHistory(): void

# Run all tests
npm test

# Run tests in watch mode
npm run test:watch

# Run tests with coverage
npm run test:coverage

• Large Images: Consider resizing before editing for better performance
• Multiple Filters: Apply filters in batch when possible
• Memory: Use the crop tool to reduce image size for complex operations

Note: Mobile support is limited due to canvas performance constraints.

This project is licensed under the MIT License. See the LICENSE file for details.

• Canvas API for powerful image manipulation capabilities
• Zustand for elegant state management
• Vite for lightning-fast development experience
• React Team for the amazing framework
• TypeScript Team for type safety

• 📚 Documentation
• 🐛 Bug Reports
• 💡 Feature Requests
• 💬 Discussions
• 🚀 Live Demo

• Advanced Filters: HSL, curves, levels
• Layer System: Multiple image layers
• Drawing Tools: Brush, shapes, text
• Batch Processing: Edit multiple images
• Plugin System: Extensible architecture
• Cloud Storage: Save/load from cloud
• AI Features: Auto-enhance, object removal
• Mobile App: React Native version

• Node.js 18+ (recommended)
• npm or yarn

1. Install dependencies:

npm install

2. Start the development server:

npm run dev

3. Open your browser and navigate to http://localhost:5173

npm run build

The built files will be in the dist directory.

1. Load an Image: Click "Open Image" to select an image file from your device
2. Apply Filters: Use the sliders to adjust brightness, contrast, and grayscale
3. Transform: Rotate or flip your image using the transform controls
4. Resize: Click "Resize" to change the image dimensions
5. Undo/Redo: Use the history controls to navigate through your edits
6. Download: Save your edited image by clicking "Download"

Filters are applied using pixel-by-pixel manipulation of ImageData:

• Brightness: Adds/subtracts values from RGB channels
• Contrast: Applies contrast formula: factor * (pixel - 128) + 128
• Grayscale: Converts to grayscale using luminance formula: 0.299*R + 0.587*G + 0.114*B

Transformations use Canvas 2D context methods:

• Rotation: Uses context.rotate() with angle conversion
• Flip: Uses context.scale() with negative values
• Resize: Uses drawImage() with scaling parameters

• Automatic snapshots before significant operations
• Efficient memory usage with ImageData cloning
• Configurable history size (default: 50 operations)

• Chrome 80+
• Firefox 75+
• Safari 13+
• Edge 80+

This project is licensed under the MIT License.

• Advanced cropping tool with visual selection
• Additional filters (blur, sharpen, sepia)
• Layer support
• Batch processing
• Keyboard shortcuts
• Export to multiple formats (JPEG, WebP)
• Performance optimizations for large images
• Touch/mobile gesture support

You can also install eslint-plugin-react-x and eslint-plugin-react-dom for React-specific lint rules:

// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'

export default tseslint.config([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      // Other configs...
      // Enable lint rules for React
      reactX.configs['recommended-typescript'],
      // Enable lint rules for React DOM
      reactDom.configs.recommended,
    ],
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.node.json', './tsconfig.app.json'],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
])