Welcome to Vanilla Breeze
This bell pulls live notifications from /go/notify/messages — the same contract documented at /docs/concepts/service-contracts/. Static articles like this one are the no-JS / no-backend fallback.
image-editor
A zero-dependency image editor web component for cropping, rotating, filtering, resizing, and exporting images. Drag-and-drop, undo/redo, 35+ CSS custom properties, and full VB token compatibility.
Where to find it
- npm:
@profpowell/image-editor - GitHub: ProfPowell/image-editor
- Live demo: profpowell.github.io/image-editor
- License: MIT
Install
BASH
npm install @profpowell/image-editorJAVASCRIPT
import '@profpowell/image-editor';Or via CDN:
HTML
<script type="module" src="https://unpkg.com/@profpowell/image-editor"></script>Demo
Drop an image onto the editor or use the built-in tools to crop, rotate, filter, and export. The toolbar and panels adopt the active VB theme.
Quick reference
| Feature | Notes |
|---|---|
| Crop | Draggable handles with rule-of-thirds grid and aspect ratio presets. |
| Rotate / Flip | 90° rotation; horizontal and vertical flip. |
| Filters | Brightness, contrast, saturation, blur, grayscale, sepia. |
| Resize | Aspect-ratio lock with common size presets. |
| Export | PNG, JPEG, or WebP with quality control. |
| Undo/Redo | Configurable history depth. |
| Drag-and-drop | Drop images directly onto the editor. |
| Themes | Light/dark mode with auto-detection; reads VB --color-*, --size-*, --font-*, --shadow-* tokens. |
See the README for the full attribute, method, event, and keyboard shortcut reference.
Usage examples
HTML
<image-editor src="photo.jpg" mode="dark" format="jpeg" quality="0.85"></image-editor>Per-instance overrides via --image-editor-* custom properties always win over inherited VB tokens.