JSONViewer - A User Friendly Data Viewer

JSONViewer - A User Friendly Data Viewer

Cart 55 sales

Visualize JSON files with ease.

The best way to visualize data. JSONViewer is a user friendly, easy to use, lightweight, vanilla JS script written in OOP syle. You can use this script to visualize those ugly JSON text files in an interactive pleasant way

Features overview:

Take a glance at what this item has to offer:

  • Select and highlight items (provides an interactive way of seeing what item is currently selected/hovered)
  • Depth control for rendering (build JSON tree only to a certain depth and expand members only to a certain deph)
  • 4 built-in themes (there are a range of themes you can choose from, both in vertical and horizontal layouts). More themes will be released in the future.
  • Customizable (you can customize how the JSONViewer looks and works to a certain level through options passed to the constructor).
  • Easy to use (just a line of code to turn some ugly JSON to a beautiful representation).
  • Multiple instances on the same page (you can have as many instances as you like on the same page without any conflicts).
  • Extra feature: JSONPane – add more control to your data. JSONPane is a widget that adds more functionality by:
    • containing the JSONViewer inside a scrollable area and providing UI for the JSONViewer
    • buttons to expand and collapse members and their children by one click
    • scrollers indicators – these appear on the top and left of the pane to help navigate when the space in thight
    • breadcrumb like navigation – the path of a selected member is shown in breadcrumbs style and you can navigate upwards (useful for very large, branched JSON files)
    • copy to clipboard button – any selected member or the entire JSON file can be copied to the clipboard as plain JSON text
    • expand to the whole screen button – expand the pane to the entire screen and above everything else
  • Extensive documentation provided (all the code is commented and comes with YUI Documentation files). Design sheets are provided to see what’s the structure of the JSONViewer and JSONPane DOM representation in case you want to fork the code or build your own themes
  • Plain JavaScript written in OOP style (it’s independent of any JS framework out there)
  • Works in all major brosers out there, including Internet Explorer 8 and above. Also works in mobile browsers.

Usage example


Other items

From CodeCanyon

From ActiveDen

AS3 Spectrum Analyzer with 16 Presets
9 Advanced Tiled Backgrounds