Help Center

Menu

manifest.json reference

The manifest.json file is a JSON Schema file containing metadata that describes how to execute the component.

The following example shows the structure of a basic manifest.json file.

{
  "$schema": "http://localhost:3000/schemas/v1.json#", (1)
  "version": "1.0.0", (2)
  "name": "helloworld1", (3)
  "displayName": "Hello World test component",  (4)
  "namespace": "test-components",  (5)
  "icon": {  (6)
    "id": "list_alt", (7)
    "color": { (8)
      "type": "hex", (9)
      "value": "#2D2D2D" (10)
      }
  },
  "description": "A demonstration component for Hello World tutorial.", (11)
  "mainFunction": "main", (12)
  "type": "edge", (13)
  "functions": [ (14)
    {
      "name": "main", (15)
      "entry": "main.cjs", (16)

      "input": { (17)
        "type": "object",
        "properties": {
          "entryfield": {
            "type": "string"
          }
        },
        "required": ["entryfield"] (18)
      },
      "output": { "responseType": "html" } (19)
    }
  ]
}
1 The location of the JSON schema. This schema defines the set of allowed and required fields for the manifest.json file.
Depending on your development tool, you may get auto-complete and intellisense after you have added the schema location.
2 Use the version field to specify which version of the manifest file this is. This value must be changed each time the component is deployed. Use Semantic Versioning to describe the version number in your component.
3 name The name of the component. Component names should always be in lower case, without spaces.
4 displayName The friendly display name of the component.
5 namespace The namespace of the component.

This is used to distinguish between similarly named components that may be shared across multiple systems. For example, a Squiz-produced 'accordion' component that might conflict with a customer-built 'accordion' component.
6 icon Definition for the icon used by the component, made up of multiple fields.
7 id The ID for the icon - based on the Material UI Two Tone icon set
8 color The color of the icon, made up of multiple fields.
9 type The type of color, can be "hex" to specify a hexadecimal color code, or "enum" to choose from preset colors.
10 value Either a hexadecimal color code or if using "enum", one of "gray", "blue", "green", "orange", "red", "purple", "teal", "yellow", "pink"
11 description Adds more context to the component - one to two sentences.
12 mainFunction The name of the main function which will be used to render your component. The mainFunction is executed at the base URL of the component, while additional functions are executed at a sub path of the URL.
There MUST be a function specified in mainFunction, and it must refer to a function in manifest file functions array.
13 The type top-level property that will use the edge runtime. To use Squiz’s Components at Edge runtime implementation, see the Make changes to manifest.json documentation for information on this property.
14 functions A set of named functions that can be used to render the component or API endpoints of the component. The default component used to render your component and the editing interface in Squiz Content Management Service is usually called 'main'. You can add additional functions to the object as needed.
15 name The name of the function. This should always be in lower case, without spaces.
The default function should be called main, and referenced in the mainFunction field.
16 entry The file name of the CommonJS (CJS) JavaScript file containing your function.
Read common.js for more information about expected module conventions.
17 input The input field is where the data model for your component is defined. You can use most JSON schema configurations to generate data structures that will be used to create the editing experience for editors automatically.

type The data type of the input - this should usually be an object.

properties Properties of the input object.

entryfield In this example, "entryfield" is the name of the property. As it is a string type, it will show as an editable text field with the label 'entryfield' for editors to add content to.

type - The data type of the property. This can be any valid type in JSON schema or a few Squiz-specific custom types. Common examples are 'string', 'integer', 'object', and 'array'.
18 The required setting of entryfield shows that a value in "entryfield" is mandatory. The required field is mandatory on all objects - if you create objects inside an array, you must provide a required field for them. It is important to consider which fields should be required and which are optional, as you may get unintended consequences if you do not have required fields set. For example, your code may assume a value for a given input field will be set and fail at runtime.
19 output - Response type "html" returns HTML content. The other valid response type is "json", which returns a JSON endpoint.

If you choose "json", then a "definition" field is also required. The definition field provides a schema for a JSON object.

This example sets a basic property of "my-prop" and marks the property as required in the schema definition.

"output": {
    "responseType": "json",
    "definition": {
      "properties": {
        "my-prop": {
          "type": "string"
        }
      },
      "required": ["my-prop"]
    }
}