Selective Editor Example

Input data (JSON)

{
  "title": "The stuff dreams are made of.",
  "description": "Fluffy stuff. Wispy stuff. Flying stuff. Falling stuff. Weird stuff.",
  "body": "A field of sparkling fluffy _bunnies_ with horns.",
  "areCloudsToday": true,
  "lookedForCloudsAt": "2021-02-03T06:21",
  "cloudViewingDay": "2021-05-18",
  "bestViewingTime": "09:38",
  "cloudsInTheSky": 100,
  "skyColor": "#006beb",
  "storm": {
    "meta": "Do not change values that are not part of the fields.",
    "chasers": [
      "Bill Kessler",
      "Cindy Dewees",
      "Gregg Potter",
      "Laura Dean"
    ]
  },
  "extra": {
    "title": "Something more",
    "description": "Hidden by default."
  },
  "varied": {
    "title": "Varied life",
    "description": "Fields are varied depending on choice.",
    "_variant": "simple"
  },
  "style": "fog",
  "skyColors": [],
  "clouds": [
    {
      "title": "Cirrus fibratus radiatus",
      "description": "They look like tire tracks."
    },
    {
      "title": "Stratospheric nacreous",
      "description": "Crazy cool textured clouds."
    },
    {
      "title": "Altocumulus floccus",
      "description": "Cotton everywhere!"
    },
    {
      "title": "Fluctus",
      "description": "Waves in the sky!"
    }
  ]
}

Configuration (JSON)

{
  "fields": [
    {
      "type": "text",
      "key": "title",
      "label": "Title",
      "help": "Title for the data."
    },
    {
      "type": "textarea",
      "key": "description",
      "label": "Description",
      "help": "Description for the data."
    },
    {
      "type": "checkbox",
      "key": "areCloudsToday",
      "label": "Are there clouds today?"
    },
    {
      "type": "datetime",
      "key": "lookedForCloudsAt",
      "label": "Looked for clouds on this day"
    },
    {
      "type": "date",
      "key": "cloudViewingDay",
      "label": "Cloud viewing day"
    },
    {
      "type": "time",
      "key": "bestViewingTime",
      "label": "Best cloud viewing time"
    },
    {
      "type": "color",
      "key": "skyColor",
      "label": "Current color of the sky"
    },
    {
      "type": "number",
      "key": "cloudsInTheSky",
      "label": "How many clouds are in the sky?",
      "min": "0",
      "max": 10000
    },
    {
      "type": "list",
      "key": "storm.chasers",
      "label": "Storm chasers",
      "fields": [
        {
          "type": "text",
          "validation": [{
            "type": "length",
            "max": {
              "message": "Cannot be more than 50 characters.",
              "value": 50
            }
          }]
        }
      ]
    },
    {
      "type": "list",
      "key": "clouds",
      "label": "Clouds",
      "preview_field": "title",
      "help": "List of cloud information.",
      "fields": [
        {
          "type": "text",
          "key": "title",
          "label": "Title"
        },
        {
          "type": "textarea",
          "key": "description",
          "label": "Description"
        }
      ]
    },
    {
      "type": "radio",
      "key": "style",
      "label": "Cloud style",
      "help": "Cloud style.",
      "options": [
        {
          "label": "Fog",
          "value": "fog"
        },
        {
          "label": "Low clouds",
          "value": "low"
        },
        {
          "label": "High clouds",
          "value": "high"
        }
      ]
    },
    {
      "type": "checkboxMulti",
      "key": "skyColors",
      "label": "Sky colors",
      "help": "Colors in the sky right now.",
      "options": [
        {
          "label": "Cloudy sky",
          "value": "cloudy",
          "color": "#dde5f2"
        },
        {
          "label": "Blue sky",
          "value": "blue",
          "color": "#006beb"
        },
        {
          "label": "Night sky",
          "value": "night",
          "color": "#131862"
        },
        {
          "label": "Stormy sky",
          "value": "stormy",
          "gradient": {
            "colors": [
              "#57728f",
              "#2e5073",
              "#24405c"
            ],
            "isSmooth": true
          }
        },
        {
          "label": "Sunset sky",
          "value": "sunset",
          "gradient": {
            "colors": [
              "#e85566",
              "#f47b5a",
              "#f9ac5e"
            ],
            "orientation": "slope"
          }
        }
      ]
    },
    {
      "type": "group",
      "key": "extra",
      "label": "Extra Group",
      "help": "Extra information.",
      "preview_fields": ["title"],
      "fields": [
        {
          "type": "text",
          "key": "title",
          "label": "Title"
        },
        {
          "type": "textarea",
          "key": "description",
          "label": "Description"
        }
      ]
    },
    {
      "type": "variant",
      "key": "varied",
      "label": "Variant",
      "help": "Variant fields change based on variant.",
      "default": "simple",
      "variants": {
        "simple":{
          "label": "Simple",
          "fields": [
            {
              "type": "text",
              "key": "title",
              "label": "Title"
            }
          ]
        },
        "multi":{
          "label": "Multiple",
          "fields": [
            {
              "type": "text",
              "key": "title",
              "label": "Title"
            },
            {
              "type": "textarea",
              "key": "description",
              "label": "Description"
            }
          ]
        }
      }
    }
  ]
}

Edited value

Is clean? True

Is valid? True