See demo.
This is a simple JSON tree view. It has no external dependecies, just plain JavaScript+CSS, it works well in recent Chrome (also tested in Edge).
Though it is simple, I implemented few capabilities:
- expanding/collapsing tree items,
- copyable: expand items to desired configuration, select and copy — it should be valid JSON (with collapsed items contents omitted),
- filter items using regex on names and values with highlighting of the matching term,
- pretty looks: names and values have distinct visual styles, indexes are shown on the left, expand/collapse button is transparent when not hovered.
This is my first relatively serious JavaScript and CSS code beyond simple scripts. So... expect some shitty unconventional code inside. 🙂
All in all, I wouldn't use it "in production" as is.
I have not found a library that is easily integratable in a standalone HTML page (through a CDN or otherwise), so I ended up implementing my own library with blackjack and hookers. The intention was to make the code very small so you can copy-paste it directly into your HTML. Main idea was to use CSS whenever possible, so that JS code can be simpler (fewer event handlers, etc.).
I do not actively maintain this code.
I would love to accept pull requsts, though I wish someone to take this code, comb it and fix it, and eventually maintain that better version. Please tell me if you did that. 🙂
Feel free to use it as is (no warranties implied though 🙂), or as a template, or a starting point for your own code.