Customizable crop and zoom.

Usage no npm install needed!

<script type="module">
  import codeurCropit from 'https://cdn.skypack.dev/@codeur/cropit';



CDNJS jsDelivr Hits

Customizable crop and zoom.

See demos and docs here.

Built on top of Yufei Liu's Image Editor.


# Install cropit with bower
$ bower install cropit

# or with npm
$ npm install cropit

Migrating to v0.5

v0.5 introduced rotation feature and improved performance, as well as a breaking changes in markup structure and class names.

Markup in v0.4:

<div class="image-editor">
  <!-- .cropit-image-preview-container is needed for background image to work -->
  <div class="cropit-image-preview-container">
    <div class="cropit-image-preview"></div>
  <!-- Other stuff -->

New markup in v0.5:

<div class="image-editor">
  <div class="cropit-preview"></div>
  <!-- Other stuff -->

Note that .cropit-image-preview-container element is no longer needed, and all you need is a .cropit-preview (previously .cropit-image-preview) whether or not you want image background that goes beyond the preview area. New markup structure (after cropit is initialized) is as follows:


Note the class name changes:

.cropit-image-preview              => .cropit-preview
.cropit-image-background-container => .cropit-preview-background-container
.cropit-image-background           => .cropit-preview-background

Make sure to update class names in your selectors.


  • Build: webpack
    • Watch for changes and rebuild: webpack -w
  • Test: npm test
    • Test specific file: jest <filename>
  • Lint: npm run jshint -s