Fluxo UIFluxo UIv0.4.93

Image Editor

A full-featured image editor with crop, rotate, flip, blur, annotate, transparency, and tilt tools.

Basic Usage

Full Editor

Image editor with all tools enabled. Edits are emitted through onEditStateChange; the consumer decides what to do with the result.

Aspect Ratio
Edits captured: none
import { ImageEditor, type EditorState } from 'fluxo-ui';

function Editor() {
  const [editState, setEditState] = useState<EditorState | null>(null);

  const download = () => {
    if (!editState) return;
    const a = document.createElement('a');
    a.href = editState.flattened;
    a.download = 'edited-image.png';
    a.click();
  };

  return (
    <>
      <ImageEditor
        src="https://picsum.photos/seed/fluxo/800/600"
        alt="Sample landscape"
        editState={editState}
        onEditStateChange={setEditState}
      />
      <button onClick={download}>Download</button>
    </>
  );
}

Crop Only

Restrict the editor to a single tool by passing a one-element array to tools.

Crop Only

Editor restricted to crop tool with predefined aspect ratios.

Aspect Ratio
import { ImageEditor, type EditorState } from 'fluxo-ui';

const [editState, setEditState] = useState<EditorState | null>(null);

<ImageEditor
  src="https://picsum.photos/seed/fluxo/800/600"
  tools={['crop']}
  defaultTool="crop"
  cropModes={['custom', 'square', '16:9', '4:3', '1:1']}
  editState={editState}
  onEditStateChange={setEditState}
/>

Custom Tools

Choose a subset of tools and set which tool is active by default with defaultTool.

Custom Tool Subset

Editor with only crop, rotate, flip, and blur tools. Default tool set to rotate.

0°
import { ImageEditor, type EditorState } from 'fluxo-ui';

const [editState, setEditState] = useState<EditorState | null>(null);

<ImageEditor
  src="https://picsum.photos/seed/fluxo/800/600"
  tools={['crop', 'rotate', 'flip', 'blur']}
  defaultTool="rotate"
  maxHistory={20}
  editState={editState}
  onEditStateChange={setEditState}
/>

Persisted Edits

Store the snapshot from onEditStateChange and pass it back via editState to reopen the editor with crop, rotate, blur, and annotation layers intact — just like a controlled input.

Persisted Edits

Crop and annotate, then close and reopen the editor — the edits return as live, movable layers because the editor state is saved and restored.

Aspect Ratio
Saved edit state: none
import { ImageEditor, type EditorState } from 'fluxo-ui';

function Editor() {
  // Treat editState like a controlled input value: store what onEditStateChange
  // gives you, then pass it back as editState to reopen with the same edits.
  const [editState, setEditState] = useState<EditorState | null>(null);

  return (
    <ImageEditor
      src="https://picsum.photos/seed/fluxo-persist/800/600"
      editState={editState}
      onEditStateChange={setEditState}
    />
  );
}

Import

import { ImageEditor } from 'fluxo-ui';
import type { ImageEditorProps, EditorState, EditorTool, CropMode } from 'fluxo-ui';

Props

srcreq
string

URL of the image to edit.

alt
string

Alt text for the image.

width
number | string

Width of the editor container.

height
number | string

Height of the editor container.

tools
EditorTool[]"['crop', 'rotate', 'flip', 'blur', 'annotate', 'transparency', 'tilt']"

Array of tools to enable in the toolbar.

defaultTool
EditorTool

Tool to activate on mount.

maxHistory
number

Maximum number of undo/redo history entries.

className
string

Additional CSS class for the editor container.

cropModes
CropMode[]"['custom', 'square', 'circle', '16:9', '4:3', '3:2', '1:1']"

Available crop aspect ratio presets.

editState
EditorState | null

Saved editor state to restore on mount (crop, rotate, flip, blur, annotations, current base image). Pass back the object received from onEditStateChange to reopen with the same edits intact. Leave undefined for an uncontrolled editor that manages its own state.

onEditStateChange
(state: EditorState) => void

Called whenever the edits change, with a serializable snapshot of the full editor state. Persist it and pass it back via editState to restore the session later.

Features

Crop & Resize

Freeform and preset aspect ratio cropping with drag handles.

Rotate & Flip

Rotate 90 degrees or flip horizontally and vertically.

Blur Regions

Draw blur regions to obscure sensitive areas of the image.

Annotations

Draw freehand annotations directly on the image canvas.

Tilt & Transparency

Fine-tune image tilt angle and transparency level with sliders.

Undo/Redo History

Full history stack with configurable maximum entries.