Switch between landscape and portrait assets, adjust crop rules, watch selection values update in real time, then trigger scripted actions from the same panel.
Download Back To CSSScript.Com
A modern ES6+ image cropping library that ships as a Web Component and a headless API, with touch input, aspect ratio locking, and full CSS theming.
Switch between landscape and portrait assets, adjust crop rules, watch selection values update in real time, then trigger scripted actions from the same panel.
Use predefined crops to test how the widget responds to scripted selections, transitions, and image swaps without touching the canvas.
Run any preset to animate the crop area into position.
{}
These parallel widgets use the same component with different visual tokens, which makes the crop UI easy to adapt to editorial, dashboard, or media workflows.
Green handles highlight profile and avatar use cases. Dashed amber handles feel closer to editorial image selection on content-heavy layouts.
Focus the crop area, move the current selection with arrow keys, use Shift plus arrows for larger moves, press Enter to confirm, and press Escape to clear.
The widget is active. Click inside the image or use the focus button before testing keyboard movement.
The log below reflects crop changes, confirmed selections, cleared states, and load issues across the page. It helps verify event output without opening developer tools.
No events yet.
crop-change, crop-select, crop-release, and crop-error appear here with compact payload summaries.
Event output reveals how the widget communicates with surrounding UI, which is useful for save buttons, previews, validation rules, and editor integrations.