JSON editor inside panelini

Source: examples/panels/jsoneditor/jsoneditor_panelini_min.py Test: tests/panels/jsoneditor/examples/test_jsoneditor_panelini_min.py

A JSON-Schema-driven form hosted inside a Panelini card.

The code

import panel as pn

from panelini import Panelini

from .jsoneditor_panel_min import App as JsonEditorPanel

jsoneditor_panel = JsonEditorPanel()

app = Panelini(title="📝 JSON Editor Demo")
app.main_set(objects=[
    pn.Card(
        title="JSON Editor",
        objects=[jsoneditor_panel],
        max_height=800,
    ),
])
app.servable()

JsonEditorPanel is a thin AnyWidgetComponent wrapper around the json-editor JS library. The form is rendered client-side from a JSON Schema and keeps its value in sync with the Python side through param bindings.

What gets rendered

The App class in jsoneditor_panel_min.py owns a JsonEditor instance plus a Panel Save button. The schema declares a single testxy string field with a custom title-update side-effect on save.

        graph LR
    schema([JSON Schema]) --> je[JsonEditor]
    je -- "value sync" --> py[Python]
    py -- "set_value / set_schema" --> je
    save([Save button]) --> py

How the test exercises it

The Playwright test:

  1. Imports app and jsoneditor_panel from the example module (collection-time import — panelini’s background images are disabled in tests/conftest.py so this is fast).

  2. Serves the app on a random port.

  3. Types into the #root\[testxy\] input, clicks Save, and asserts both the Python-side value and the rendered title updated.

If the example breaks, the test fails — so the example is guaranteed to keep working.

See also