Kiri

A dependency-free TypeScript library for interactive image cropping in the browser.

Drag, zoom, rotate, and flip an image inside a fixed frame. Apply brightness/contrast/saturation/grayscale/sepia filters. Export the crop as base64, a Blob, or a canvas — or upload it directly. Rectangle, circle, or rounded-rectangle frame, with circle/rounded-rectangle actually clipped in the exported image, not just shown as an overlay. Zero runtime dependencies, works via a plain <script> tag or from npm.

Zero-config quickstart

<link rel="stylesheet" href="node_modules/@michaelyagi/kiri/dist/kiri.min.css" />
<script src="node_modules/@michaelyagi/kiri/dist/kiri.min.js"></script>
<div id="cropper"></div>
<script>
  const cropper = new Kiri(document.getElementById("cropper"), {
    frame: { shape: "circle", width: 200, height: 200 },
  });
  await cropper.load("photo.jpg");
  const blob = await cropper.export({ type: "blob" });
</script>

No CSS sizing needed on the container — the stage auto-sizes itself to the frame's dimensions. See Getting started for npm/ESM installation too.

Where to go next