ImageEditor

Crop and focal point for one image, with optional rotate and flip. Use it in a dialog or a side panel when an image has to fit fixed shapes; the app does the actual image work through the callbacks.

ImageEditor

PreviewLink to the section Preview

Live in all three themes. Everything here is interactive.

Light theme, ImageEditor

Rotate and flip

Aspect ratio

Drag the frame or its corners. Arrow keys move it, Shift with an arrow key resizes it.

Left edge

Top edge

Width

Height

Dark theme, ImageEditor

Rotate and flip

Aspect ratio

Drag the frame or its corners. Arrow keys move it, Shift with an arrow key resizes it.

Left edge

Top edge

Width

Height

High contrast theme, ImageEditor

Rotate and flip

Aspect ratio

Drag the frame or its corners. Arrow keys move it, Shift with an arrow key resizes it.

Left edge

Top edge

Width

Height

UsageLink to the section Usage

tsx

import { ImageEditor } from '@skribly/ui/media'

tsx

<ImageEditor src={url} imageWidth={1920} imageHeight={1080} ratios={ratios}
  labels={labels} previews={[{ label: 'Square', ratio: 1 }]}
  onApplyCrop={crop} onSaveFocal={saveFocal} onRotate={rotate}
  status={result} isBusy={working} busyLabel="Working on the image" />

Every label is a prop, so the app passes its own words in its own language. See no built-in text.

AccessibilityLink to the section Accessibility

The crop frame is one tab stop, a slider that screen readers pass the arrow keys to: arrows move it, Shift and arrows resize it, and its position is read as words from cropValueText.
Number boxes set the exact edges and size, and two sliders set the focal point, so nothing needs a pointer.
Corners have 24px targets.
Outcomes appear in words with a glyph: errors are announced at once and others politely, and they stay until replaced.
The tools sit beside the preview when the editor is wide and under it otherwise; frame lines keep a contrasting edge on any image and use the system highlight in forced colours.

This demo runs through axe in all three themes on every test run. See what the tests check.