Introduction

svelte-advanced-cropper is a Svelte 5 image cropper built on the advanced-cropper geometry core. Start with a movable selection or a fixed frame, then customize its stencil, controls and visual layers using Svelte composition.

Install

Requires Svelte ^5.40.

pnpm add svelte-advanced-cropper

Import the structural stylesheet and default theme once, for example in your root layout:

import 'svelte-advanced-cropper/style.css';

Your first cropper

Supply an image URL and give the cropper a definite height. A max-height alone does not establish a height for percentage-sized children. The demo uses a child RectangleStencil to set its aspect ratio.

The same first example is used in the README. /photo.jpg is an application-owned public image; the live demo below substitutes a credited local photo through image() and uses the stylesheet already loaded by the site layout.

<script lang="ts">
	import { Cropper, RectangleStencil, type CropperInstance } from 'svelte-advanced-cropper';
	import 'svelte-advanced-cropper/style.css';

	let cropper: CropperInstance | undefined = $state();
	const coordinates = $derived(cropper?.getCoordinates());
</script>

<Cropper bind:this={cropper} src="/photo.jpg" style="height: 360px">
	<RectangleStencil aspectRatio={16 / 9} />
</Cropper>

{#if coordinates}
	<p>{coordinates.width} × {coordinates.height} pixels</p>
{/if}

<button type="button" disabled={!coordinates} onclick={() => cropper?.rotateImage(90)}>
	Rotate
</button>

Open Show code to see the complete example. bind:this exposes methods through CropperInstance; a $derived read of getCoordinates() updates as the user moves the selection. No callback is needed just to display state.

With no children, Cropper supplies a rectangle stencil. With children, you choose the stencil yourself. Configure core settings such as minWidth directly on Cropper and stencil options directly on the child.

Next steps