Json Viewer
Interactive collapsible JSON tree viewer.
Preview
root
▼{}
"name": "djust"
"version": "0.4.0"
"stable": true
Arguments
json_viewer(data={'name': 'djust', 'version': '0.4.0', 'stable': True})Usage
views.py
python
from djust import LiveView
from djust.components import JsonViewer
class MyView(LiveView):
template_name = "my_template.html"
def mount(self, request, **kwargs):
self.component = JsonViewer(data={'name': 'djust', 'version': '0.4.0', 'stable': True})my_template.html
django
{{ component }}Needs a client hook djust does not ship: dj-hook="JsonViewer". The markup renders, but the interaction described above is yours to add — register window.djust.hooks.JsonViewer = { mounted() { … } } before client.js loads (see the hooks guide).
Parameters
| Name | Type | Default |
|---|---|---|
| data | object | None |
| collapsed_depth | int | 2 |
| root_label | str | 'root' |
| copy_button | bool | True |
| custom_class | str | '' |
| **kwargs | — passed to `Component.__init__`: `name=` identifies the instance in the events it sends, `id=` sets `component.id`, and any other keyword is kept as state | — |
Source & styles
| File | Path | Notes |
|---|---|---|
| module | djust.components.components.json_viewer | Subclass it, or pass custom_class, to change how it renders. |
| css | djust_components/components.css | Defines 17 of this component's classes at line 2096, 2097, 2098, 2099, 2100, 2101, 2102, 2103, 2105, 2106, 2107, 2108, 2110, 2112, 2113, 2442, 2443. Override those rules, or the custom properties they read, in a stylesheet loaded after it. |