Image Editor
Image Editor overview
The flagship editor — a layered, multi-tool design surface that runs entirely in your browser.
The Image Editor is the flagship of the studio. It's a layered, multi-tool design surface that runs entirely in your browser.
#At a glance
- Layered document model. Every element — shapes, text, icons, raster assets, drawings — is a layer with its own transform, effects, and opacity. Layers can be grouped, nested, and clipped.
- Tool rail. A vertical rail on the left switches between pointer, hand, crop, brush, eraser, text, shape, icon, asset stamp. Each tool owns its panel on the right.
- Versioned project format. Save and reload work as
.img— a ZIP package with amanifest.json,document.json, and packaged resources. Migration is explicit and forward-compatible. - No uploads. Everything happens in the browser. Heavy pixel ops run in a worker so the UI stays responsive.
#Anatomy of the editor
Header
Tool rail
Canvas — zoomable / pannable
- layer overlays
- crop overlay
- selection HUD
Inspector panel
- Header owns file actions (new, open, save
.img, export PNG/JPEG/WebP/PDF), undo / redo, zoom, and global settings. - Tool rail picks the active tool. Every tool has matching keyboard shortcuts (see Shortcuts).
- Canvas is where the document lives. It zooms with the wheel and pans with hand mode or
Space+drag. - Right-side panel swaps based on the active tool — shape inspector, text inspector, brush settings, asset edit sheet, and so on.
- Bottom panel holds the layers tree (with groups, blend modes, opacity), background controls, layer effects, and global filters.
#What makes the editor "rich"
| Capability | Where to read more |
|---|---|
| Multi-stop gradient fills, strokes, dashed strokes | Shape tool |
| Curved text on path | Text tool |
| Layer effects (shadow, glow, stroke) | Effects & filters |
| Free transform with skew | Layers |
| Frame clip shapes (image inside a custom shape) | Asset tool |
| Layer groups with nesting + group-level opacity / blend | Groups |
| Clipping masks (one layer clipped to the layer below) | Layers |
| Curves / Levels / HSL mixer per asset layer | Effects & filters |
| AI background removal at the asset level | Asset tool |
#Where to start
- Getting started — open an image, add a layer, save your first
.img. - Canvas & zoom — navigation, fit-to-screen, hand mode.
- Layers and Groups — the document model.
- Tool reference — one page per tool in the rail.
- Shortcuts — the full keyboard book.
#Long-term direction
The editor is meant to be operable by LLMs and other agents, not just human clicks. That means:
- Document state is additive and explicit — features are designed as structured fields on layers, not buried in panel state.
- Save format is open (
.imgis a ZIP with JSON inside). Future automation can produce a valid project without ever opening the UI. - The roadmap includes AI Edit — natural-language ops mapped to editor primitives.
If you're building automation, For AI Agents is the most valuable page in this site.