Deck Editor

The Deck Editor is a visual tool for building and editing decks without touching the deck's JSON. Everything it does is written into the same cardDefaults, cardTypes and faceTemplates structures described in Cards and Decks, so a deck built here stays fully editable in the JSON editor and vice versa.

For hands-on walkthroughs see Deck Editor Step By Step Example (builds a 16-card deck from scratch). If you want to see how this is done in raw JSON, see JSON Editor Step By Step Example, but that demo will not be maintained as current.

Opening and closing the editor

Enter Edit Mode and click the Deck editor button on the room toolbar (the palette-like icon next to the tutorial cap). If a deck or a card is selected, that deck is opened; otherwise the last deck you worked on, or the first deck in the room. A deck's properties module also has an Open deck editor button, and a card's properties module has Edit Cards and Deck, which opens the editor on that card's type.

The editor covers the play area; the room toolbar and the properties sidebar stay visible, but most room-editing buttons are greyed out while it is open (Grid still works, and toggles a grid over the card instead). Close it with the Close button in the top bar, the toolbar button again, or Escape when no face object is selected.

Adding a new deck

Click Add New Deck in the top bar (or the + on the All Cards tab). The overlay groups the ways to get a deck into three sections, only one open at a time:

• New blank deck – an empty deck you design here. Pick a card size (Default 103×160, Small, Poker, Tarot, Large, Wide, Square tile 100×100, Token), optionally type an id, and click Create empty deck. You get two faces — face 0 (back) and face 1 (front) — and one card type.
• Use an existing deck – a deck from the public library, a ready-made traditional deck (playing cards, Spanish/German/Swiss suits, tarot, hanafuda, mahjong, dominoes) or an import from Tabletop Simulator.
• Create a custom deck – generate the cards from suits and ranks, from one picture per card, from one picture with all the cards on it, from a front and a back image per card, or from text cards. These are described in detail on the Deck Editor Step By Step Example page.

Two checkboxes at the bottom apply to all of them and are on by default: a card holder that the deck and its cards are put into, and a reset button that gathers the cards back, turns them face down and shuffles (only available together with a holder). Without a holder the cards go into a pile in the middle of the table.

The areas of the editor

Area	What it is for
Top bar	Add New Deck, Undo/Redo, the session history breadcrumb, Card view and Close
Left column	A toolbar, the "Add to:" submenu, and a tree of decks → faces → face objects
Center	The card preview: the selected card type on the selected face, at the size it will be played
Right sidebar	Four tabs — All Cards, Face, Card Type, Object — each editing one scope of properties
Bottom strip	One tile per card type, plus the card type and card count buttons above it

Two colors run through the whole editor: blue means the same on every card of the deck, amber means different per card type.

Top bar

• Add New Deck – opens the overlay described above.
• Undo (Ctrl+Z) / Redo (Ctrl+Y or Ctrl+Shift+Z) – the editor keeps its own history of the current session; the breadcrumb next to it lists your recent steps and you can click one to jump back or forward to it. Every jump is also a normal room change, so the room's own history still works.
• Card view – on by default. Turning it off makes the center area show the room's play area instead, so you can compare the deck with the game while still editing it in the sidebar.
• Close – closes the editor.

Left column: the tree

The tree lists every deck in the game, each deck's faces, and each face's objects. Click a row to select it — the sidebar switches to the matching tab. The current deck's row shows its id in an editable field. Face objects show a live preview of themselves, and the text of a text object can be edited right in the tree. Objects can be dragged within their face to change the order they are drawn in (the list is bottom-up: later objects are drawn on top).

The toolbar above the tree acts on whatever level is selected:

• + – add a face (deck selected) or a face object (face or object selected).
• Copy – copy the selected deck, face or object(s).
• Delete – delete the selected deck, face or object(s).
• Show all areas – outline every face object on the card at once, so you can see where each one sits.
• Save/export – print the deck, save it as a PDF, or export/import the card types as CSV.

Clicking + opens the Add to: submenu, where you first choose whether the new object is All Cards (blue, the same on every card) or Card Type (amber, a dynamic property that can differ per card type — the editor creates the card type property and the binding for you). Then click Text, Write box, Image, Icon or Color (a solid color box, e.g. as a background). Image and Icon open the symbol picker. The new object is inserted directly after the selected one.

