import panel as pn
import param

pn.extension('ace', 'jsoneditor')

json_editor = pn.widgets.JSONEditor(value={
    'dict'  : {'key': 'value'},
    'float' : 3.14,
    'int'   : 1,
    'list'  : [1, 2, 3],
    'string': 'A string',
}, width=400)

json_editor

pn.FlexBox(*(pn.Column(f'### Mode: {mode}', json_editor.clone(mode=mode)) for mode in pn.widgets.JSONEditor.param.mode.objects))

pn.widgets.JSONEditor(
    schema={
      "title": "Person",
      "type": "object",
      "properties": {
        "firstName": {
          "type": "string",
          "description": "The person's first name."
        },
        "lastName": {
          "type": "string",
          "description": "The person's last name."
        },
        "age": {
          "description": "Age in years which must be equal to or greater than zero.",
          "type": "integer",
          "minimum": 0
        }
      }
    },
    value={
        'firstName': 2,
        'lastName': 'Smith',
        'age': 13.5
    }, height=500, width=400
)

pn.Row(json_editor.controls(jslink=True), json_editor)