ImgEditor

Non-destructive image editor built on an edit-chain architecture. Each Apply appends an EditStep (rotate / flip / level / crop) to a chain that can be replayed server-side or undone client-side. The default surface shows the focal point and safe area used for smart thumbnail generation.

Basic

Pass a src URL. Use the toolbar to switch between Orientation, Leveling, and Crop modes — each has an Apply button that commits the change to the edit chain. Undo replays the chain from the original.

Image:

Feature toggles

Disable individual features with boolean props. All default to true. Feature flags are captured at mount. The example remounts the editor when they change; disabling a feature hides its controls.

Controlled with data state

Pass an initial ImgEditorData via value and use onchange to capture every update. The output contains the full edit chain and normalized focal point / safe area, ready to be persisted or replayed.

ImgEditorData output 
{
  "src": "https://picsum.photos/seed/portrait/1080/1440",
  "steps": [],
  "focalPoint": {
    "x": 0.5,
    "y": 0.5
  },
  "safeArea": {
    "x": 0.25,
    "y": 0.25,
    "w": 0.5,
    "h": 0.5
  }
}