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

[ 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.

Install

Link to this version
ImportedReleased 06 May 2018Apache License 2.0
Framework Support
Polymer 2.0+
Browser Independent
Install with
bower install --save LostInBrittany/granite-json-tree-viewer"#1.1.0"
Run the above Bower command in your project folder. If you have any issues installing, please contact the author.
Release notes - Version 1.1.0

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