Edit Page

Schema


One of the most important things to know about Cards is that there is a tight coupling between the data backing a Card and the presentational aspects of a Card. To say it another way, a Card is made of both visual elements and the data model that describes the attributes of that Card.

In this section, you will learn about common Card properties.

The average user does not need to know or understand this information, but it may be helpful for developers.

Defining a Schema

Every Card has a schema, where the types of data the card relies on are defined. For example, a blog post Card might have a title, description, publish date, topic, and more. The schema is a Card's attributes and configuration.

The defaults of a Card

Every Card inherits from the base-card. A base card has some default styling and features to get you going. If you inspect a Card's JSON, you will see some of the following properties:

The following cs fields exist on cards:

csRealm: The realm that the card currently resides in.

csId: distinguishes the card within its originalRealm. In some cases it may be chosen by the person creating the card. In others it may be chosen by the hub.

csOriginalRealm: The realm that the card was first created in. Often times this value will be undefined, when this value is undefined that means that the csRealm (the realm the card currently resides in), is also the realm the card was first created in.

csTitle: A human-friendly name for the card. This value is the value that users can use to identify a card in a card catalog.

csDescription: A brief description of the card.

csFiles: A map of files that belong to the card. This may include .js, .hbs, .css, or any other file that can be serialized into a string. These files can also be organized in a directory structure, like so:

  csFiles: {
    templates: {
      "isolated.hbs": "Hello World",
      "embedded.hbs": "Hello Mars"
    },
    styles: {
      "isolated.css": ".card-boundary: { background-color: pink; }",
      "embedded.css": ".card-boundary: { background-color: blue; }",
    }
  }

csPeerDependencies: this represents the peerDependencies portion of the package.json file that a card relies upon. e.g:

  csPeerDependencies: {
    '@cardstack/hub': '*',
    '@cardstack/core': '*'
  },

csFieldSets: this is an object that holds the fields that are available in the card in various card formats, e.g.:

  csFieldSets: {
    isolated: ['title', 'author', 'body'],
    embedded: ['title', 'author']
  }

csFields: this is an object that holds the field cards (as card values) for the fields that the card uses. Only the card's own fields appear here. The card's adopted fields' field card appear in the adopted card's csFields property. The name of the property is the name of the field in the card, and the value of this property is card value of a card that adopts from a "card type" that this field represents. E.g.:

  csFields: {
    title: {
      csAdoptsFrom: {
        data: {
          id: "https://base.cardstack.com/public/cards/string-field",
          type: "cards"
        }
      }
    },
    body: {
      csAdoptsFrom: {
        data: {
          id: "https://base.cardstack.com/public/cards/string-field",
          type: "cards"
        }
      }
    }
  }

csFeatures: This is an object that maps card features for this card to the card file associated with the specified feature. For JavaScript files you can specify just the JavaScript file which assumes the feature can be found at the default export of the JavaScript module. Or you can specify an array, where the first item in the array is the JavaScript file, and the second part of the array is the named export that defined the feature. A card can also inherit a feature from its adoption chain if its not specified directly in the card. E.g.:

  csFeatures": {
    "isolated-css": "isolated.css",
    "embedded-css": "embedded.css",
    "indexer": "indexer.js",
    "writer": "writer.js",
    "field-validate": ["field-hooks.js", "validate"],
    "field-deserialize": ["field-hooks.js", "deserialize"]
  }

csFieldOrder: This is an ordered list of fields to render (both the card's own fields and adopted fields). This is primarily used by the base card's isolated and embedded templates when deciding the order in which to render fields.

csCreated: This is an ISO-8601 datetime string of when the card was created.

csUpdated: This is an ISO-8601 datetime string of when the card was last updated.

csFieldArity: This is a field that is used exclusively for cards that appear in the csFields property of a card. csFieldArity describes the cardinality of the field and currently can be either the value "singular" or the value "plural".

Protected card attributes

If an attribute of a Card's JSON starts with cs, it cannot be overridden. So, if you make your own custom attributes for a card, don't start them with cs.