hoist-react icon indicating copy to clipboard operation
hoist-react copied to clipboard

Improve options for compact read-only JSON display.

Open lbwexler opened this issue 2 years ago • 1 comments

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 readonly mode. 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

lbwexler avatar Oct 17 '23 14:10 lbwexler

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.

amcclain avatar Oct 26 '23 00:10 amcclain