Canvas

The canvas is the visual heart of the editor — where you compose the stage and immediately see what it’ll look like on the storefront. This page covers how the canvas itself works: sizing, device preview, the tools, undo / redo, and every action in the right-click menu.

Canvas size

In the toolbar, the Canvas size picker sets the design width × height of the stage shell in pixels (default 600 × 400). This is the design size — the dimensions you compose against. On the storefront, the actual rendered size depends on the viewport: the JS plugin applies transform: scale(visibleWidth / designWidth) to fit modal-variant popups into smaller viewports while preserving the layout you designed. For banner / slide-in / toast variants, the shell stays at its designed pixel dimensions and max-width: 100vw keeps it inside the viewport.

For finer control over canvas internals — z-index, overflow, design width/height of nested scenes, content mode — open the Stage settings modal from the toolbar (gear icon).

Device preview

Three buttons in the toolbar simulate viewport widths without changing the saved design size:

• Mobile preview (375 px) — narrow viewport simulation
• Tablet preview (768 px) — medium viewport
• Desktop preview — full design size (the saved canvas dimensions)

Use these while designing to spot scaling issues, parallax discomfort on smaller screens, or text that becomes unreadable when the modal scales down.

Selection and movement

Two tools at the left edge of the tool strip:

• Select tool (V) (default) — click to select a layer, drag handles to resize, drag the body to move. Click an empty area to deselect.
• Hand tool (H) — click and drag anywhere on the canvas to pan. Holding Space temporarily switches to Hand without leaving Select.

Selecting a layer:

• Updates the right shortcut strip to show the icons relevant to that layer type.
• Brings up the Properties popout by default with that layer’s editable fields.
• In the Layers panel on the right, the layer is highlighted.

Resizing and rotating

Selected layers get drag handles on every corner and side. Drag corners to resize freely; hold modifiers (Shift in most cases) to keep aspect ratio. A rotation handle appears above the layer; drag it to rotate. The pivot dot at the layer’s center can be dragged to a different position to change rotation origin; double-click it to reset to center.

Flipping

• Shift+H flips the selected layer horizontally.
• Shift+V flips it vertically.
• Also accessible via the flip action in the toolbar with the same modifier-click convention.

Undo / redo

Standard Ctrl/Cmd+Z undoes the last edit; Ctrl/Cmd+Shift+Z redoes. Every edit (move, resize, edit property, add / remove layer, lock, hide, group, scene wrap, slide changes, marker updates, flip) is captured in the History → Actions tab; click any entry to see it in context. See Drafts & revisions for how this interacts with autosave.

The right-click context menu

Right-clicking a layer on the canvas (or in the Layers panel) opens the canvas context menu. The exact entries depend on layer type, but the common ones:

• Edit content — open the type-specific editor (text content modal, HTML modal, button label modal).
• Change image — only on image layers; opens the media picker.
• Layer style… — open the Layer Style modal (same as double-click).
• Copy effects / Paste effects — copy the Layer Style effects from this layer and paste them onto one or many selected layers.
• Duplicate — clone the layer with offset position.
• Duplicate as wrap clone — special variant that animates only during the loop wrap segment of the timeline.
• Move up / Move down — change z-order in the layer panel.
• Move out of group — pull the layer out of its parent group / scene.
• Convert to Scene / Convert to Smart Object / Decompose scene / Decompose smart object — wrap or unwrap container types.
• Wrap in group — put the layer (and any selected siblings) inside a new group.
• Switch type to scene / Switch type to group — change a group ↔ scene without unwrapping.
• Enter scene / Enter slide / Enter timeline — drill in (canvas zooms into the container’s internal coordinate space).
• Show / Hide — toggle visibility (eye icon equivalent).
• Lock / Unlock — toggle lock (lock icon equivalent).
• Delete — remove the layer. Groups and scenes prompt with a sub-modal asking whether to Move contents up, then delete or Delete with contents.

Grid containers (section / row / column) get extra entries:

• Add row / Add row before / Add row after — only on a section’s children.
• Add column / Add column before / Add column after — only on a row’s children.

Right-clicking the background

Right-clicking an empty canvas area (not on any layer) opens the canvas-background context menu — actions that apply to the stage as a whole (e.g. stage settings shortcut, paste a previously-copied effect onto the shell).

Where to go next

• Layers — what each layer type is and how it’s edited.
• Layer Style — the seven effects.
• Timeline — animation keyframes for canvas layers.