← Back

granite-json-tree-viewer

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

Based on Polymer 2.x

Usage example

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

<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	`{}`

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

$ polymer serve

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

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

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