---
title: "WYSIWYG"
date: "2023-10-05T01:44:06+00:00"
summary: "Discover how to implement WYSIWYG editors in your forms with our comprehensive guide. Learn about JSON schema, see real-world examples, and master the integration of rich text fields in your web applications."
image:
type: "page"
url: "/drupal-starter-kits/add-ons/site-studio/wysiwyg"
id: "3f56dd7e-3537-4de4-ad8e-1c0767651b97"
---

Schema:

    {
      "type": "object",
      "properties": {
        "type": {"type": "string", "pattern": "^form-field$"},
        "id": {"type": "string", "pattern": "^[0-9a-f]{8}-([0-9a-f]{4}-){3}[0-9a-f]{12}$"},
        "machine_name": {"type": "string"},
        "data": {
          "type": "object",
          "properties": {
            "uid": {"type": "string","pattern": "^form-wysiwyg"},
            "title": {"type": "string"},
            "value": {
              "type": "object",
              "properties": {
                "textFormat": {"type":"string"},
                "text": {"type":"string"}
              }
            }
          }
        }
      },
      "required": ["id", "type", "data"]
    }
    

Example output:

Given "WYSIWYG" form element on a component set up like so

![e628a951-Screenshot%202023-12-04%20at%2000.48.07.png](https://acquia.widen.net/content/e7371e01-71ac-4692-a657-c064ed3b4fc2/web/e628a951-Screenshot%202023-12-04%20at%2000.48.07.png)

And used on Node layout canvas like so

![7a71fd45-Screenshot%202023-12-06%20at%2000.44.45.png](https://acquia.widen.net/content/9fbab939-aeeb-4461-801b-6c882037ad54/web/7a71fd45-Screenshot%202023-12-06%20at%2000.44.45.png)

JSON:API output for this form field will be this:

    {
      "type": "form-field",
      "id": "5fc743c3-6b31-4a40-bd05-24acfb4ca9ba",
      "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>"
        }
      }
    }