Skip to main content

Editor Basics

Get familiar with the design editor screen and the basic operations: zoom, pan, select, undo, and grid. Knowing these makes everything else go smoothly.

Layout of the screen​

The editor has three main areas.

AreaWhat it's for
Left sidebarThe toolbox: text, image, table, etc. — the things you can place on the design
Center canvasThe paper itself. You arrange objects here
Right properties panelSettings (font size, color, …) for whichever object you have selected

Zoom​

Use zoom when you want to inspect detail or take in the whole page.

To do thisUse this
Zoom inCtrl + scroll wheel up (Mac: Cmd + wheel)
or click the + button on the bottom toolbar
Zoom outCtrl + scroll wheel down (Mac: Cmd + wheel)
or click the - button on the bottom toolbar
Fit to screenClick the zoom indicator at the bottom (e.g. 100%) and pick Fit
How to use it
  • If you'd rather not use the keyboard, the bottom toolbar's + / - buttons let you zoom with the mouse only. The current zoom level (e.g. 100%) is shown in the same place.
  • For precise alignment, zoom to 150–200%. To check overall balance, zoom out to 50–75%.

Pan the canvas​

When you're zoomed in and only part of the page is visible, panning lets you move around without dragging objects by accident.

  • Hold Space and drag to move the canvas.
  • Plain mouse-drag would move whichever object you grab, so use Space for panning.

Select objects​

To edit a piece of text or an image you've placed, you first select it.

To do thisUse this
Select oneClick on the canvas, or click an item (e.g. text1) in the Object list on the right
Select multipleDrag a rectangle starting on empty space
Add one to the selectionHold Shift and click
Clear the selectionClick empty space on the canvas, or press Esc

The selected object is highlighted with a blue outline and corner handles. While selected, you can change its settings in the right-hand properties panel.

The Object list is a reliable way to select

If an object is small or overlaps with another and is hard to click, use the Object list tab on the right side to pick it directly. Every object placed on the design is listed there with a name like text1 or image1.

Undo / Redo​

You can take back a mistake easily.

To do thisUse this
UndoCtrl + Z (Mac: Cmd + Z)
or the undo arrow (↶) in the bottom toolbar
RedoCtrl + Shift + Z (Mac: Cmd + Shift + Z)
or the redo arrow (↷) in the bottom toolbar
Toolbar buttons for undo/redo

The bottom toolbar has undo (↶) / redo (↷) buttons. They work with a single click, no shortcut required. The buttons are dimmed when there's nothing left to undo or redo.

Show the grid​

A grid helps when you want objects to line up neatly. All grid settings live on the bottom toolbar.

  1. Click the grid icon (a small lattice) in the bottom toolbar.
  2. The menu lets you toggle:
    • Show grid: turn ON to display the grid on the canvas.
    • Snap to grid: turn ON so dragging an object snaps it to the nearest grid line.
    • Size: change the grid spacing in pixels (1–100).
Easy alignment

If you want objects perfectly lined up, set both Show grid: ON and Snap to grid: ON. Drag operations will snap to the nearest grid line, making clean layouts much easier.

About auto-save​

The editor auto-saves while you work. You don't have to hit Save every minute — your changes are pushed to the server after a short delay.

That said, at meaningful checkpoints it's a good idea to click the Save button in the top toolbar to be sure.

✅ What you should be able to do by now​

  • Zoom in/out with Ctrl + scroll wheel or the bottom toolbar + / -
  • Pan the canvas by holding Space and dragging
  • Select an object by clicking it or picking it from the Object list on the right
  • Undo with Ctrl + Z / Cmd + Z or the bottom toolbar's undo arrow
  • Toggle Show grid / Snap to grid from the bottom toolbar's grid icon

If all of those feel natural, you're ready to keep going.

Next step​

With the basics in hand, continue with Adding Objects. You'll start placing real content on the design.