v2.3 • UI • 13kb gzipped • MIT
CropStudio
An image cropper with aspect locks, rotation and touch gestures that feel native.
// why cropstudio
Gestures that feel right
Pinch, pan and rotate resolve against a single transform, so two fingers never fight each other.
// stack
Output you control
Returns a canvas, a blob or crop coordinates. Nothing is uploaded and no service is involved.
CropStudio started as a single file in a client project and stayed small on purpose. It does one job, it does it in 13kb gzipped, and it has no runtime dependencies.
Getting started
Install it, import it, call it:
npm i cropstudio-jsPinch, pan and rotate resolve against a single transform, so two fingers never fight each other.
What it does not do
It does not manage your state, style your components or ship a plugin system. Those are your decisions, and keeping them out is what keeps the bundle honest.
- Unified gesture handling
- Aspect locks and free crop
- MIT licensed, commercially friendly
Features
Unified gesture handling
Pinch, pan and rotate compose into one matrix rather than three competing handlers.
Aspect locks and free crop
Switch between locked ratios and free cropping without losing the current selection.
Dark mode ready
Reads from CSS custom properties, so a theme switch needs no JavaScript at all.
Container aware
Adapts to the box it is given rather than the viewport, so it works in a sidebar.
Accessibility audited
Tested against screen readers on three platforms, with the findings published in the repository.
ESM and types
Ships module and CommonJS builds with hand-written type definitions and source maps.
Get CropStudio v2.3
5 files • .min.js 13kb • .zip 73kb • sha384 verified
Changelog
- Rotation with aspect lock
- Blob export honours EXIF orientation
- Gesture handling unified
- Safari 16 compatibility fixes
- Bundle size reduced by eleven percent
- Improved error messages for invalid options
- Added twenty regression tests
// related
Related products
ChartForge
Canvas charts in twelve lines. Responsive, accessible and dark-mode ready, with no D3 learning curve.
View →MotionEase
Physics-based micro-animations with a single call. Spring curves that feel right without a tuning session.
View →FormFlow
Validation and multi-step logic that works the same in React, Vue and vanilla. Your markup stays yours.
View →Ship the interface today.
MIT licensed. Commercial friendly. Five-minute setup.