Live examples
Every example below is owned by this repository and served with the docs. They use the same Vue 2 runtime and vue-croppa v1 bundle copied from the existing project build during docs preparation.
The same pages are exercised by Playwright, so the docs examples double as executable regression fixtures rather than external CodePen embeds.
Core cropping
Basic
Basic cropInitial image, drag/zoom controls, whitespace constraints, and metadata.
Open demo ↗File input
Choose, drop, replace, removeNative file input and image lifecycle events.
Open demo ↗Manipulation
Programmatic manipulationMovement, zoom, rotation, and flips.
Open demo ↗Zoom slider
Zoom sliderA first-party range control drives Croppa's current scale.
Open demo ↗Responsive auto-sizing
Responsive / auto-sizingChange the live component dimensions and verify its actual output geometry.
Open demo ↗Output recipes
Blob and data URL
Blob and data URLGenerate and inspect the real cropped output.
Open demo ↗Prepare an upload
Blob → FormDataBuild a real FormData payload locally without sending data to a third party.
Open demo ↗Download the crop
Download recipeGenerate a first-party PNG data URL and attach it to a download link.
Open demo ↗Rounded output
Rounded outputimage-border-radius affects the generated canvas.
Open demo ↗Custom clip plugin
Circle clip pluginA custom path clips the actual output; the browser test checks transparent corner pixels.
Open demo ↗Watermark / attachment
Draw event attachmentDraw a local badge into the real crop canvas and export it.
Open demo ↗State and presentation
Metadata
Save and restore stateRound-trip the v1 metadata object.
Open demo ↗Passive preview
Synchronized passive previewOne interactive cropper drives a smaller read-only preview.
Open demo ↗Image placeholder
Image placeholder slotRender a local image behind the empty-state text.
Open demo ↗Custom loading
Custom loading overlayDrive your own loading UI from Croppa's loading lifecycle events.
Open demo ↗Appearance playground
Appearance and behaviorEdit placeholder/canvas colors and interaction props without forking Croppa.
Open demo ↗EXIF orientation hint
Initial-image EXIF hintAn initial slot image supplies data-exif-orientation and is normalized by v1.
Open demo ↗Legacy broad harness
The focused demos above are easier to understand and test, but the original repository also contains a broad manual harness in docs/simple-test.html.
During the docs build, that page is copied into this site with only its CDN/random-image dependencies replaced by deterministic local assets. Playwright uses it as an additional compatibility check.