json-viewer-js

renhongl
js Styles
json-viewer-js JS library homepage json-viewer-js JS library on npm Download json-viewer-js JS library

One pretty json viewer by javascript

Version 1.0.8 License MIT
json-viewer-js JS library homepage
json-viewer-js JS library on GitHub
json-viewer-js JS library on npm
Download json-viewer-js JS library
Keywords
jsonviewerview
INSTALL
Type:
Version:
<script src=" https://cdn.jsdelivr.net/npm/json-viewer-js@1.0.8/lib/json-viewer.min.js "></script>
<link href=" https://cdn.jsdelivr.net/npm/json-viewer-js@1.0.8/src/style.min.css " rel="stylesheet">
No default CSS file set by the package author so the URL is guessed. You can always browse all package files to use another one.
Readme Files Statistics Browse CDN

JSON Viewer

One pretty json viewer by javascript

Home page: json-viewer-js

Example

import JsonViewer from './jsonViewer';

const testJson = `{
  "example1": [
      {
          "name": "test01",
          "age": 18,
          "gender": 0,
          "student": true,
          "children": null
      },
      {
          "name": "test02",
          "age": 19,
          "gender": 1,
          "student": true,
          "children": null
      }
  ],
  "example2": {
      "friuts": ["apple", "grape", "jujube", "pear"],
      "transport": ["taxi", "bus", "metro", "plane", "train"]
  }
}`

new JsonViewer({
    container: document.body, 
    data: testJson, 
    theme: 'light', 
    expand: false
});

Output Example

Light theme

Dark theme

API Reference

Name Type Desc Default Required
container DOM Object DOM element null true
data String Json data for render '{}' true
theme String Config for different theme(light or dark) light false
expand Boolean Config for if expand when loaded false false

End

If you like it, please give me a star, thanks!

Powered for: My JSON Editor