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

ffd206c Β· Apr 8, 2022

History

54 Commits
Apr 8, 2022
Apr 8, 2022
Feb 2, 2022
Apr 8, 2022
Apr 8, 2022
Feb 2, 2022
Apr 8, 2022
Apr 8, 2022
Apr 8, 2022

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