---
updatedAt: 2026-06-24T12:38:29.000Z
agentTools:
  projectIndex: https://developer.ixon.cloud/llms.txt
---

# Manifest file

Everything you need to know about the UI Component's "blueprint".

# Definition

Every UI Component has a `manifest.json` file. It consists of the **component's "instruction sheet"**: It decides how the component should be laid out on the screen and what information it can accept.

This file is found in the main folder of the UI Component's project, and you don't have to create one from scratch: a **ready-made starting version** is already included when you open the UI Component's workspace.

![](https://files.readme.io/4a8971a688d80905bd227d1dc2249cf8f3ecb6f4f177bd686bd066f902378129-image.png)

# Manifest file's properties

In this section you can find the possible strings or objects that can be used to customize the UI Component's main structure:

| 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                                                |
| <Anchor label="sheetSettings" target="_blank" href="https://developer.ixon.cloud/docs/component-settings#/sheet-settings">sheetSettings</Anchor>    | Object | Settings for the sheet application type (i.e. device **page or main page**)                                                                                                                                                                                                     | Yes (see note below)                               |
| <Anchor label="cardSettings" target="_blank" href="https://developer.ixon.cloud/docs/component-settings#/card-settings">cardSettings</Anchor>       | Object | Settings for the card application type (i.e. device overview **cards**)                                                                                                                                                                                                         | Yes (see note below)                               |
| <Anchor label="reportSettings" target="_blank" href="https://developer.ixon.cloud/docs/component-settings#/report-settings">reportSettings</Anchor> | Object | Settings for the report application type (i.e. the size of a **report**)                                                                                                                                                                                                        | Yes (see note below)                               |
| [inputs](https://developer.ixon.cloud/docs/component-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 (if no inputs are used, leave the array empty) |

<br />

> 👍 Note: The component's structure
>
> Including at least one of these settings (`sheetSettings`, `cardSettings` or `reportSettings`) is required to create a component for either a **page (sheets), card, or report**. It is necessary to instruct the SDK to give it a **structure**. By including all three settings, the component can be used on all of them.

> 🚧 Pay attention to the manifest.json's structure!
>
> The IXON UI Component's SDK manifest JSON can be **validated against its <Anchor label="schema" target="_blank" href="https://cdn.ixon.cloud/custom-widgets/component-manifest.json">schema</Anchor>**, where you can check if your `manifest.json` file follows the correct structure.

## Example file

A manifest file for a sticky note UI Component on only a device page or main page may look like this:

```json manifest.json
{
  "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"
    }
  ]
}
```