Features
Every card has a set of features that can be inherited from other cards or overridden. Features determine how a card is saved, what it looks like, data validation, and more.
Every Cardstack project has a base card with some built-in features to get you started.
Example features
You can see a full list of supported features in the Card API source code. Here, we will cover some of the most commonly edited features of a card:
writer
- pointer to the file that handles saving and updating a cardindexer
- pointer to the file that defines what goes into the index and how often it is refreshedisolated-layout
- holds the template that determines how a card looks when viewed alone.isolated-css
- the CSS rules associated with theisolated-layout
embedded-layout
- holds the template that determines how a card looks when it is viewed as part of another cardembedded-css
- the CSS rules associated with theembedded-layout
field-view-layout
if a card is used as a field, this holds the template that determines how a card looks in "view" modefield-view-layout
if a card is used as a field, this holds the template that determines how a card looks when someone edits the datafield-validate
- if a card is used as an editable field, it can have validation code. For example, this could check that something typed into a text input is a valid email.field-deserialize
- sometimes, the data for a field should not be shown in its raw form, but rather processed for display. An example is turning a date string into a date object that the front end can use.
Frequently asked questions
Where are features used?
A card's features span both front and back end concerns.
For example, the isolated-css
is used by the browser, while the writer
code is used by the Hub on the back end.
Where are features defined?
Features are defined as part of cards and realms. For an example, see the file-realm
source code. In a card's JSON, you can see the pointer to the JavaScript files containing the functionality:
"csFeatures": {
"indexer": "indexer.js",
"writer": "writer.js"
},
What if a card does not have a feature defined?
If a card does not have a particular feature defined, the Hub looks up the adoption chain until it finds a card that has the feature, and uses that.
Said another way, if a card does not have an indexer defined, it can inherit it from a parent or grandparent card.