Download the PHP package pjedesigns/filament-image-editor without Composer
On this page you can find all versions of the php package pjedesigns/filament-image-editor. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download pjedesigns/filament-image-editor
More information about pjedesigns/filament-image-editor
Files in pjedesigns/filament-image-editor
Package filament-image-editor
Short Description A powerful, client-side image editor for Laravel Filament applications with crop, filter, and annotation tools
License MIT
Homepage https://github.com/pjedesigns/filament-image-editor
Informations about the package filament-image-editor
Filament Image Editor
A powerful, client-side image editor plugin for Laravel Filament applications with crop, filter, and annotation tools.
Features
- 🖼️ Crop & Transform - Crop with aspect ratio presets, rotate, and flip images
- 🎨 Filters & Adjustments - Apply preset filters and adjust brightness, contrast, saturation
- ✏️ Draw & Annotate - Freehand drawing, shapes, arrows, and text annotations
- ⏪ Undo/Redo - Full history support with keyboard shortcuts
- 📱 Responsive - Works on desktop and tablet devices
- 🌙 Dark Mode - Full dark mode support matching Filament's theme
- 💾 Flexible Storage - Works with Laravel Storage or Spatie Media Library
Requirements
- PHP 8.2+
- Laravel 12+
- Filament v4/v5
- Livewire v3/v4
Installation
Install the package via Composer:
Publish the config file (optional):
Basic Usage
Use the ImageEditor field in your Filament form:
Configuration
Storage Options
Configure how images are stored:
Filename Options
By default, images are saved with a UUID filename (e.g., 550e8400-e29b-41d4-a716-446655440000.jpg). Use shouldPreserveFilenames() to keep the original filename:
The original filename is slugified (lowercase, special characters replaced with hyphens) and the extension is set based on the output format.
With Spatie Media Library
Important: This component only supports single-file collections. When defining your Spatie Media Library collection on the model, you must use
->singleFile():
Dynamic custom properties (using the current record)
You can pass a Closure to customProperties() to generate properties based on the current record:
Editor Behavior
The previewMaxHeight option controls the maximum height of the image preview on the form. Images smaller than this height will display at their natural size without stretching, while larger images will be constrained to the max height. This prevents pixelation when displaying smaller conversion images.
When openOnSelect(false) is set:
- Images are uploaded directly without opening the editor
- The thumbnail appears with an "Edit" button overlay
- Users can optionally click "Edit" to make changes later
Crop Options
Filter Options
Drawing Options
Output Options
Validation
History & Shortcuts
Keyboard Shortcuts
When the editor is open:
| Shortcut | Action |
|---|---|
Ctrl/Cmd + Z |
Undo |
Ctrl/Cmd + Y |
Redo |
Ctrl/Cmd + Shift + Z |
Redo |
Delete / Backspace |
Delete selected shape |
Ctrl/Cmd + D |
Duplicate selected |
Escape |
Deselect / Cancel |
Zoom & Pan Controls
The editor provides several ways to zoom and pan around the image:
Zooming
- Mouse wheel - Scroll up/down to zoom in/out (zooms to cursor position)
- Zoom dropdown - Select preset zoom levels (Fit, 50%, 100%, 200%)
- Zoom buttons - Use +/- buttons in the bottom toolbar
Panning (when zoomed in)
- Alt + Click & Drag - Hold Alt key and drag to pan the canvas
- Middle Mouse Button - Click and drag with middle mouse button to pan
The "Fit" option in the zoom dropdown resets the view to fit the entire image in the viewport.
Standalone Livewire Component
You can also use the editor as a standalone Livewire component:
JavaScript API
For programmatic usage outside of Livewire:
Configuration File
After publishing the config, you can set defaults in config/filament-image-editor.php:
Testing
Running Tests in Your Application
For full test coverage including Livewire integration tests, publish the tests to your Laravel application:
This publishes tests to tests/Feature/FilamentImageEditor/ and runs all 44 tests including:
- Storage Tests - Saving images to disk, directory configuration, file extensions
- Spatie Media Library Tests - Collection, conversion, responsive images configuration
- Field Configuration Tests - All form field options and closures
Package Development
When developing the package itself:
Note: Livewire integration tests require a full Laravel application context and will be skipped when running standalone via
composer test. Use the publish method above or run via a Laravel application for complete test coverage.
Changelog
Please see CHANGELOG for more information on what has changed recently.
Contributing
Please see CONTRIBUTING for details.
Security
If you discover any security-related issues, please email [email protected] instead of using the issue tracker.
Credits
- Paul Egan
- All Contributors
License
The MIT License (MIT). Please see License File for more information.
All versions of filament-image-editor with dependencies
filament/filament Version ^4.0|^5.0
livewire/livewire Version ^3.0|^4.0
spatie/laravel-package-tools Version ^1.16