Demos - image-editor

Default Editor

Empty editor with drag-and-drop zone. Drop an image or click Open to get started.

<image-editor></image-editor>

Dark Mode

Use mode="dark" to pin the editor to dark theme regardless of page settings.

<image-editor mode="dark"></image-editor>

JPEG Export at 80% Quality

Set the default export format and quality with the format and quality attributes.

<image-editor format="jpeg" quality="0.8"></image-editor>

Read-only Mode

The readonly attribute disables all editing tools. Useful for displaying images with zoom/pan only.

<image-editor readonly></image-editor>

No Toolbar (API-driven)

Hide the toolbar with no-toolbar and drive the editor entirely through JavaScript.

<image-editor no-toolbar id="editor"></image-editor> <script> const editor = document.getElementById('editor') editor.loadImage('photo.jpg') editor.rotate(90) editor.applyFilter('brightness', 1.2) </script>

Locked Aspect Ratio

Lock the crop tool to a specific ratio with the aspect-ratio attribute. Common values: 16:9, 4:3, 1:1.

<image-editor aspect-ratio="16:9"></image-editor>

Constrained Size

Set explicit width and height to constrain the editor dimensions.

<image-editor width="400" height="300"></image-editor>

Custom Drop Zone

Use slotted content to customize the drop zone message shown before an image is loaded.

Drop your photo here to start editing

<image-editor> <p>Drop your photo here to start editing</p> </image-editor>

Custom Theming

Use CSS custom properties to create custom themes. Over 35 properties are available.

.purple-editor { --image-editor-accent-color: #8b5cf6; --image-editor-toolbar-bg: #faf5ff; --image-editor-border-color: #c4b5fd; --image-editor-button-active-color: #8b5cf6; --image-editor-crop-border: #8b5cf6; --image-editor-crop-handle-color: #8b5cf6; --image-editor-focus-color: #8b5cf6; } <image-editor class="purple-editor" mode="light"></image-editor>

All Editing Features

Crop with draggable handles and aspect ratio presets
Rotate 90° left/right
Flip horizontal and vertical
Resize to exact dimensions with aspect lock
Brightness, contrast, saturation, blur, grayscale, sepia filters
Undo/redo with configurable history depth
Zoom and pan with scroll and drag
Export as PNG, JPEG, or WebP
Drag-and-drop or file picker image input
Light/dark mode with auto-detection
Full keyboard accessibility
35+ CSS custom properties for theming

Programmatic Filters

Apply filters via JavaScript for batch processing or custom UI workflows.

const editor = document.querySelector('image-editor') await editor.loadImage('photo.jpg') // Adjust filters editor.applyFilter('brightness', 1.3) editor.applyFilter('contrast', 1.1) editor.applyFilter('saturate', 0.8) // Export the result const blob = await editor.getBlob('webp', 0.9)

Undo/Redo History

Every edit is tracked. Control the maximum history depth with the max-history attribute.

<image-editor max-history="100"></image-editor> <script> const editor = document.querySelector('image-editor') editor.addEventListener('history-change', (e) => { console.log('Can undo:', e.detail.canUndo) console.log('Can redo:', e.detail.canRedo) console.log('History length:', e.detail.length) }) </script>

Zoom & Pan Controls

Control zoom programmatically. Scroll to zoom, drag to pan in the editor.

const editor = document.querySelector('image-editor') // Zoom to 200% editor.zoomTo(2) // Fit image to workspace editor.zoomToFit() // Listen for zoom changes editor.addEventListener('zoom-change', (e) => { console.log('Zoom:', e.detail.level) })

Interactive Demos