<image-editor>

A web component for cropping, rotating, filtering, resizing, and exporting images

View Demos API Documentation

Features

Crop & Resize

Drag handles to crop with aspect ratio presets. Resize to exact dimensions with aspect lock.

Rotate & Flip

Rotate 90° in either direction. Flip horizontally or vertically.

Filters

Adjust brightness, contrast, saturation, blur, grayscale, and sepia with live preview.

Undo / Redo

Full history stack with configurable depth. Never lose your work.

Multi-Format Export

Export as PNG, JPEG, or WebP with quality control. Download or get as Blob/Data URL.

Zoom & Pan

Scroll to zoom, drag to pan. Fit-to-view and zoom-to-level controls.

Fully Themeable

35+ CSS custom properties for complete visual customization. Light and dark mode support.

Format Converter

Companion <image-convert> component for drag-and-drop format conversion with EXIF stripping.

Quick Start

Installation

Install via npm:

npm install @profpowell/image-editor

Or include via CDN:

<script type="module" src="https://unpkg.com/@profpowell/image-editor"></script>

Basic Usage

<image-editor></image-editor>

With a Pre-loaded Image

<image-editor src="photo.jpg"></image-editor>

Dark Mode with JPEG Export

<image-editor mode="dark" format="jpeg" quality="0.85"></image-editor>
See All Demos Full API Reference

Related Components

Part of the ProfPowell vanilla web components suite:

<browser-window> Safari-style browser window for demos <code-block> Syntax highlighting with copy button <terminal-window> Interactive terminal emulator <browser-console> Console log display component <http-component> HTTP request/response viewer