Skip to main content
The Customei template editor is a three-panel workspace: a left sidebar for adding elements and browsing layers, a center canvas, and a right sidebar that switches between object properties and keyboard shortcuts depending on what’s selected.

​
The big picture

┌──────────────────────────────────────────────────────────────────┐
│                          Top toolbar                             │
│   Save · Undo · Redo                                 Zoom    ⚙   │
├────────────┬─────────────────────────────────┬───────────────────┤
│            │                                 │                   │
│    Left    │                                 │       Right       │
│  sidebar   │          Design canvas          │      sidebar      │
│            │                                 │                   │
│   Add +    │       (Pixi WebGL scene)        │   Properties /    │
│  Layers    │                                 │    Shortcuts      │
│            │                                 │                   │
└────────────┴─────────────────────────────────┴───────────────────┘

​
The top toolbar

ControlWhat it does
SavePersists your changes. Uses ⌘S / Ctrl+S as a shortcut.
Undo / RedoSteps through history. ⌘Z / Ctrl+Z to undo, ⌘⇧Z / Ctrl+Shift+Z to redo.
ZoomA dropdown + −/+ buttons. Fit, 100%, or any custom level. You can also zoom with ⌘+scroll.
Settings (⚙)Opens template settings.

​
The left sidebar

Two modes — a thin rail of icons on the far left switches between them:

​
Add panel

A palette of elements you can drop onto the canvas:
  • Text — regular, curved, or warped.
  • Image — upload a new image or pick from your library.
  • Shape — rectangle, ellipse, line, polygon.
  • Clipart — curated assets from your library.
  • QR code — stylized QR with custom colors.
  • Frame — a container that clips its children (useful for photo slots).

​
Layers panel

A tree view of every layer in the template. From here you can:
  • Click to select a layer on the canvas.
  • Drag to reorder (top of the list = top of the canvas).
  • Toggle visibility / lock with the eye and lock icons.
  • Group selected layers together for easier manipulation.
See Layers for the full breakdown.

​
The design canvas

The middle area is a WebGL canvas backed by PixiJS. Direct interactions:
  • Click a layer to select it. Shift+click to add to selection.
  • Drag to move. Shift+drag a corner to resize proportionally.
  • Double-click a text layer to edit its content in place.
  • Scroll to pan vertically; Shift+scroll to pan horizontally; ⌘/Ctrl+scroll to zoom.
  • Right-click for a context menu with duplicate, delete, arrange, and other actions.
The canvas shows smart guides when you drag near another layer or the canvas center — see Snapping and alignment.

​
The right sidebar

Context-aware:
  • Nothing selected → shows the keyboard shortcuts cheat sheet.
  • A layer selected → shows the Properties panel for that layer type.
The Properties panel has sections like:
  • General actions — duplicate, delete, lock, hide.
  • Position — X, Y, width, height, rotation.
  • Appearance — fill color, stroke, opacity.
  • Type-specific — font family + size for text, image source for images, curve controls for curved text, and so on.
All properties edit live: change a number and the canvas updates immediately.

​
Zoom, pan, and keyboard help

  • Fit to screen: toolbar dropdown → Fit, or press 0.
  • 100% zoom: 1 key (or toolbar).
  • Pan: hold Space and drag, or use a trackpad’s two-finger scroll.
  • Keyboard help: deselect everything to see the right-sidebar shortcuts panel.
Want the full shortcut table? See Keyboard shortcuts.

​
Next