---
title: "Component"
date: "2023-10-05T01:59:06+00:00"
summary: "Discover the power of flexible components in web development. Learn how to structure, implement, and customize components with various form fields and nested elements for dynamic, reusable content."
image:
type: "page"
url: "/drupal-starter-kits/add-ons/site-studio/component"
id: "2c446f00-97d1-4e8d-8f13-d33ebcf8dca2"
---

Schema:

    {
      "type": "object",
      "properties": {
        "type": {
          "type": "string",
          "pattern": "^component$"
        },
        "id": {"type" : "string"},
        "data": {
          "type": "object",
          "properties": {
            "uid": {"type" : "string"},
            "title": {"type" : "string"},
            "field_data": {"type":"array"}
          }
        }
      },
      "required": ["id", "type", "data"]
    }

Example output of component with no form fields:

    {
    "type": "component",
    "id": "0e9437e9-8035-4286-9f1d-1ab384a4a4f3",
    "data": {
    "uid": "cpt_test_component_no_values",
    "title": "Test component, no values",
    "field_data": []
    }
    }

Example output of a component with Input form field:

    {
      "type": "component",
      "id": "ae935ce3-753e-4e06-b8e8-4ca026711492",
      "data": {
        "uid": "cpt_test",
        "title": "Test",
        "field_data": [
          {
            "type": "form-field",
            "id": "eaa97716-cc4e-40ea-a995-0769e0fab82f",
            "machine_name": "input",
            "data": {
              "uid": "form-input",
              "title": "Input",
              "value": "This is input test"
            }
          }
        ]
      }
    }

Example output of a component with Input, Plain text area and a Component drop zone:

![ee4d3e29-Screenshot%202023-12-06%20at%2002.16.06.png](https://acquia.widen.net/content/22ed4cdc-d282-4ec4-aaf4-2efb3851570b/web/ee4d3e29-Screenshot%202023-12-06%20at%2002.16.06.png)

Placed on Node layout canvas with form fields filled in and two components placed in it's drop zone - WYSIWYG component and Video component

![7bbbca6b-Screenshot%202023-12-06%20at%2002.19.35.png](https://acquia.widen.net/content/2950388b-822a-41d8-89c6-418ee119c602/web/7bbbca6b-Screenshot%202023-12-06%20at%2002.19.35.png)

This results in the following JSON:API output:

    {
      "type": "component",
      "id": "134b2831-91f8-4be9-88d9-6a6ed3ce1ed8",
      "machine_name": "cpt_component_with_dropzone",
      "data": {
        "title": "Component with dropzone",
        "field_data": [
          {
            "type": "form-field",
            "id": "784b7aee-932d-4b1e-a771-577cd6fe660e",
            "machine_name": "input",
            "data": {
              "uid": "form-input",
              "title": "Input",
              "value": "Input field value"
            }
          },
          {
            "type": "form-field",
            "id": "d462b3b6-f86e-43c8-b675-721bd24e7a29",
            "machine_name": "plain-text-area",
            "data": {
              "uid": "form-textarea",
              "title": "Plain text area",
              "value": "Energistically enable enabled communities after resource-leveling catalysts for change."
          }
        }
      ],
      "children": [
        {
          "type": "container",
          "id": "68fe6ea2-0756-475e-b5c7-606c526a2841",
          "data": [
            {
              "type": "component",
              "id": "43d0ce69-0a5c-414e-af2b-982ec41a75d3",
              "machine_name": "cpt_test_0",
              "data": {
                "title": "WYSIWYG component",
                "field_data": [
                  {
                    "type": "form-field",
                    "id": "0c0eb607-9ad4-48ef-b4f8-fd93162fe2ca",
                    "machine_name": "wysiwyg",
                    "data": {
                      "uid": "form-wysiwyg",
                      "title": "WYSIWYG",
                      "value": {
                        "textFormat": "cohesion",
                        "text": "<p>This is placeholder text. If you are reading this, it is here by mistake and we would appreciate it if you could email us with a link to the page you found it on. This is placeholder text. If you are reading this, it is here by mistake and we would appreciate it if you could email us with a link to the page you found it on. This is placeholder text. If you are reading this, it is here by mistake and we would appreciate it if you could email us with a link to the page you found it on. This is placeholder text. If you are reading this, it is here by mistake and we would appreciate it if you could email us with a link to the page you found it on.</p>"
                      }
                    }
                  }
                ]
              }
            },
            {
              "type": "component",
              "id": "019038c3-009e-4c7f-b909-f77279afe0ed",
              "machine_name": "cpt_video_component",
              "data": {
                "title": "Video component",
                "field_data": [
                  {
                    "type": "form-field",
                    "id": "5467cdf4-f978-46ad-828a-a380b2b095e3",
                    "machine_name": "video-url",
                    "data": {
                      "uid": "form-video-embed",
                      "title": "Video URL",
                      "value": "https://vimeo.com/261819172"
                    }
                  }
                ]
              }
            }
          ]
        }
      ]}
    }