Directory

← Back

granite-json-tree-viewer

A JSON tree viewer custom element based on https://github.com/summerstyle/jsonTreeViewer

Author

Contributors

Rating

[ This description is mirrored from README.md at github.com/LostInBrittany/granite-json-tree-viewer on 2019-05-22 ]

Published on webcomponents.org

granite-json-tree-viewer

Based on Polymer 2.x

A JSON tree viewer custom element based on https://github.com/summerstyle/jsonTreeViewer

Usage example

<granite-json-tree-viewer 
    data='{"firstName":"Jonh","lastName":"Smith","phones":["123-45-67","987-65-43"]}'></granite-json-tree-viewer>

Styling

<granite-json-tree-viewer provides the following custom properties and mixins for styling:

Custom property Description Default
--jsontree-bg Mixin applied to the background of the tree {}
--jsontree-tree Mixin applied to the tree {}
--jsontree-child Mixin applied to the child elements {}
--jsontree-label Mixin applied to the JSON labels {}
--jsontree-value Mixin applied to the JSON values {}
--jsontree-value-string Mixin applied to the JSON string values {}
--jsontree-value-number Mixin applied to the JSON number values {}
--jsontree-value-boolean Mixin applied to the JSON boolean values {}
--jsontree-value-null Mixin applied to the JSON null values {}
--jsontree-expand-button Mixin applied to the expand button {}

Install the Polymer-CLI

First, make sure you have the Polymer CLI installed. Then run polymer serve to serve your element locally.

Viewing Your Element

$ polymer serve

Running Tests

$ polymer test

Your application is already set up to be tested via web-component-tester. Run polymer test to run your application's test suite locally.

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Dependencies

  • polymer#Polymer/polymer#^2.0.0
  • jsonTreeViewer#summerstyle/jsonTreeViewer#^0.6.0
  • iron-ajax#PolymerElements/iron-ajax#^2.1.3
  • granite-js-dependencies-grabber#LostInBrittany/granite-js-dependencies-grabber#^1.2.1
Released
2018-05-06
Maturity
IMPORTED
License
Apache License 2.0

Compatibility

Framework
Polymer 2.0+
Browser
Browser Independent
Online