AppScreenshots DocsScreenshot Editor
Build and refine a complete screenshot set with frames, devices, assets, text, backgrounds, and saved projects.
Work in the Screenshot Editor
The Screenshot Editor is where a screenshot plan becomes a reusable source project. It is intentionally frame-based: every canvas is one deliverable image, and the sequence of frames becomes your storefront story.
Actual English project output. In the editor, one canvas frame becomes one delivered image; the workspace controls below determine the story, device, text, and layers that appear in that frame.
Learn the workspace once
| Area | What it controls |
|---|---|
| Header | Project name, language selector, save status, undo/redo, Save, and Download. |
| Left rail | Templates, Devices, Elements, Text, Background, Uploads, and the shortcut to AI Generate. |
| Side panel | The tool selected in the left rail, or properties for the currently selected canvas element. |
| Canvas | The active frame or series of frames. Click an element to select it; click clear canvas space to deselect. |
| Frame controls | Above each frame: add, duplicate, delete, move left, and move right. |
| Canvas controls | Zoom in/out, reset zoom, change the frame layout direction, and turn continuous mode on or off. |
Tip: Name the project as soon as you start. Use a format your team can scan later, such as 2026-08 iOS launch — English master.
Build a complete set
Establish the first frame
Start from Templates or add a device from Devices. Templates can carry a platform-appropriate canvas configuration; use a template that matches your intended destination whenever possible.
Add the proof: the real app screen
Select the device and use Device Properties → Upload Screenshot. You can replace or remove that screen later without rebuilding the surrounding layout.
Add the message and supporting visual treatment
Use Text for headline copy, Background for the frame surface, and Elements for icons, design resources, images, shapes, badges, gestures, or illustrations. Keep the visual hierarchy simple: message first, product proof second, decoration last.
Make the next frames
Duplicate a successful frame when the next message should share its layout, then replace the text and app screen. Add a blank frame only when the story requires a different visual direction.
Adjust every selected element precisely
Selecting text, a device, image, shape, or icon replaces the side panel with its properties. Use it for position, size, rotation, opacity, font, color, device treatment, screen replacement, and layer order.
The six core panels
| Panel | Use it for | Practical rule |
|---|---|---|
| Templates | Starting a structured layout and canvas shape | Apply before substantial editing, because applying replaces current content. |
| Devices | Real-device mockups or CSS device frames | Select the frame that supports the target platform; then upload a clean source screen. |
| Elements | Icons, built-in resources, images, shapes, and decorative assets | Decoration must clarify—not compete with—the main message. |
| Text | Adding headings or supporting copy | One frame, one primary claim. Edit language-specific content in its properties. |
| Background | Solid colors, palettes, gradients, Unsplash images, or uploads | Favor contrast and quiet surfaces behind detailed UI. |
| Uploads | Project assets and reusable brand assets | Put campaign-specific captures in project assets; keep logos and recurring brand parts in brand assets. |
Frame order, continuity, and layers
- Use the controls above a frame to add, copy, remove, or reorder it. The application will not delete the final remaining frame.
- The regular layout places separate frames next to or below each other for editing. Changing canvas direction changes the editing arrangement, not necessarily your product story.
- For a composition that runs through several screenshots, switch to Continuous canvas. Text, images, shapes, icons, and devices can all be dragged across frame dividers; export slices them naturally at each frame boundary without an element-specific switch.
- Continuous canvas uses one horizontal stage and one global layer order. When an element's center moves into another frame, ownership changes without moving the element visually. Selecting a cross-frame element shows the frames it covers.
- Continuous canvas keeps every frame's current background by default. When you edit the background, choose Current frame or All frames. All-frame image backgrounds can spread across the canvas or repeat on each frame, with Cover/Contain, focal point, and scale controls.
- In continuous canvas, frames append on the right and only the safe, rightmost frame can be removed. Return to independent frames before duplicating or reordering frames.
- Historical continuous templates are migrated to the current continuous canvas when loaded. Their per-frame backgrounds remain intact, and old device-spanning metadata is removed because every element type can now cross frame boundaries naturally.
- If an element is hidden, use Move Up / Move Down in the properties panel to adjust its global or per-frame layer position.
Fast keyboard controls
On macOS use ⌘; on Windows/Linux use Ctrl.
| Action | Shortcut |
|---|---|
| Undo / redo | ⌘/Ctrl + Z / ⌘/Ctrl + Shift + Z |
| Copy, paste, cut, duplicate | ⌘/Ctrl + C, V, X, D |
| Delete selected item | Delete or Backspace |
| Move selected item | Arrow keys; Shift + Arrow moves 10 px |
| Move through layers | ⌘/Ctrl + ] or [; add Shift for front/back |
| Zoom | ⌘/Ctrl + +, -, or 0 |
| Export current frame | ⌘/Ctrl + E |
Save with confidence
The editor keeps a local backup after changes and saves existing cloud projects automatically when there are unsaved changes. The header shows Unsaved, Auto-saving, Saved, or Save failed. Use Save deliberately before a handoff, a major edit, or a browser change.
If a restore prompt appears when you open a new or template-based project, choose Restore only when the timestamp and prior work are the draft you expect. See Manage projects and backups for the full maintenance workflow.
Next: Design with elements and backgrounds, Choose device frames, or Export screenshots.