JSONEditor#

This component is also available in the classic reference.

The JSONEditor provides a visual editor for JSON-serializable datastructures, e.g. Python dictionaries and lists, with functionality for different editing modes, inserting objects and validation using JSON Schema.

Use pn.ui.JSONEditor to create this component.

API#

.. py:class:: JSONEditor(**params: ~typing.Any) :module: panel.widgets.misc

The JSONEditor provides a visual editor for JSON-serializable datastructures, e.g. Python dictionaries and lists, with functionality for different editing modes, inserting objects and validation using JSON Schema.

Reference: https://panel.holoviz.org/reference/widgets/JSONEditor.html

:Example:

JSONEditor(value={ … ‘dict’ : {‘key’: ‘value’}, … ‘float’ : 3.14, … ‘int’ : 1, … ‘list’ : [1, 2, 3], … ‘string’: ‘A string’, … }, mode=’code’)

:Attributes:

   **schema**
       ..

.. !! processed by numpydoc !!

Parameter Definitions

Parameters inherited from:

   :class:`panel.widgets.base.WidgetBase`: label

   :class:`panel.viewable.Layoutable`: align, aspect_ratio, css_classes, design, min_width, min_height, max_width, max_height, styles, stylesheets, tags, width_policy, height_policy, sizing_mode, visible

   :class:`panel.viewable.Viewable`: loading

   :class:`panel.widgets.base.Widget`: height, margin, width, disabled

value = Parameter(default={}, label='Value')

    JSON data to be edited.

menu = Boolean(default=True, label='Menu')

    Adds main menu bar - Contains format, sort, transform, search
    etc. functionality. true by default. Applicable in all types
    of mode.

mode = Selector(default='tree', label='Mode', names={}, objects=['tree', 'view', 'form', 'text', 'preview'])

    Sets the editor mode. In 'view' mode, the data and
    datastructure is read-only. In 'form' mode, only the value can
    be changed, the data structure is read-only. Mode 'code'
    requires the Ace editor to be loaded on the page. Mode 'text'
    shows the data as plain text. The 'preview' mode can handle
    large JSON documents up to 500 MiB. It shows a preview of the
    data, and allows to transform, sort, filter, format, or
    compact the data.

search = Boolean(default=True, label='Search')

    Enables a search box in the upper right corner of the
    JSONEditor. true by default. Only applicable when mode is
    'tree', 'view', or 'form'.

selection = List(bounds=(0, None), default=[], item_type=<class 'str'>, label='Selection')

    Current selection.

schema = Dict(allow_None=True, class_=<class 'dict'>, label='Schema')

    Validate the JSON object against a JSON schema. A JSON schema
    describes the structure that a JSON object must have, like
    required properties or the type that a value must have.

    See http://json-schema.org/ for more information.

templates = List(bounds=(0, None), default=[], item_type=<class 'dict'>, label='Templates')

    Array of templates that will appear in the context menu, Each
    template is a json object precreated that can be added as a
    object value to any node in your document.