Layout Editor: A Full Tour

The Cards Layout Template tab is a card designer. Everything you place here is a template. It renders once per card, filled with that card's own data.

This tutorial maps the interface. The three tutorials that follow it go deep on the parts that actually make a layout intelligent: conditions, binding and visibility.

Opening it

Click Cards Layout Template at the top of the Cards page. You stay on the same project and the same cards. You are just switching from the data view to the design view.

The editor is intended for desktop. Mobile can show the layout and its preview, but canvas editing is disabled there. If a compact screen shows a browse-only message, nothing is wrong with the project; open the same project on a desktop to edit.

The header bar

Left to right across the top-right of the window:

Every one of those is per-layout, not global. Switch layouts and all five change. A Back badge appears alongside them when the layout you're editing is a card back.

The left rail

Four panels, stacked as icons down the far-left edge. Click an icon to open its panel, click the same icon again to collapse it, and drag the panel's right edge to resize it (double-click that edge to snap back to the default width).

Templates

• Your layouts (N): every layout in this project, with Default front / Default back badges. Each thumbnail carries a menu for Set default, Rename, Duplicate and Delete.
• Category sections: ShuffleKit's built-in starting designs, grouped by category (General, plus game-specific sets). Each section previews four and links to the rest.
• New: a blank layout.
• Browse all: a full-window grid of every layout, split into Card Front and Card Back, with New front / New back tiles.

Starting from a template and deleting what you don't need is almost always faster than starting from a blank canvas. When you apply one, ShuffleKit offers to bind its elements to your properties on the way in, and tells you which properties it couldn't place.

Elements

The palette of things you can add:

Below the palette sits an icon browser with two tabs, Game art and Emoji. Clicking any icon drops it onto the canvas as its own element, separate from the Icon box. The Emoji tab adds a Set selector (Noto, Twemoji, Fluent, OpenMoji and more) and a Your icons set with an Upload button for your own SVGs. Both tabs have a Category filter and a search field.

Uploads

Your own uploaded image assets, reusable across every layout in the project.

Layers

The stacking order, plus the fastest place to audit a layout. Covered in Layers & Groups.

The canvas

The card at working size, on a neutral backdrop.

• Click an element to select it.
• Drag to move: drag the handles to resize.
• Selected elements show their binding and any conditional badge directly on the canvas.

Zoom controls sit bottom-right: minus, the current percentage, + (⌘minus / ⌘+), a fit-to-canvas button (⌘0), and a rulers toggle with a px / in / cm / mm unit picker. All of it is view-only. It changes nothing about the card.

Canvas size

Canvas size sits above the canvas, to the left. It sets the card's dimensions, either from a preset (Poker, Bridge, Tarot, Mini, Square, Large) or as a custom size.

Set it before you build. Changing it later doesn't reflow your elements intelligently. They keep their absolute positions, so a size change scatters a finished layout. If you plan to print, pick the size that matches your intended stock now; see Print & Ship.

The context bar

The strip above the canvas is context-sensitive:

• Nothing selected: "Select an element to edit its properties."
• An element selected: that element's full property controls.
• A group selected: group-level controls (visibility rule, position, opacity, lock, ungroup).

For a text element you get, left to right: the binding pill, font family, size stepper, colour, bold / italic / underline / strikethrough, letter case, alignment, spacing, then the Align, Effects, Animate and Position groups. At the far right: duplicate and delete.

The leftmost pill is the important one. It is the data binding, and it's covered in depth in Data Binding.

Preview mode

Click Preview mode and the canvas fills with a real card. A navigator appears at the bottom:

• ‹ / ›: step through cards (the ← / → keys do the same).
• Card n of m, with the card's name beneath: note that m counts the cards that match this layout's condition, not your whole collection. A card can match and still print on a higher-priority layout, so this is an upper bound rather than the exact print set.
• Hide unused: collapse elements that have nothing to show. It's a toggle. Once on, it reads Printed view.
• Exit: back to editing.

If no card satisfies the condition, the bar says so instead: "No cards match this layout's condition."

Design with placeholders, verify with preview. Long titles, empty ability fields and five-icon power strips are the three things that break a layout, and none of them are visible until you page through real cards.

A sane build order

1. Set Canvas size.
2. Pick a template or start blank.
3. Lay out the big shapes: background, art frame, and text panel.
4. Add text and icon elements roughly in place.
5. Bind each one to a property, watching the counter reach N/N.
6. Turn on Preview mode and page through every card.
7. Add visibility rules for the elements that shouldn't always appear.
8. Only then, add a condition if this layout is meant for a subset of cards.

Steps 5 and 8 are the two that people skip and then spend an afternoon debugging.