Component editor
What is a component?
A Component = layout + data
A component is a set of cards or tokens, all based on one layout. So a specific card type like a deck of event cards is a component. That includes the table (or Google sheets table if you're using that) + the layout that the component is connected to.
Creating a component
Click the create component button to make a new component in a project.
Duplicating a component
In the component settings menu (the 3 dots) you'll find an option to duplicate the component.
Please note that duplicating a component creates a copy of the table data, but you have the option to create a duplicate layout or connect the new component to the same layout as your original component.
Important: Deleting or editing a layout that multiple components are linked to will affect all components that are linked to the layout.
Getting to know the component editor
When you first create a component, you'll need to connect it to a layout. Once you'd done that, you'll notice you have 1 card which has the default zone values from the layout:
But what is the table underneath the card? If you look closely at the table headers, you'll notice that the columns in the table match the zones you set up in the layout:
This white column header matches an text zone in your layout. So the cells in this column are text cells.
This purple column header matches an image zone in your layout. So the cells in this column are image cells.
This blue column header is a special column and doesn't match any zones in your layout. This particular one controls the number of copies of any particular card you have.
Editing cards in the component editor
Creating more cards
To create more cards, use this button:
You can also duplicate an existing card using the hotkey CTRL+D.
Editing text on a card
Click on a text cell and you can type in text to edit that particular text zone on a card. This allows you to edit cards across your component very quickly.
Note there's a little floating toolbar which appears just above the text cell. You can use it to apply formatting individual words like bold/italic, or insert inline images, and so on.
You can also use common hotkeys like CTRL+B to set certain text to bold etc.
Editing Images on a card
Click on the little image icon in an image cell that will open your image folder.
In the folder popup that appears, click an image to select it.
Now the image zone on your card is set to the image you chose.
Note how the image name is also populated to the image cell? This is exactly how your image column should look if you were importing from Google sheets for example (ie the column header matching the image zone name, and then just the name of the respective image in each cell in the image column).
Hotkeys
Note you can check the hotkeys for the component editor by clicking the 3 dots (top left) > hotkeys.
Component editor topics:
There's lots more to learn about the component editor. Check out the topics below when you're ready to start exploring!