Canvas & workflow
Everything around the pixels: a layer stack, measurement guides, a fixed output artboard, re-editable templates, robust import, and keyboard shortcuts.
Layers
A persistent layers panel: drag to reorder z-order, lock, show/hide, set opacity, rename inline, and group/ungroup, align, duplicate or delete the selection. Available regardless of the active tool.
<asp-image-editor mode="full" height="520px" />Rulers, guides & snapping
Toggle rulers, drag guides off them, and the magnet enables edge/center snapping with alignment guides while you move objects. Guides are draggable, snap targets, and part of undo/redo.
<asp-image-editor mode="full" height="520px" />Artboard & output size
Pick an output-size preset or a custom W×H. Content outside the artboard is dimmed and excluded from export, which renders at exactly the artboard's pixel dimensions.
<asp-image-editor mode="full" height="520px" />Templates (save / load)
The Image menu's Save / Load round-trips the whole scene as JSON via the engine's exportScene / loadScene, so a layout is re-editable later.
For headless control, call the engine directly — see Headless engine.
// Headless save / load of a re-editable scene
const json = engine.exportScene();
// ...later
await engine.loadScene(json);Import — large images & HEIC
Imports are decoded with createImageBitmap: EXIF orientation is applied, very large JPEGs are downscaled, and HEIC/HEIF is converted via the optional heic2any decoder.
An undecodable or oversized file surfaces a transient error toast and an (errorOccurred) event instead of silently doing nothing.
HEIC/HEIF import needs the optional heic2any dependency. Without it, those files report a clear error; every other format works unaffected.
Keyboard shortcuts
Active while the pointer is over the editor and you are not typing in a field. Disable with [keyboardEnabled]="false".
| Keys | Action |
|---|---|
Ctrl/Cmd + Z | Undo |
Ctrl/Cmd + Shift + Z / Ctrl + Y | Redo |
Delete / Backspace | Remove selection |
Ctrl/Cmd + C / V / D | Copy / paste / duplicate |
Ctrl/Cmd + A | Select all |
Esc | Deselect (or cancel the basic modal) |
Space (hold) | Pan |