Components / Media

Image Editor

Component + manager

Provides a comprehensive interface for editing images (crop, resize, filters, AI-based transformations, file export) within a popover or inline panel.

Preview

Usage

API reference

Live preview

Interactive example

Loading example…

Usage

Import the component and its manager, then make it your own.

ComponentImageEditor

Managercreate_image_editor_manager

svelte

<script>
  // Import the shared stylesheet once in your application's root layout.
  import "sveltekit-ui/style.css"
  import { ImageEditor, create_image_editor_manager, Button } from "sveltekit-ui"

  let saved_name = $state("")

  const manager = create_image_editor_manager({
    is_popover: false,
    on_finish: (file) => { saved_name = file?.name ?? "" },
  })
</script>

<p>Choose a local image, adjust its crop or filters, then select Finish.</p>
<ImageEditor {manager} />
<Button manager={manager.finish_button_manager} />
{#if saved_name}<p role="status">Edited file: {saved_name}</p>{/if}

API reference

Configure the manager, call its methods, and read its reactive state.

5 entries in configuration

Property	Type	Default	Description
`on_finish`	`function`	`null`	invoked when the user taps 'Finish', receives the final edited file
`ai_image_generator`	`function`	`null`	optional async function for generating an image from text, should return { is_success: boolean, data?: base64StringOrURL, error_message?: string }
`ai_remove_image_background`	`function`	`null`	optional async function to remove an image’s background, returns { is_success: boolean, data?: fileUrl, error_message?: string }
`ai_restore_resolution`	`function`	`null`	optional async function to upscale/rest. resolution, returns { is_success: boolean, data?: fileUrl, error_message?: string }
`ai_restore_face`	`function`	`null`	optional async function to restore or enhance a face in an image