Getting Started

Install svelte-chop-chop and add image cropping to your Svelte 5 app in minutes.

Installation

npm install @we-are-singular/svelte-chop-chop

Peer dependencies

Only Svelte 5 is required as a peer dependency:

peerDependencies:
  svelte: "^5.0.0"

Basic cropper

Import the Cropper component and pass it an image source:

<script lang="ts">
  import { Cropper } from '@we-are-singular/svelte-chop-chop';
  import '@we-are-singular/svelte-chop-chop/themes/default';

  let cropper = $state<ReturnType<typeof Cropper.create>>();

  async function crop() {
    const blob = await cropper?.export({ format: 'image/webp', quality: 0.9 });
    // use the blob...
  }
</script>

<Cropper
  bind:this={cropper}
  src="/photo.jpg"
  aspectRatio={1}
/>
<button onclick={crop}>Crop</button>

Full image editor

The ImageEditor component bundles crop, filters, finetune, rotate, resize, frame and watermark panels:

<script lang="ts">
  import { ImageEditor } from '@we-are-singular/svelte-chop-chop';
  import { pluginFilters } from '@we-are-singular/svelte-chop-chop/plugins/filters';
  import { pluginFinetune } from '@we-are-singular/svelte-chop-chop/plugins/finetune';
  import { pluginFrame } from '@we-are-singular/svelte-chop-chop/plugins/frame';
  import { pluginWatermark } from '@we-are-singular/svelte-chop-chop/plugins/watermark';
  import { pluginResize } from '@we-are-singular/svelte-chop-chop/plugins/resize';
  import '@we-are-singular/svelte-chop-chop/themes/default';
</script>

<ImageEditor
  src="/photo.jpg"
  plugins={[pluginFilters(), pluginFinetune(), pluginFrame(), pluginWatermark(), pluginResize()]}
  onexport={(blob) => console.log('exported', blob)}
/>

Headless composable

Need full UI control? Use createCropper directly:

<script lang="ts">
  import { createCropper } from '@we-are-singular/svelte-chop-chop/headless';

  const cropper = createCropper({
    aspectRatio: 16 / 9,
    minWidth: 100,
    minHeight: 100,
  });
</script>

<div use:cropper.bindContainer class="my-container">
  <img use:cropper.bindImage src="/photo.jpg" alt="" />
</div>

CSS themes

Three themes are included. Import exactly one:

import '@we-are-singular/svelte-chop-chop/themes/default'; // recommended
import '@we-are-singular/svelte-chop-chop/themes/dark';
import '@we-are-singular/svelte-chop-chop/themes/minimal';