Write box adds a write object — a box players can type into while playing, whose text is kept on the card. It is only offered in the Card Type mode, since such an object always stores its text in a card property; the editor creates that property and the binding in one step. The new box is placed below the text already on the face and leaves a strip of card free below itself, because a card cannot be dragged or flipped by a write box — the sidebar warns you when the boxes on a face leave no such strip. Its row in the tree edits the box's placeholder rather than a card property, since the text itself is whatever a player types on that one card, and that placeholder is what the editor shows in the preview.

Center: the card preview

The card is scaled to fit. Scroll to zoom around the cursor (or pinch on a touch screen), hold Space and drag to pan. Click an object to select it and drag it around; click the empty card to deselect. Ctrl/Cmd+click adds or removes an object from the selection, Shift+click selects the range up to it, and Ctrl+A selects every object of the shown face.

A small floating toolbar hangs under the selected object with handles to resize, resize keeping the aspect ratio, rotate and move it — plus a handle to drag the toolbar itself out of the way. While you drag, the exact width/height, rotation or x/y is shown. All of the handles act on the whole selection.

Right sidebar: the four tabs

Each tab starts with its own add / copy / delete buttons for the thing it edits.

• All Cards (blue) – the deck's cardDefaults: the properties every card starts with, such as width and height, and things like a clickRoutine that should apply to every card.
• Face (blue) – settings of the shown face on every card, typically border, radius and enlarge.
• Card Type (amber) – the properties of the selected card type alone, starting with its Name (renaming also updates the existing cards). Every property that a face object is bound to appears here, so this is where you fill in the text, color, icon or image of each individual card.
• Object (blue, with an amber section) – the selected face object. type is a dropdown; the rest depends on the object. With several objects selected, every row changes all of them at once and a property they disagree about shows (mixed) until you type a new value. This tab also has an Align row: align left/center/right and top/middle/bottom (two or more objects selected) and equalize horizontal or vertical spacing (three or more).

On the All Cards and Object tabs the rows are sorted into collapsible Content, Position, Size, Colors, Appearance blocks, plus Custom for a game's own properties. Every tab ends with a new property row: type a name, choose the value type (text, number, color, true, false, object/array) and click Add. Properties can be removed again with the trash button, and image and icon properties get a picker button next to the field. Whether a row gets the color swatch and color picker depends on its value, not on its name: a value that is a color always gets one, and a color-named property gets one while it is empty or holds a half-typed #/rgb() value, since that is how a color is put in there. So a property that only sounds like a color — the standard deck's suitColor sort key, which holds ♠ rather than a color — has no picker that could overwrite its value with a hex code.

A css property (or a <something>CSS one) is a row like the others, with its declarations as text in the field and a button at the right end that opens the same devtools-style list of property: value rows the Edit Widgets tab uses — one row at a time, a checkbox to switch a declaration off, a color swatch where the value is a color and a ⚠ on a declaration the browser does not understand. It works on all four tabs; where the engine reads class or selector sections (All Cards, a Card Type and an HTML face object) those can be added below the list, and the field then names the sections instead of the declarations. See Using CSS for what to put in there.

The Dynamic properties section at the bottom of the Object tab (amber) is what makes an object differ per card type. Each binding names an Object property that gets filled from a Card property of the card type; pick or type both and click Link. The current value is moved into the card type as a starting value. Removing a binding makes the property static again but keeps the card type property, since routines or CSS may still use it. Bindings are per object, so they can only be edited with a single object selected.

Bottom strip: card types and card count

Each tile shows a mini rendering of one card type on the current face, its name, and the number of cards of that type currently in the room, with − and + to change it. Click a tile to select the card type (the sidebar jumps to the Card Type tab); drag tiles to reorder them.

Above the strip:

• Card types: add a blank card type, import card types from a CSV file, copy the selected card type (a trailing number is incremented automatically), or delete it together with its cards.
• Card count: − All and + All change the number of cards of every type by one. Note that adding a card type does not add any cards — a new deck starts with one card, so − All followed by + All is a quick way to end up with exactly one card of each type.

Keyboard shortcuts

Key	Action
Ctrl+Z	Undo
Ctrl+Y / Ctrl+Shift+Z	Redo
Ctrl+A	Select all face objects of the shown face
Ctrl/Cmd+click	Add or remove an object from the selection
Shift+click	Select the range of objects up to the clicked one
Delete	Delete the selected face object(s), or the selected card type (with a prompt)
Escape	Deselect the object, or close the editor if nothing is selected
Space+drag / scroll	Pan / zoom the card preview