A custom component must be defined by a manifest.json file placed in the root directory of the package that describes the component.

property	type	description	required
main	String	Path to the JavaScript file for the component. This file must exist and it should contain a `customElements.define(...)` call that defines the component	yes
version	String	The version number of the component. Should be strictly increasing between deployments.	yes
sheetSettings	Object	Settings for the sheet application type (i.e. device page or main page)	yes *
cardSettings	Object	Settings for the card application type (i.e. device overview cards)	yes *
reportSettings	Object	Settings for the report application type	yes *
inputs	Array	The inputs list describes all the inputs for the component, which eventually translate into component properties in the Studio. Inputs are for configuring the component on a page, for example the text that it should display or a data-source tag it should monitor.	yes

* Settings for at least one application type (sheet, card or report) are required, but supporting multiple types is optional.

The manifest JSON can be validated against its schema.

Example file

A manifest file for a sticky note custom component may look like this:

{
  "main": "sticky-note.js",
  "version": "1",
  "sheetSettings": {
    "defaultCols": 3,
    "defaultRows": 4,
    "minCols": 1,
    "minRows": 2
  },
  "inputs": [
    {
      "key": "text",
      "type": "Text",
      "label": "Note",
      "placeholder": "Enter text"
    },
    {
      "key": "color",
      "type": "Selection",
      "label": "Color",
      "options": [
        { "value": "#feff9c", "label": "Yellow (default)" },
        { "value": "#ff7eb9", "label": "Pink" },
        { "value": "#7afcff", "label": "Blue" },
        { "value": "#f49f3f", "label": "Orange" },
        { "value": "#a6efa6", "label": "Green" }
      ],
      "defaultValue": "#feff9c"
    }
  ]
}