3. The designer workspace

The workspace has five areas:
- Toolbar (top): file, edit, arrange, zoom and view commands, plus Preview PDF.
- Left panel: three tabs, Insert, Fields and Layers.
- Canvas (center): the page, with rulers, margin guides and bands.
- Right panel: two tabs, Properties and Report.
- Status bar (bottom): the current band and selection, the page size and the zoom level.
The toolbar
Hover over any button to see its name and shortcut.

| Group | Buttons | What they do |
|---|---|---|
| File | New blank report | Start an empty Letter page (asks first if you have unsaved changes) |
| New from template… | Open the Template gallery | |
| Import PDF | Rebuild a page of an existing PDF as a new design (Import a PDF) | |
| Open template JSON | Load a template .json file from your computer |
|
| Export template JSON | Download the current template as a .json file |
|
| Save (Ctrl/Cmd+S) | Hand the template to your application to store | |
| Edit | Undo / Redo | Step backwards and forwards through your changes (up to 200 steps) |
| Cut, Copy, Paste, Duplicate, Delete | Work on the selected elements | |
| Align | Align left edges, Align horizontal centers, Align right edges, Align top edges, Align vertical centers, Align bottom edges | Line up two or more selected elements |
| Distribute horizontally / Distribute vertically | Space three or more elements evenly | |
| Match width / Match height | Make the selected elements the same size as the one you selected last | |
| Arrange | Bring to front, Bring forward, Send backward, Send to back | Change which element is drawn on top |
| Zoom | Zoom out, Zoom (25%–400%), Zoom in, Fit page width | Change the canvas magnification |
| View | Show grid | Show or hide the dot grid |
| Snap to grid and guides | Snap moves and resizes to the grid and to other elements' edges and centers. Hold Alt while dragging to bypass | |
Show expressions instead of preview text ({ }) |
Show the raw bindings, like {{ shipTo.name | Northwind }}, instead of their preview text |
|
| Toggle dark theme | Switch between light and dark | |
| Preview PDF | Render the PDF preview | |
| Help | Help (F1) | Open this guide in a side panel, at the topic for what you are working on |
Tip: The align commands line elements up with the edge of the whole selection. For example, Align left edges moves every element to the left-most edge. Match width and Match height copy the size of the element you Shift-clicked last.
The left panel
Insert tab

The Insert tab holds the element palette: Text, Field, Image, Line, Rectangle, Ellipse, Barcode, QR Code, Checkbox, Table, Repeater, Page Break and Page No.
- Drag a tile onto any band to place the element where you drop it.
- Click a tile to add the element to the band that is currently selected (shown in the status bar).
The Elements reference explains each element type. The Tips box at the bottom of the tab is a reminder of the main mouse and keyboard tricks.
Fields tab

The Fields tab shows the data contract, the fields your system sends for this kind of document. Each field shows its type and its title, and you can hover over a field to see its description.
| Drag this… | …onto | Creates |
|---|---|---|
| A text, number or date field | a band | A text element bound to the field, e.g. {{ shipTo.city | Columbus }} |
| A true/false field | a band | A Checkbox that is checked when the field is true |
| A list (array) | a band | A Table with one column per field of the list items |
| A field of a list item | an existing table | A new column in that table |
When the data contract gives an example value, the new binding uses it as preview text automatically.
Note: If your application doesn't provide a data contract, the Fields tab shows Fields used in this template instead. You can type bindings by hand at any time.
Layers tab

The Layers tab lists every element, grouped by band, in drawing order (the last one is on top).
- Click a row to select the element. This is useful when elements overlap or are hidden behind a rectangle.
- The lock icon (Lock / Unlock) stops an element from being moved or resized by accident.
- The eye icon (Hide in the designer / Show in the designer) hides an element in the designer only. Hidden elements still print.
The canvas

