anyjsonviewer

An anywidget wrapper around @textea/json-viewer, giving you an interactive, collapsible JSON viewer inside Jupyter, JupyterLab, VS Code, Marimo, or any other frontend that supports Jupyter widgets.

Installation

pip install anyjsonviewer

Or with uv:

uv add anyjsonviewer

Usage

from anyjsonviewer import JsonViewer

JsonViewer(
    data={
        "name": "anyjsonviewer",
        "tags": ["json", "viewer", "anywidget"],
        "nested": {"count": 3, "ok": True},
    },
    theme="dark",
)

Traits

All props are synced traits, so you can update them from Python and the view re-renders live:

When editable, enable_add, or enable_delete are on, edits round-trip through the data trait — change something in the UI and the new value becomes visible from Python.

w = JsonViewer(data={"a": 1})
w.theme = "dark"         # live update
w.data = {"a": 1, "b": 2}

Using with Marimo

Marimo's mo.ui.anywidget() wrapper exposes .value as a dict of every synced trait, so to get just the JSON you'd write wrapper.value["data"]. You can also keep a reference to the underlying widget and use it directly:

viewer = JsonViewer(data=my_data)
ui = mo.ui.anywidget(viewer)
ui                  # render in a cell
viewer.data         # ← just the JSON, same as in Jupyter
ui.value["data"]    # ← Marimo wrapper-native equivalent

Development

The widget's JavaScript lives in js/index.jsx and is bundled with esbuild into src/anyjsonviewer/static/widget.js.

# Install Python deps
uv sync

# Install JS deps
npm install

# One-off build
npm run build

# Watch mode (pair with ANYWIDGET_HMR=1 in your notebook)
npm run dev

Building the wheel automatically runs the JS build via a custom Hatch hook:

uv build

To skip the JS build step (e.g. in CI where you've already built the bundle), set ANYJSONVIEWER_SKIP_JS_BUILD=1.

License

MIT