Fluxo UIFluxo UIv0.1.1

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. Edit the image and click Save to download.

100%
Aspect Ratio
import { ImageEditor } from 'fluxo-ui';

const handleSave = (blob: Blob, format: ExportFormat) => {
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = `edited-image.${format}`;
  a.click();
  URL.revokeObjectURL(url);
};

<ImageEditor
  src="https://picsum.photos/seed/fluxo/800/600"
  alt="Sample landscape"
  onSave={handleSave}
  onCancel={() => console.log('Cancelled')}
/>

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.

100%
Aspect Ratio
import { ImageEditor } from 'fluxo-ui';

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

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.

100%
0°
import { ImageEditor } from 'fluxo-ui';

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

Export Options

Control the output format, quality, and maximum dimensions via exportOptions.

Export Options

Configure export format, quality, and max dimensions. This example exports as JPEG at 80% quality with max 1200x900.

100%
Aspect Ratio
import { ImageEditor } from 'fluxo-ui';

<ImageEditor
  src="https://picsum.photos/seed/fluxo/800/600"
  exportOptions={{
    format: 'jpeg',
    quality: 0.8,
    maxWidth: 1200,
    maxHeight: 900,
  }}
  onSave={(blob, format) => {
    console.log(`Saved as ${format}, size: ${blob.size} bytes`);
  }}
/>

Import

import { ImageEditor } from 'fluxo-ui';
import type { ImageEditorProps, EditorTool, CropMode, ExportFormat, ExportOptions } 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.

onSave
(data: Blob, format: ExportFormat) => void

Called when the user saves the edited image.

onCancel
() => void

Called when the user cancels editing.

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.

exportOptions
Partial<ExportOptions>

Export settings: format (png, jpeg, webp), quality (0-1), maxWidth, maxHeight.

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

Available crop aspect ratio presets.

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.