Data Mode & Spreadsheet

Intermediate · 8 min read

Overview

Data Mode is a split-view spreadsheet editor built directly into Chitmunk. It lets you edit your CSV data side-by-side with a live canvas preview of your card, no need to switch between a spreadsheet app and the editor. Every change you make in the spreadsheet updates the canvas instantly, so you can design your template and fill in your data in the same workflow.

Entering Data Mode

Click the Data button in the toolbar to open the data panel. If no CSV data exists yet for the current card type, Chitmunk automatically seeds a starter spreadsheet with one "Name" column and one blank row so you have something to work with right away.

Once the data panel opens, a spreadsheet view appears on the left side alongside the canvas. You can resize it by dragging the panel edge. The canvas remains fully interactive on the right. You are now in the split view.

The Split View

The split view has two panels:

• Left: Spreadsheet. Shows all your columns and rows. Click any row to select it and update the canvas on the right immediately.
• Right: Live interactive canvas. Shows the card rendered for the currently selected row. All template bindings, conditional visibility rules, and image bindings are applied in real time. You can still interact with and edit elements directly on the canvas.

A draggable splitter sits between the two panels. Drag it left or right to give more space to whichever side you need, more canvas when inspecting the design, more spreadsheet when editing lots of columns.

Editing Cells

Working with cells in Data Mode follows familiar spreadsheet conventions:

• Click a cell to select its row and highlight it in the canvas preview.
• Double-click (or click an already-selected cell) to enter inline edit mode.
• Enter commits the edit and moves the selection down to the next row.
• Tab commits the edit and moves right to the next column.
• Escape cancels the edit and restores the original value.

Edits update the canvas preview in real time as you type: you do not need to commit first to see the result on the card.

Adding Rows & Columns

Use the buttons above the spreadsheet to grow your dataset:

• +Row adds a new blank row at the bottom of the spreadsheet.
• +Column prompts you to enter a column name, then adds that column to every existing row with an empty value.

Column names you create here become the template variables you reference in your design with the {{Column Name}} syntax.

Deleting Rows & Columns

To remove a row, select it and click the Delete Row button. Chitmunk requires at least one row to remain, so the last row cannot be deleted.

To rename or delete a column, right-click its column header. A context menu offers two options:

• Rename column: prompts for a new name and updates the header. Any element bindings in your design that reference the old column name are updated automatically to use the new name.
• Delete column: removes the column and all its data from every row.

Starting from Scratch

You do not need to import a CSV file to use Data Mode. If you open Data Mode with no existing data, Chitmunk creates a blank spreadsheet with a single "Name" column and one row. From there you can:

• Add columns for each piece of data your card template needs.
• Add rows for each card in your set.
• Fill in values and watch the canvas update live.

This is the fastest way to go from a blank template to a fully populated card set without ever leaving the editor.

Live Preview

The canvas on the right always renders the card for whichever row is selected in the spreadsheet. The preview is fully live, all of the following update as you type:

• Template bindings: any {{Column}} placeholders in your text elements are replaced with the current row's values.
• Conditional visibility: elements set to show or hide based on a column value appear and disappear as you edit that value.
• Image bindings: image elements bound to a CSV column swap to the image path specified in that cell.

This tight feedback loop: type a value, see the card update, is the fastest way to iterate on your card design and data together.

Exiting Data Mode

Click the Data button in the toolbar again, or press the X button at the top of the spreadsheet panel. Data Mode closes and the canvas returns to full size.

Your data is fully preserved when you exit. The data you entered or edited in Data Mode is the same CSV data used everywhere else in the app: for exports, PDF generation, TGC upload, and Google Sheets sync.

Tips

• Use Data Mode for quick iteration cycles. Design a template element, open Data Mode, fill in a few test rows, and refine, all without leaving the editor.
• Name columns clearly. Column names become template variables. Clear names make your {{Column}} bindings readable and easy to manage.
• Test conditional visibility live. Edit a column value and watch elements appear or disappear on the canvas. This is much faster than exporting to check your rules.
• For large datasets, import instead of typing. Data Mode is ideal for datasets up to a few dozen rows. For larger sets, import from a CSV file or connect Google Sheets via the Google Drive panel.