Image Editor
The Image Editor is a Konva.js-powered, layer-based canvas editor for compositing, adjusting, and exporting images — supporting AI image generation directly from the editor.
Getting to the Image Editor
- Open Media Studio from the sidebar.
- Click Image Editor.
This opens the Projects page /media-studio/image-editor) where all your saved image projects are shown in a grid with thumbnails, dimensions, and last-modified date. From here you can:
- Click a project card to open it.
- Click New Project to create a blank canvas (default 1024 × 1024 px).
- Search projects by name.
- Delete a project (with confirmation dialog).
The Image Editor Layout
Once a project is open, the editor has four zones:
| Zone | Location | Purpose |
|---|---|---|
| Header toolbar | Top bar | Project name, save, undo/redo, zoom, grid, export, import |
| Left sidebar | Left panel | Layers, Adjustments, Repository, Text — 4 tabs |
| Canvas | Centre | Konva.js canvas with optional grid overlay |
| Prompt island | Floating bar (bottom centre) | AI image generation prompt |
| Generated images panel | Collapsible right panel | Preview & apply AI-generated results |
Header Toolbar
| Control | Description |
|---|---|
| ← Back | Returns to the projects list (warns if there are unsaved changes) |
| Project name | Editable inline text field |
| Save | Saves the project state |
| Undo / Redo | Step backward or forward through history |
| Zoom Out / In | Snap through preset zoom levels: 25 → 33 → 42.5 → 50 → 66.6 → 75 → 100 → 125 → 150 → 200 → 300 → 400% |
| Grid | Toggle a grid overlay on the canvas (button highlights when active) |
| Export | Download the flattened canvas as PNG, JPG, or WebP |
| Import | Upload an image file from your device and add it as a new layer |
Left Sidebar Tabs
Layers tab ⊞ icon)
Manages the stacking order of all elements on the canvas.
- Each layer shows its name, a visibility toggle (eye icon), and a lock toggle.
- Drag layers up or down to reorder them.
- Use the Move up / Move down arrow buttons.
- Click a layer to select it;
Ctrl+clickorShift+clickto multi-select. - Delete selected layers with the trash icon.
- Canvas size — set the canvas width and height (256–4096 px) to resize the project canvas.
Adjustments tab ☀ icon)
Non-destructive image adjustments applied to image layers via Konva filters.
Color & Tone (−100 to +100 each):
| Slider | Effect |
|---|---|
| Brightness | Overall lightness |
| Contrast | Light-to-dark spread |
| Exposure | Simulated exposure compensation |
| Saturation | Color intensity |
| Vibrance | Boost muted colours more than already-saturated ones |
| Sharpness | Edge clarity (0–100) |
White Balance:
| Slider | Effect |
|---|---|
| Temperature | Warm (yellow) ↔ Cool (blue) |
| Tint | Green ↔ Magenta |
Levels:
| Slider | Effect |
|---|---|
| Highlights | Brighten / darken bright areas |
| Shadows | Brighten / darken dark areas |
| Midtones | Mid-range luminosity |
A Reset button restores all sliders to 0.
Repository tab 📁 icon)
Opens the Asset Manager modal so you can pick existing assets (images, graphics) from your repository and add them to the canvas as new layers.
Text tab T icon)
Add text layers using:
- Custom fonts — fonts you have uploaded to your asset repository (type:
font). - Google Fonts — 10 pre-loaded options: Roboto, Open Sans, Lato, Montserrat, Poppins, Raleway, Merriweather, Playfair Display, Ubuntu, Oswald.
Click a font to load it and add a text element to the canvas with that typeface.
Transform Controls (selected layer)
When a layer is selected, transform controls appear for the selected layer:
- X / Y position — numeric inputs for exact pixel placement.
- Width / Height — resize the layer.
- Scale — 0.1× to 3× slider.
- Rotation — 0–360° slider; quick buttons for −90°, +90°, 180°.
- Flip — flip horizontally or vertically.
- Crop — crop ratio presets: Free, 1:1, 16:9, 9:16, 4:3, 3:4; click Apply Crop to commit.
AI Image Generation (Prompt Island)
The Prompt Island is a draggable floating bar at the bottom centre of the canvas area.
- Type a prompt describing the image you want to generate.
- Click ✨ Enhance to rewrite the prompt with AI for better results.
- Click Generate (wand icon).
- Generated results appear in the right panel as a grid of images.
- Click a result to preview it at full size.
- Click Apply to Canvas to add the selected image as a new layer.
Exporting Your Image
- In the header, click the Export dropdown.
- Select a format:
- PNG — lossless, preserves transparency.
- JPG — smaller file size, no transparency.
- WebP — modern format, good quality-to-size ratio.
- The file downloads immediately.
To save a copy to your asset repository, click Save to Repository (available via the save flow inside the project).