Instance Properties

Instance properties are the primary view when selecting components in Clutch. This leftmost tab, 'Properties' in the panel's interface can be thought, exactly, as Reacts 'props'. Even properties which are better represented by other controls in the interface like children and styling controls, will have an entry in the properties table found here, making this the best place to get an overview of the configuration of any instance.

Properties can feature many different types on controls.Properties can feature many different types on controls.

Properties can feature many different types on controls.

Each property row features the property name on the left and its value on the right. Some controls, like Object and Array controls are nestable and will add rows which themselves keep their keys on the left and values on the right.

Various property controls exist to handle distinct types of inputs, everything from a Color Picker to Component Children can be selected as a control.

Property Controls

  • Text Input - string text input (default)
  • Dropdown - pick a value from a fixed set of values
  • Array - nestable control, lets users add Clutch controls to create shape of object
  • Audio - Media picker for audio
  • Checkbox - Boolean value
  • Combobox - Multiselect list that also allows arbitrary user input
  • Expression - set the control to be ready for an expression
  • Function - return the result of running the provided function
  • ClassName - enables Clutch's styling system
  • Color Picker - returns a HEX color string
  • Children - adds nesting to the composition view
    • can be made a render function
  • Image - media picker for images
  • Inline Styles - similiar to the object control but single-depth and with auto-completion for styling properties.
  • Module - returns the export of a module
  • Number Input - outputs a number
  • Object - nestable object, lets users add Clutch controls to create shape of object
  • Textarea - long form text control
  • Video - media picker for videos

Changing Properties

Static property controls are not fixed, any property's control can be changed to any other control. (Though there is no guarantee the property knows to receive the type emitted by that control. Opening a properties context menu allows users to set a new control or switch to a dynamic control.

Adding Properties

Properties can be added by clicking "Add property" and giving the property a name. Generally a text input control is added by default, but certain heuristics may trigger a different default. children will add a "Children" control-type, "on____" will add a module, as well as a few more designed to accelerate the property-adding process. You can also choose to go ahead and add the current property to the components documentation.