Modules and Automation Cards can provide CastHub with a real-time specification of user-defined Properties. These properties can be modified by the user on-demand inside the CastHub UI itself and your code can react as necessary.

The property specification is defined in your code, and the function itself is asynchronous, allowing you to populate the specification with data fetched from external APIs.

Providing a Specification

By specifying the method prepareProps in your code, you can return a specification that will be used to render the Properties Form to the end-user.

This method is asynchronous, and there is currently no timeout on the length of time this method can take to execute. For example:

 * @return {Promise}
async prepareProps() {
    return {
        hello: {
            type: 'text',
            required: true,
            default: 'test',
            label: 'Hello World',
            help: 'Enter any text',

Reacting to Changes

When a User modifies a property, we provide a way for you to react to this change in real-time through another method, onPropChange. This method is also called for every property on initial load.

 * @param {String} key
 * @param {*} value
 * @param {Boolean} initial Whether this is the initial value, `false` if it's an update
onPropChange(key, value, initial) {

Supported Types

Every field in the property specification must provide a type. This defines how the property will be rendered to the user, and each has different additional fields.

  • text - Renders a textfield for the user to freely enter any text.
  • toggle - Renders a switch-like component that can be toggled on/off.
  • slider - Renders a slider that forces an integer in the given range.
    • Requires the range key, which is an Array of 2 Integers defining the min/max range. E.g. range: [1, 10]. The default of this field must be within this range.
  • select - Renders a select/dropdown for the user to pick one of the given options.
    • Requires the options key, which is an Object of key-object option pairs. E.g.
      js options: { twitch: { text: 'Twitch', icon: 'twitch', }, },
      The default of this field should link to one of the keys for an option.