Feature request: JSON viewer/editor element

[barseghyanartur]

Description

Given a valid JSON, the JSON viewer/editor element renders it nicely (highlighting keys, breaking long lines, copy raw functionality, etc).

Suggested solution

None.

Alternative

No response

Additional context

No response

[mscolnick]

For editing, you can use mo.ui.code_editor(json_string, language='json'). This gives you a code editor with key's highlighted and collapsible.

For just viewing, you can return a dictionary in the last element of the cell, or use mo.tree(dictionary)

Here the examples on our playground

[barseghyanartur]

Wow! Amazing. The mo.tree is exactly what I needed. Thanks so much!

[barseghyanartur]

@mscolnick:

I thoroughly tested the tree component and I admit it's a wonderful tool. I've tried the code editor with both json and javascript options. The tree component comes very close to what I want, but still it's not a JSON tree. For instance, when you copy it, you get a Python dict, not a JSON. I believe JSON viewer component would be a good addition to the existing components list.

[mscolnick]

We can add mo.json() as well which will look similar but the copy and rendering will be json instead of python values