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 its script on the page: <script src="{% static 'djust_components/json-viewer.js' %}"></script>. djust ships it; without it the markup renders but does not update in the browser.
Parameters
| Name | Type | Default | Description |
|---|---|---|---|
| data | object | None | JSON-serializable data (dict, list, string, number, etc.) |
| collapsed_depth | int | 2 | depth at which nodes start collapsed (default 2) |
| root_label | str | 'root' | label for root node |
| copy_button | bool | True | show copy-to-clipboard button (default True) |
| custom_class | str | '' | additional CSS classes |
| **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 2150, 2151, 2152, 2153, 2154, 2155, 2156, 2157, 2159, 2160, 2161, 2162, 2164, 2166, 2168, 2169, 2545. Override those rules, or the custom properties they read, in a stylesheet loaded after it. |