- Rulers along the top and left show the position in the unit set on the Report tab (inches, millimeters or points).
- Margin guides show where the printable area starts.
- Bands are labeled on the left, for example PAGE HEADER 0.89 in. Drag the bottom edge of a band to change its height.
- Dashed outlines show element boxes, so you can see empty text boxes and image frames.
Selecting. Click an element to select it. Shift-click (or Ctrl/Cmd-click) adds or removes elements from the selection. Drag across an empty area to draw a selection box. Ctrl/Cmd+A selects everything. Esc clears the selection.
Moving and resizing.
- Drag an element to move it. Hold Shift to move only horizontally or vertically. Drag it into another band to move it there.
- Drag one of the eight handles to resize. Hold Shift on a corner handle to keep the proportions.
- For a Line, drag either end. Hold Shift to keep it perfectly horizontal or vertical.
- Arrow keys nudge by 1 pt. Shift+Arrow nudges by one grid step.
- While you drag, smart guides (thin lines) show when an edge or center lines up with another element.
- Hold Alt while dragging to turn snapping off temporarily.
The right panel
The Properties tab

Shows the settings of the selected element. The sections depend on the element type (see the Elements reference), but most elements have:
- Position & size: X, Y, W, H, Rotation (degrees) and Opacity (%). Values are in the unit shown at the top right of the section.
- Style: font, size, color, alignment, padding, borders and background.
- Behavior: Visible if, Link, Pinned and Locked in the designer.
With several elements selected, the panel shows the shared settings. A change applies to all of them (3 elements selected — edits apply to all).
With nothing selected, the Properties tab shows the selected band: its Height and, for page headers and footers, Print on.
Expression boxes check what you type as you type. An error message appears under the box when an expression can't be read, and Preview shows: … tells you what the designer preview will display.
The Report panel

Settings for the whole document:
| Section | Settings |
|---|---|
| Page | Size (Letter, Legal, Tabloid, A3, A4, A5, B5, Custom), Orientation, Page width / Page height for custom sizes, Margins |
| Bands | Turn each band on or off. Choose Print on for the page header and footer |
| Records | One copy per: render one copy of the document per list item (batches; see chapter 13) |
| Document language | Locale used for formatting numbers, dates and currency, and for choosing Chinese, Japanese and Korean fonts (see chapter 11) |
| Default text style | Font, size and color used by every element that doesn't set its own |
| Named styles | Reusable styles, such as "Label" or "Box heading". See Fonts and typography |
| Custom fonts | Upload TTF/OTF… to add your own fonts |
| Document | Name, PDF title, Author, Subject and Keywords (stored in the PDF's document properties) |
| Designer | Units (Inches, Millimeters, Points) and Grid (pt). These affect only the designer, not the PDF |
The status bar
From left to right:
- The selected band, for example Body, and the selection: No selection, or the element type with its position and size.
- Page information, for example Letter portrait · 8.5 × 11 in, and the zoom level.
Getting help inside the designer
Press F1, or click Help (F1) in the toolbar, to open this guide in a panel on the right side of the designer. It opens at the topic for what you are doing:
- with a table selected, the Tables chapter,
- with a barcode selected, Barcodes,
- in the Report tab, the Report panel section,
- while typing an expression, Data binding and expressions,
- otherwise, this workspace tour.
In the help panel:
- Use Back and Forward to retrace your steps, and Contents for the table of contents.
- Type in Search help to find a topic.
- Drag the panel's left edge to resize it, and click Open in new window to read the guide side by side with the designer.
- Close help (or Esc) closes it.
The help is built into the designer and works without an internet connection. It is in English. In other designer languages, the panel shows the note Help is available in English.
Designer language and theme
The designer's own menus and labels are available in English, Español, Français, Deutsch, Português (Brasil), 简体中文, 繁體中文, 日本語 and 한국어. Your application chooses the language, usually from your browser or user profile settings. Changing the designer's language does not change your documents. For document language, see International documents.
Toggle dark theme switches the workspace between light and dark. The page itself always stays white, as it will print.