Custom components (Alpha)

4min

This feature is currently in its Alpha stage of development.

  • As an early version, it may not include all planned functionalities and is subject to significant changes based on ongoing development and user feedback.
  • In this phase, the feature may contain bugs or behave unpredictably.
  •  recommends using standard, fully supported components until this feature has been fully tested and refined.
  • We encourage you to provide feedback and report any issues to help us improve and refine the feature for future releases.


Custom components extend the standard set of components in to provide additional UI capabilities and features. To understand what custom components are, when and why you would use them, see Custom Components (Alpha).

  1. Creating custom components (Alpha) explains where and how to create the components and how to reuse them in a .
  2. Passing data in and out of custom components is explained in Inputs & outputs (Alpha).
  3. Combine custom & standard components (Alpha) to create your own customized components and templates.
  4.  offers a variety of Templates (Alpha) ready to use in your app, making development faster and easier. Select the template you want to use, copy the code from GitHub, and customize it to meet your needs.
  5. The components that fall into the custom component category are:
    1. Card (Alpha)
    2. Icon (Alpha)
    3. Text (Alpha)
    4. View (Alpha)

How to create a custom component

1

In in the components folder, create a new jigx file, e.g., custom-button.jigx.

2

Select the type: component.default. All custom components require this type.

3

Under the children: property, use IntelliSence (Ctrl+space) to see the list of available components. Select the components, e.g., type: component.button.

4

Under the options: properties, create a space and use ctrl+space to open the IntelliSense popup.

5

You can select the styling properties from the list shown.

6

Configure the other properties provided in the code snippet.

7

Open the where you want to use the custom component and reference component.custom-component. Use the componentId property to reference the name of the custom component file, e.g., componentId: custom-button.

8

Test the on a mobile device to ensure the button is rendering correctly.

Considerations:

  • Localization can be applied to custom components such as Button (Alpha) and Text (Alpha).
  • When using component.image in a custom component, the height property must be specified as part of the size property, otherwise validation errors occur, see below:
Correct YAML
Incorrect YAML




Updated 24 Feb 2025
Doc contributor
Did this page help you?