Filter is a powerful, web-based image editor built with React and TypeScript. It provides a modern, intuitive interface for quick image edits and filters, optimized for both desktop and mobile devices.
- 🖼️ Intuitive Image Editing: Easy-to-use interface for basic and advanced image modifications
- 📱 Mobile-Optimized: Fully responsive design that works great on all devices
- 🎨 Rich Editing Tools: Including crop, rotate, adjust, filters, and more
- ⚡ Fast Processing: Client-side image processing for quick edits
- 💾 Easy Export: Download edited images in various formats
- 🎯 Preset Crops: Common aspect ratios for social media and web use
Try out Filter at: https://filter.addy.ie
- React 18
- TypeScript
- Vite
- Tailwind CSS
- Filerobot Image Editor
- Lucide Icons
-
Clone the repository:
git clone https://github.com/addyosmani/filter.git cd filter -
Install dependencies:
npm install
-
Start the development server:
npm run dev
-
Build for production:
npm run build
The editor can be customized through the src/config/editorConfig.ts file:
- Theme colors and typography
- Default tools and tabs
- Crop presets
- Supported fonts
- Translations
Filter is designed to be fully responsive and touch-friendly. Key mobile features include:
- Touch gesture support
- Mobile-optimized UI
- Responsive layout
- Performance optimizations
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.
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
For support, please open an issue in the GitHub repository or contact the maintainers.
Made with ❤️ by Addy Osmani