SmartImageEditor

Media

AI-powered image upload with background removal and multi-variant processing pipeline. Preferred over ImageUpload in editor contexts. Two modes: simple (drop-in replacement, outputs blob URL) and editor (POST multipart to backend → variant grid with skeleton cells, per-cell regenerate, and checkerboard transparency preview).

Live Demo

Simple mode — drop-in replacement for ImageUpload. Outputs a blob URL without a backend.

Click to upload or drag and drop

PNG, JPG, WebP or SVG (max 10 MB)

Editor mode (requires backend)

Pass a spec prop with variant definitions to enable the AI pipeline (background removal + multi-size variants). Requires /api/admin/image/process.

<SmartImageEditor
  spec={{ removeBackground: true, variants: [
    { name: "og", width: 1200, height: 630, fit: "cover" },
    { name: "thumb", width: 400, height: 400, fit: "cover" },
  ] }}
/>

Usage

<script>
  import { SmartImageEditor } from "jatui"
</script>

<SmartImageEditor />

Props

Prop	Type	Default	Description
`value`	`string`	`""`	Result URL, blob URL in simple mode (bindable)
`spec`	`ImageProcessingSpec`	`undefined`	Processing spec — enables editor mode when provided
`uploadEndpoint`	`string`	`"/api/admin/image/process"`	Multipart POST endpoint for editor mode
`onComplete`	`(variants: VariantResult[]) => void`	`-`	Called when all variants finish processing
`accept`	`string`	`"image/png,image/jpeg,image/webp,image/svg+xml"`	Accepted MIME types
`maxSizeMb`	`number`	`10`	Max file size in MB