Improve options for compact read-only JSON display.
Right now our options for JSON display for small read only snippets is a bit lacking.
-
You can pretty print the json and then style yourself in a div -- this lacks coloring, consistency and requires some boilerplate.
-
You can use a JSONEditor in
readonlymode. This isn't terrible, but it is quite bulky, with a very large left gutter that does not go away even if you turn off line numbers
If we would be willing to do without support for internal coloring (e.g. different colors for keys vs. values vs. braces etc) we could expose a simple component that could take care of:
- Rendering an outer div, with layout support + internal scrolling as needed
- Accepted either a JSON string or suitable JS object, then (re)parsed and pretty-printed for display
- Styled contents with monospace font
If we want the syntax highlighting - or other features like the inline search / copy button - we could push further with codemirror customization to see if we can knock out the gutter. But as you say, that might feel a bit heavyweight anyway in certain circumstances. Happy to discuss.