https://github.com/wutility/json-viewer

🔥 Ultra Fast and lightweight Json Viewer and formatter <3KB with 0 Dependencies
https://github.com/wutility/json-viewer

browser formatter json json-formatter json-viewer

Last synced: 4 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/wutility/json-viewer
• Owner: wutility
• License: apache-2.0
• Created: 2019-12-11T19:16:41.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-20T19:52:34.000Z (almost 2 years ago)
• Last Synced: 2024-10-11T21:58:55.630Z (about 1 month ago)
• Topics: browser, formatter, json, json-formatter, json-viewer
• Language: JavaScript
• Homepage: https://wutility.github.io/json-viewer
• Size: 1.07 MB
• Stars: 11
• Watchers: 3
• Forks: 3
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        










  

  

  

  

  



### Demos  

[PLayground](https://wutility.github.io/json-viewer)  

[Demo Codepen](https://codepen.io/haikelfazzani-the-bold/pen/bGWKEMP)  

```bash

$ npm i jsnview

# or

$ yarn add jsnview

```

## Usage

```js

import jsnview from 'jsnview';

import 'jsnview/build/index.css';

```

Or include it via jsDelivr CDN (UMD):

```html

```

### Methods && Examples

- **jsnview(data: Object, options: Object): [HTMLElement]**  

```js

// 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

- [Haikel Fazzani](https://github.com/haikelfazzani)

## License

Apache License 2.0