Two JSON editors side by side¶

panelini form editor and panel tree editor on one page

Source: examples/panels/jsoneditor/jsoneditor_both_min.py Test: tests/panels/jsoneditor/examples/test_jsoneditor_both_min.py

Panelini’s JsonEditor (a schema-driven form built on json-editor/json-editor) and Panel’s own pn.widgets.JSONEditor (a tree editor built on josdejong/jsoneditor) live on the same page.

Both libraries expose a global JSONEditor name, yet they coexist here without clobbering each other. The form editor renders from a JSON Schema, while the tree editor renders from a plain value dict.

The code¶

import panel as pn

from panelini.panels.jsoneditor import JsonEditor

pn.extension("jsoneditor")

form_editor = JsonEditor(
    options={
        "schema": {
            "title": "Form Editor",
            "required": ["name"],
            "properties": {
                "name": {"type": "string"},
                "value": {"type": "number"},
            },
        },
    },
    max_height=500,
)

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

app = pn.Row(
    pn.Card(form_editor, title="Panelini JsonEditor (Form)"),
    pn.Card(tree_editor, title="Panel JSONEditor (Tree)"),
)

Run it live¶

This example runs entirely in your browser via Pyodide. The first load downloads packages, so give it a few seconds.

Open fullscreen

See also¶

JsonEditor