simple-react-app-kit/packages/cropper/docs/en-US/overview.mdx

---
title: Overview
description: Pan, zoom, calculate, and export image crops in React.
order: 1
toc:
  - id: package-role
    title: Package role
  - id: capabilities
    title: Capabilities
  - id: data-model
    title: Data model
---

## Package role {#package-role}

`@workspace/cropper` provides fixed-viewport image cropping. Users move and scale an image inside the viewport while the component reports the crop in source-image pixels. It owns interaction and geometry, but does not upload, store, or mutate the original file.

## Capabilities {#capabilities}

- Mouse and touch dragging.
- Pinch, wheel, double-click, and keyboard zooming.
- Controlled and uncontrolled state.
- Rectangular and circular viewports.
- Numeric and `"width:height"` viewport ratios.
- URL and local `Blob` image sources with automatic object URL cleanup.
- Resize-aware image constraints.
- Standalone pure geometry functions.
- Imperative reset, crop-area access, and export through a component ref.
- Canvas export to PNG, JPEG, or WebP Blob/base64 output.

## Data model {#data-model}

In `CropperValue`, `x` and `y` are CSS-pixel offsets from the viewport center and `zoom` is relative to the cover fit. `CropArea` uses source-image pixels, so it can be sent to an image service or passed directly to `cropImage()` for browser-side export.