Kaizendex HelpOpen the app

Customizing the card

Control how a Collection's feed card looks — Property order, width, labels, icons, fonts, colors, sizes, and spacing — with a live preview, without changing the data you track.

Every Collection has a card — the little block you see for each entry in your feed. You decide how that card looks: which Properties show, in what order, how wide, with what labels and icons. This is pure presentation — changing the card never changes the data you've logged.

You edit the card from the Properties tab of a Collection, right where you define them. A live preview sits at the bottom and updates as you tweak.

What you can change per field

Each Property row has a set of controls on its right side:

  • Show / hide (the eye) — toggle whether this field appears on the card at all. Hidden fields still store data; they just don't clutter the card.
  • Label style — how the field is labelled on the card:
    • Label — the field's name (e.g. "Calories"). The default.
    • Emoji — the Property's emoji instead of the name.
    • Icon — the Property's icon (see Field icons below).
    • No label — just the value, no label at all. Great for compact cards.
  • Position — where that label sits relative to the value: Above it, Before it, or After it. (Hidden when Label style is No label — there's nothing to place.)
  • Width — how many of the card's 12 columns the field spans, from 1/12 (narrow) to 12/12 (full row). auto lets Kaizendex pick a sensible width.

Drag the handle on the left of any row to reorder fields — the card follows the same order.

Field icons

Every Property shows a small icon in its row. Click it to change it: a picker opens with three tabs — Emoji, Icons (the full icon library, searchable by name), and Upload (drop in your own image or paste an image link). Pick a 🔥 or a flame icon for calories, a 🏃 for distance.

A custom icon is remembered for this Collection only. To show it on the card, set that field's Label style to Icon. Choose Remove in the picker to go back to the default icon for the field's kind.

The Title

The Title row is the headline of the card. It behaves like any other field — drag to reorder it, set its width, change its label style and position, hide it — but you can't remove it (every card has a title).

By default the Title leads with its icon sitting Before the entry name. Switch its label style to No label for a clean text-only headline, Above to stack the icon over the name, or Label to show a small "Title" caption beside it — exactly the controls a Text field has.

Its icon defaults to the Collection's icon but you can give the title its own — click the icon on the Title row and pick a different one. That doesn't change the Collection's icon. See Properties and the Title for how the title's text works.

Editing the title and emoji on the card

By default a card's title and emoji are read-only — tapping either one opens the entry. A card behaves like a view, so a stray tap never starts an edit or loses your place. You always edit an entry's title and emoji on its own entry page.

If you'd rather edit them right on the card, turn it on per Collection — two independent switches sit on the Title row of the Properties tab:

  • The ✏️ pencil — lets you rename the entry by tapping its title right on the card.
  • The 🙂 face — opens the emoji picker when you tap the emoji on the card.

Turn on either, both, or neither. (They map to editable and emojiEditable on the title field if you'd rather use Edit JSON.) With both on, you can still open an entry by clicking elsewhere on its card or using ⋯ → Open.

Finer control with Edit JSON

The visual controls cover the everyday cases. For full control over how the card looks, click Edit JSON (top of the Properties list) to open the card's complete layout as a document. Paste a layout, hit Apply, and it validates instantly — invalid values are rejected with a clear message pointing at exactly what's wrong. This is also how the AI assistant designs cards for you: just describe the card you want.

For the whole card (card), you can set:

  • background, foreground (text), accent, and border colors.
  • font — any of the app's fonts (e.g. geist, geist-mono, inter, space-grotesk, lora, jetbrains-mono).
  • fontSize — a base text size for the card.
  • padding, gap (space between fields), radius (corner rounding), borderWidth, and dividers (false hides the thin lines between every field at once).

For each field (under fields, by field name), you can set its font, fontSize, fontWeight, color, labelSize, labelColor, iconSize, align (left / center / right), padding, checkboxColor (for a True/false field), and divider (false removes the thin line before it) — each overrides the card-wide setting just for that field.

The title field also takes two on/off switches of its own — editable and emojiEditable — that let you rename the entry or change its emoji right on the card. See Editing the title and emoji on the card.

A Sub-entries field (a list like a dish's ingredients) takes three switches of its own that turn its compact list into a checklist or todo: subEntryHideEmoji (hide the repeated emoji on every row), subEntryEditableTitle (type each row's title right on the card — its ⋯ menu moves to the right so a tap edits, not opens), and subEntryAddTypeId (set it to a Collection's id and + Add drops that kind instantly, skipping the "what kind?" search — the new row is ready to type, and Enter adds the next). All three are off by default. See Make it a todo list.

Two rules keep cards tidy and safe:

  • Sizes use names, not pixels. Font sizes are xs, sm, base, lg, xl, 2xl; spacing/radius are none, xs, sm, md, lg (and xl for radius); borders are none, thin, medium, thick. You can't accidentally make text 500px tall.
  • Colors are a hex code or a theme color. Use a fixed color like #16a34a, or a theme name like role:accent / role:muted-foreground so the card automatically follows your theme (and light/dark mode). A per-card color overrides your theme for that one card.
{
  "version": 1,
  "card": {
    "background": "#1a0b2e",
    "foreground": "#f5e6ff",
    "accent": "#c026d3",
    "font": "geist-mono",
    "radius": "xl",
    "borderWidth": "thick"
  },
  "fields": {
    "title": { "fontSize": "2xl", "align": "center", "editable": true, "emojiEditable": true },
    "calories_1": { "fontSize": "xl", "color": "#22d3ee", "labelColor": "role:accent" }
  }
}

Custom cards — full code control

The visual controls and Edit JSON both arrange the same set of building blocks. If you want something they can't express — a custom animation, a swipe-to-complete gesture, tap-to-set buttons, a little celebration — you can build a Custom card: a fully bespoke card written in code, just for one Collection.

Open it from the Collection page's ⋯ menu → Add custom card. A drawer lets you start from a template (Food, Dish, mood, exercise), tweak it, and watch a live preview, then Apply & activate. From then on, that Collection's entries render through your custom card instead of the standard one. Turn off card reverts to the standard layout — your card is kept, not deleted.

The built-in Food and Dish cards show what custom cards can do: a photo when you've added one (and a clean, gap-free layout when you haven't), macro fields you edit right on the card, an optional portion dial that stays tucked away until you want it, and — for a Dish — its calorie total and ingredient list rolled up live from the foods inside it. Photos load fully inside the card's safe sandbox, so a custom card can be picture-rich without ever reaching the network.

Once a custom card is on, the Collection's Properties tab shows it clearly: a “Custom card active” banner with Edit code and Turn off buttons, your actual card as the live preview, and your field list still there — each field tagged with whether the card can read or write it. The per-field layout controls step aside (your card decides its own layout), but you can still add, rename, and remove fields exactly as before.

Turning a card off never deletes it. When it's off, the Properties tab shows a “Custom card is off” banner with a Turn on button — flip it back anytime, and your code is exactly as you left it. (The Turn-off message also has a one-tap Undo.) To remove a card for good, open the editor and use Delete — a separate, deliberate action, so “off” is never confused with “gone”.

It's the most powerful option, with guardrails that keep it safe:

  • It runs sandboxed and isolated — it can read and change only the fields you allow, and can never reach your account, your other data, or the network. A broken card just falls back to the standard card; it can never lose or corrupt what you've logged.
  • It can match your theme automatically (and follow light/dark), or go fully custom.
  • The entry page is always there — you can edit any entry the normal way even with a custom card active.

Writing the code is for advanced users — but you don't have to. Just describe the card you want and the AI assistant builds it for you, the same way it designs layouts.

Next