Dash native JSON Renderer / Viewer

Dash Python
1

Hi Dash community,

I am building a dashboard that contains several plotly charts but I also need to display some raw JSON documents.

I do not need to allow the modification of the JSON data but I would like to have some styling and collapsing.

I was looking for a native JSON viewer/render in the Dash documentation but did not find one.

The only options that came to my mind are using the mark dcc.markdown or html.Code components but they would only partially fit my needs.

Are there any recommended approaches on how to render JSON documents in dash ?

Thanks a lot in advance for any help!

2

you can try dash_renderjson from here

import dash_renderjson
import dash
import dash_daq as daq
from dash.dependencies import Input, Output
import dash_html_components as html

app = dash.Dash(__name__)


app.layout = html.Div([daq.ToggleSwitch(id="my-toggle-switch", value=False), html.Div(id="output")])


@app.callback(Output("output", "children"), [Input("my-toggle-switch", "value")])
def display_output(value):
    if value:
        data = {"a": 1, "b": [1, 2, 3, {"c": 4}]}
        theme = {
            "scheme": "monokai",
            "author": "wimer hazenberg (http://www.monokai.nl)",
            "base00": "#272822",
            "base01": "#383830",
            "base02": "#49483e",
            "base03": "#75715e",
            "base04": "#a59f85",
            "base05": "#f8f8f2",
            "base06": "#f5f4f1",
            "base07": "#f9f8f5",
            "base08": "#f92672",
            "base09": "#fd971f",
            "base0A": "#f4bf75",
            "base0B": "#a6e22e",
            "base0C": "#a1efe4",
            "base0D": "#66d9ef",
            "base0E": "#ae81ff",
            "base0F": "#cc6633",
        }
        return dash_renderjson.DashRenderjson(id="input", data=data, max_depth=-1, theme=theme, invert_theme=True)


if __name__ == "__main__":
    app.run_server(debug=True)
3 Likes
3

Hey @probhakar , thanks for your answer.
Can you make this JSON editable?

2 Likes