Add code to your manifest file

After adding a function to the JavaScript file, you need to reference that function in the manifest.json file. Referencing the JavaScript function will tell the service to use that JavaScript to render the component.

Before you start

You must have already added the base code to your manifest.json file:

  "$schema": "http://localhost:3000/schemas/v1.json#",
  "name": "helloworld1",
  "version": "1.0.0",
  "mainFunction": "main",
  "displayName": "Hello World test component",
  "namespace": "test-components",
  "icon": {
    "id": "list_alt",
    "color": {
      "type": "hex",
      "value": "#2D2D2D"
  "description": "This component is set up as a demonstration component for Hello World documentation purposes."

Read File structure - manifest.json for more information about this code,


Add an entry to the functions array in your manifest.json file:

"functions": [                  (1)
      "name": "main",           (2)
      "entry": "main.js",       (3)
      "input": {                (4)
        "type": "object",
        "properties": {
          "text": {
            "type": "string"
        "required": []          (5)
      "output": {               (6)
        "responseType": "html"
1 functions defines an array of one or more functions that are used to render the component. Multiple functions can be useful when you want both an HTML and a JSON view of your content, or you want to create an interactive component that uses different JSON end points as mini APIs to load data.
2 name within the function will match the name main in the mainFunction field of the manifest. This tells the Component Service which function to use for the primary component rendering. The name must always be in lower case without spaces.
3 entry contains the file name of the JavaScript file containing your function.
4 input defines your content model or data structure. This will be used to generate the editing experience for the component in Matrix automatically. We are defining a single string called text for this example. This is the input we referenced in Add a JavaScript function to render your component with ${input.text}.
5 required specifies which input fields are required and is used to validate the editing form generated in Matrix. The required field is mandatory, so if you do not need any required fields, you will need to specify an empty array, as shown in this example.
6 output specifies the responseType, either HTML or JSON. In this case, we want it to be HTML because we are rendering a front end.