Image Editor Showcase
Some filters are not supported by some browsers
Drag and drop file here or
Component Documentation
Component Name
ImageEditor
Builder Function Name
create_image_editor_manager
Description
provides a comprehensive interface for editing images (crop, resize, filters, AI-based transformations, file export) within a popover or inline panel
Use like example
Config
| Property | Type | Default | Description |
|---|---|---|---|
| on_finish | function | invoked when the user taps 'Finish', receives the final edited file | |
| ai_image_generator | function | optional async function for generating an image from text, should return { is_success: boolean, data?: base64StringOrURL, error_message?: string } | |
| ai_remove_image_background | function | optional async function to remove an image’s background, returns { is_success: boolean, data?: fileUrl, error_message?: string } | |
| ai_restore_resolution | function | optional async function to upscale/rest. resolution, returns { is_success: boolean, data?: fileUrl, error_message?: string } | |
| ai_restore_face | function | optional async function to restore or enhance a face in an image |
Methods
| Method | Description | Parameters | Returns |
|---|---|---|---|
| init | initializes manager state, sets up popovers, panels, and button managers | config: object | void |
| init_file | assigns a new file for editing, sets up hidden image for transformations, updates UI states | file_input: object containing { file: File, file_name?: string, mime_type?: string } | void |
| on_destroy | cleanup callback run on svelte onDestroy, removes hidden image from the dom | No Params | void |
| set_screen_tab | switches the editor’s main tab: 'filters','crop','resize','ai','file' | screen_tab_loc: string | void |
| undo | reverts to a previous image state (if available) | No Params | void |
| redo | restores a more recent image state (if undone) | No Params | void |
| clear | clears the current image(s), resets to no file | No Params | void |
| finish | calls on_finish with the final edited file, closes the popover if in popover mode | No Params | void |
| set_base_image | sets the hidden base image src, resets transformations | new_src: string (data url or blob url) | void |
| apply_filters | applies current filter settings to the canvas, saves updated data url to the history stack | No Params | void |
| reset_filters | resets all filter sliders to their default values | No Params | void |
| main_image_transformer | the core function that assembles the image changes (crop, resize, filter) into the final canvas | No Params | void |
| crop_on_up | cancels the current pointer-based crop action when pointer is lifted | e: event | void |
| crop_on_move | moves or resizes the crop box based on user pointer drag, updating internal state | e: event | void |
| crop_on_down | begins the pointer-based crop drag from a handle or the main area, storing initial positions | e: event type: string (the drag handle name) | void |
| set_crop_box | sets the crop area to a given aspect ratio or free if w/h are null | w: number or null h: number or null | void |
| crop_image | applies the crop changes into a new data url, updates the history stack | w: number or null h: number or null | void |
| toggle_is_lock_resize_aspect_ratio | toggles aspect ratio lock for resizing | No Params | void |
| set_resize_dimensions | updates the width/height for resizing, honoring aspect ratio lock if enabled | w: number or null h: number or null | void |
| file_input_change | handles changes to file name, mime type, or quality; triggers a file size recalculation for the edited image | file_name: string mime_type: string quality: number | void |
| download_image | downloads the currently displayed image as a file with the specified mime type and name | No Params | void |
| set_file_from_inputs | applies the chosen file name, mime type, quality changes to the final data url, updates state | No Params | void |
| drop_handler | handles drag-drop events for files, calls init_file if a valid image file is found | e: drag-event | void |
Returned Properties
| Property | Type | Description |
|---|---|---|
| id | string | unique id for this editor instance |
| file_picker_file | object | the initially picked file object if set |
| image_sources | array | an array of data urls for undo/redo functionality (history stack) |
| image_source_index | number | the current index in the history stack |
| selected_image_source | string | the currently displayed image data url |
| screen_tab | string | the active tab in the editor: 'filters','crop','resize','ai','file' |
| crop_left | number | the crop box left position in canvas px |
| crop_top | number | the crop box top position in canvas px |
| crop_width | number | the crop box width in canvas px |
| crop_height | number | the crop box height in canvas px |
| is_disabled | boolean | disables the editor UI if true |
| current_image_width | number | the current image’s actual width after base or transformations |
| current_image_height | number | the current image’s actual height after base or transformations |
| image_pixels_crop_width | number | the final cropped width in pixels |
| image_pixels_crop_height | number | the final cropped height in pixels |
| current_image_ar | number | the current image aspect ratio after transformations (width/height) |
| crop_aspect_ratio | number | the aspect ratio for the crop box if set, else null for free |
| is_lock_resize_aspect_ratio | boolean | if true, the width/height maintain the original aspect ratio |
| resize_width | number | the final width after resizing |
| resize_height | number | the final height after resizing |
| file_size_data | object | metadata on file size at various qualities (for certain formats) |
| mime_type_input | string | the user-selected mime type for the final image |
| file_size_kb | number | the approximate size in kilobytes of the final image at the chosen settings |
| file_name | string | the base name for the final file |
| file_name_derived | string | the sanitized version of the file name (alphanumeric, underscores, etc.) |
| file_name_derived_with_extension | string | the final file name with an appropriate file extension |
| ai_error_message | string | error messages generated by AI tasks (removing BG, upscaling, etc.) |
| file_input_manager | object | manages the underlying file input used to load images |
| screen_tab_filters_button_manager | object | button manager to open the 'filters' tab |
| screen_tab_crop_button_manager | object | button manager to open the 'crop' tab |
| screen_tab_resize_button_manager | object | button manager to open the 'resize' tab |
| screen_tab_ai_button_manager | object | button manager to open the 'ai' tab |
| screen_tab_file_button_manager | object | button manager to open the 'file' tab |
| undo_button_manager | object | button manager for undo |
| redo_button_manager | object | button manager for redo |
| clear_button_manager | object | button manager that clears all images from the editor |
| finish_button_manager | object | button manager that finalizes editing |
| filter_brightness_slider_manager | object | slider manager controlling brightness |
| filter_contrast_slider_manager | object | slider manager controlling contrast |
| filter_saturation_slider_manager | object | slider manager controlling saturation |
| filter_grayscale_slider_manager | object | slider manager controlling grayscale |
| filter_hue_slider_manager | object | slider manager controlling hue rotation |
| filter_red_slider_manager | object | slider manager controlling red channel |
| filter_green_slider_manager | object | slider manager controlling green channel |
| filter_blue_slider_manager | object | slider manager controlling blue channel |
| filter_blur_slider_manager | object | slider manager controlling blur effect |
| filter_opacity_slider_manager | object | slider manager controlling opacity |
| filters_set_default_button_manager | object | button manager to reset filter sliders to default |
| filters_apply_filters_button_manager | object | button manager to apply filters permanently and store in history stack |
| crop_free_button_manager | object | button manager setting the crop box to free aspect ratio |
| crop_one_to_one_button_manager | object | button manager for 1:1 aspect ratio |
| crop_four_to_three_button_manager | object | button manager for 4:3 aspect ratio |
| crop_three_to_two_button_manager | object | button manager for 3:2 aspect ratio |
| crop_sixteen_to_nine_button_manager | object | button manager for 16:9 aspect ratio |
| crop_three_to_four_button_manager | object | button manager for 3:4 aspect ratio |
| crop_two_to_three_button_manager | object | button manager for 2:3 aspect ratio |
| crop_nine_to_sixteen_button_manager | object | button manager for 9:16 aspect ratio |
| crop_width_ratio_text_input_manager | object | text input manager specifying custom crop aspect ratio width |
| crop_height_ratio_text_input_manager | object | text input manager specifying custom crop aspect ratio height |
| crop_image_button_manager | object | button manager that applies the current crop to the image |
| crop_aspect_width_loc | number | the currently set aspect ratio width for custom crop |
| crop_aspect_height_loc | number | the currently set aspect ratio height for custom crop |
| file_name_text_input_manager | object | text input manager controlling the user’s chosen file name |
| mime_type_webp_button_manager | object | button manager to select webp output format |
| mime_type_jpeg_button_manager | object | button manager to select jpeg output format |
| mime_type_png_button_manager | object | button manager to select png output format |
| download_image_button_manager | object | button manager to download the final image |
| set_file_changes_button_manager | object | button manager to apply the chosen file name, mime type, quality |
| shown_file_size_data | object | the data for the currently selected mime type’s file size chart, if available |
| file_quality_slider_manager | object | slider manager for adjusting export compression quality (1–100) |
| ai_tab_dropdown_manager | object | dropdown manager to switch among AI-related tasks |
| ai_image_generator_is_loading | boolean | true if the text-to-image AI call is in progress |
| ai_generate_image_from_text_text_input_manager | object | text input manager containing the user’s text prompt for AI image generation |
| ai_generate_image_images_prompt_file_input_manager | object | file input manager containing the user’s image prompt for AI image generation |
| ai_generate_image_include_workspace_in_images_prompt_checkbox_manager | object | checkbox input manager containing if include workspace image in image prompt for AI image generation |
| ai_generate_image_from_text_button_manager | object | button manager to trigger AI image generation from text |
| ai_remove_bg_button_manager | object | button manager to trigger AI background removal |
| ai_restore_resolution_button_manager | object | button manager to trigger AI resolution restoration (upscale) |
| ai_restore_face_button_manager | object | button manager to restore a face in an image via AI |
| resize_width_dropdown_manager | object | dropdown manager specifying common width values for resize |
| resize_height_dropdown_manager | object | dropdown manager specifying common height values for resize |
| resize_width_text_input_manager | object | text input manager specifying custom resize width |
| resize_height_text_input_manager | object | text input manager specifying custom resize height |
| resize_aspect_ratio_lock_button_manager | object | button manager toggling aspect ratio lock for resizing |
| resize_image_button_manager | object | button manager that applies the resize changes |
| is_popover | boolean | if true, the entire editor appears in a popover |
| popover_manager | object | popover manager controlling the editor’s popover if is_popover is true |
