Skip to content

🔥 Ultra Fast and lightweight Json Viewer and formatter <3KB with 0 Dependencies

License

Notifications You must be signed in to change notification settings

wutility/json-viewer

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

54 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

json viewer


json viewer json viewer json viewer json viewer json viewer

Demos

PLayground
Demo Codepen

$ npm i jsnview
# or
$ yarn add jsnview

Usage

import jsnview from 'jsnview';
import 'jsnview/build/index.css';

Or include it via jsDelivr CDN (UMD):

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jsnview/build/index.css" />
<script src="https://cdn.jsdelivr.net/npm/jsnview/build/index.min.js"></script>
<!-- Access via global object : window.jsnview -->

Methods && Examples

  • jsnview(data: Object, options: Object): [HTMLElement]
// Default options
const options = {
  showLen: false,
  showType: false,
  showBrackets: true,
  showFoldmarker: false,
  colors: { boolean: '#ff2929', null: '#ff2929', string: '#690', number: '#905', float: '#002f99' }
}

let data = { name: 'Mike', age: 22 }; 
const treeView = jsnview(data, options); // returns HTMLElement
document.body.appendChild(treeView);

Notes

  • All pull requests are welcome, feel free.

Author

License

Apache License 2.0