The Layout Editor is the page dedicated to creating card designs and structures.

A Layout is a container for various drawings, text, and shapes called Layers. As you work in the editor, you will create, group, and align many Layers to create templates for your cards.

Either select an existing Layout or create a new Layout to open the editor.

Layout Editor Sections Reference #

The editor is split up in three sections, designated by capital letters, in the following screenshot.

Tool Select Toolbar (A) #

Each icon of this toolbar represents a tool used to create or modify different kinds of Layers in the Layout Canvas.

The tool behaviors, as associated by letters, are:

1. Select Layer – Select, move, and resize existing Layers.
2. Draw Line – Creates a line with adjustable endpoints.
3. Draw Rectangle – Creates a polygon with four shapes.
4. Draw Ellipse – Create circular/oval shapes.
5. Draw Polygon – Create a shape with a customizable number of sides. The default is a 3-sided shape (triangle).
6. Draw Star – Create a star shape.
7. Place Image from File – Outline an area for an image to be displayed. The image can then be set in the Property Editor.
8. Place SVG from File – Outline an area for an SVG (Scalable Vector Graphic) to be displayed. The SVG can then be set in the Property Editor.
9. Place Text – Add a block of multi-line text.
10. Place Text Geometry – Add a block of text with appearance features.
11. Group Child Layers – Outline an area to contain multiple other Layers (like a folder that moves everything inside).
12. Display Child Layers in a Grid – Outline an area that organizes contained Layers into rows and columns, managing alignment and spacing.
13. Stack Children Vertically or Horizontally – Outline an area where contained Layers are automatically arranged either vertically (top-to-bottom) or horizontally (side-by-side).
14. Place QR Code – Outline an area for an adjustable QR code. The data or link can then be set in the Property Editor.

Depending on the selected tool, the Project Toolbar will display adjustable properties of the Layer that it will create.

Layout Canvas (B) #

The Layout Canvas is the central workspace where Layouts are constructed visually. It represents the arrangement of Layers that make up a card, allowing designers to position, resize, and align elements directly relative to their parent Layer. Each Layer corresponds to a visual or Data Source driven component, such as an image, shape, or text field, and their arrangement on the canvas determines how the final card will appear when exported.

Layers Tree (C) #

The Layers Tree provides a structured overview of every Layer within the currently open Layout. It visually represents how Layers are nested, ordered, and organized into containers or groups. This view serves as the Layout’s structural backbone. While the Layout Canvas shows how elements appear visually, the Layers Tree shows how they’re related logically.

Layout properties (D) #

The Property Editor will be populated with the details of the selected Layout while the Layout Editor is open and while there is no Layer selected.

Shared Behaviors #

Selecting Layers in the Layout Canvas with the “Select Layer” tool will outline its area and will highlight its place in the Layers Tree, as well as selecting the other way around.