xtal-json-editor
Vanilla-ish web component wrapper around the JSONEditor library
<xtal-json-editor>
Vanilla web component wrapper around josdejong's awesome, most excellent JSON Editor api, which can be found at https://github.com/josdejong/jsoneditor
Although the web component does not depend on Polymer, it can work with its binding. The output of the editor can either be text, or JSON, as specified by the as attribute:
<div>Input:</div>
<xtal-json-editor id="firstEditor" options="{}" as="json"></xtal-json-editor>
<p-d on="edited-result-changed" to="xtal-json-editor{input}"></p-d>
<div>Output:</div>
<xtal-json-editor options="{}"></xtal-json-editor>
The markup above is using the pass down element (p-d) to bind the two instances together, but you can also use Polymer or custom event handling.
Install the Polymer-CLI
First, make sure you have the Polymer CLI and npm (packaged with Node.js) installed. Run npm install
to install your element's dependencies, then run polymer serve
to serve your element locally.
Viewing Your Element
$ polymer serve
Running Tests
WIP
Links
Compatibility
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
- xtal-element#0.0.58
- trans-render#0.0.110
- Released
- 2019-04-28
- Maturity
- IMPORTED
- License
- MIT License
Compatibility
- Framework
- Polymer 3.0+ in 0.0.24
- Polymer 2.0+ in 0.0.9
- Browser
- Browser Independent
xtal-json-editor - Vaadin Add-on Directory
Vanilla-ish web component wrapper around the JSONEditor libraryDocumentation
License
Online Demo
View on NPM
View on GitHub
GitHub Homepage
xtal-json-editor version 0.0.0
### Dependencies
Polymer/polymer#^2.0.0
* bahrus/poly-prep#^0.0.5
xtal-json-editor version 0.0.1
### Dependencies
Polymer/polymer#^2.0.0
* bahrus/poly-prep#^0.0.5
xtal-json-editor version 0.0.2
### Dependencies
Polymer/polymer#^2.0.0
* bahrus/poly-prep#^0.0.7
xtal-json-editor version 0.0.3
### Dependencies
Polymer/polymer#^2.0.0
* bahrus/poly-prep#^0.0.12
xtal-json-editor version 0.0.4
### Dependencies
Polymer/polymer#^2.0.0
* bahrus/poly-prep#^0.0.12
xtal-json-editor version 0.0.5
### Dependencies
Polymer/polymer#^2.0.0
* bahrus/poly-prep#^0.0.12
xtal-json-editor version 0.0.6
### Dependencies
Polymer/polymer#^2.0.0
xtal-json-editor version 0.0.7
### Dependencies
Polymer/polymer#^2.0.0
xtal-json-editor version 0.0.10
### Dependencies
* @types/jsoneditor#^5.5.2
* @bower_components/accessibility-developer-tools#GoogleChrome/accessibility-developer-tools#^2.10.0
* @bower_components/async#caolan/async#^1.5.0
* @bower_components/chai#chaijs/chai#^3.2.0
* @bower_components/font-roboto#PolymerElements/font-roboto#^1
* @bower_components/iron-demo-helpers#PolymerElements/iron-demo-helpers#^2.0.0
* @bower_components/iron-flex-layout#polymerelements/iron-flex-layout#1 - 2
* @bower_components/iron-location#PolymerElements/iron-location#1 - 2
* @bower_components/json-merge#bahrus/json-merge#^0.1.0
* @bower_components/lodash#lodash/lodash#^3.7.0
* @bower_components/marked#chjj/marked#~0.3.6
* @bower_components/marked-element#polymerelements/marked-element#1 - 2
* @bower_components/mocha#mochajs/mocha#^3.1.2
* @bower_components/polymer#Polymer/polymer#^2.0.0
* @bower_components/prism#LeaVerou/prism#*
* @bower_components/prism-element#PolymerElements/prism-element#1 - 2
* @bower_components/shadycss#webcomponents/shadycss#^v1.0.0
* @bower_components/sinon-chai#domenic/sinon-chai#^2.7.0
* @bower_components/sinonjs#blittle/sinon.js#^1.14.1
* @bower_components/stacky#PolymerLabs/stacky#^1.3.0
* @bower_components/test-fixture#PolymerElements/test-fixture#^3.0.0
* @bower_components/web-component-tester#Polymer/web-component-tester#^6.0.0
* @bower_components/webcomponentsjs#webcomponents/webcomponentsjs#^1.0.0
* @bower_components/xtal-json-editor#bahrus/xtal-json-editor#^0.0.6
xtal-json-editor version 0.0.11
### Dependencies
* @types/jsoneditor#^5.5.2
* @bower_components/accessibility-developer-tools#GoogleChrome/accessibility-developer-tools#^2.10.0
* @bower_components/async#caolan/async#^1.5.0
* @bower_components/chai#chaijs/chai#^3.2.0
* @bower_components/font-roboto#PolymerElements/font-roboto#^1
* @bower_components/iron-demo-helpers#PolymerElements/iron-demo-helpers#^2.0.0
* @bower_components/iron-flex-layout#polymerelements/iron-flex-layout#1 - 2
* @bower_components/iron-location#PolymerElements/iron-location#1 - 2
* @bower_components/json-merge#bahrus/json-merge#^0.1.0
* @bower_components/lodash#lodash/lodash#^3.7.0
* @bower_components/marked#chjj/marked#~0.3.6
* @bower_components/marked-element#polymerelements/marked-element#1 - 2
* @bower_components/mocha#mochajs/mocha#^3.1.2
* @bower_components/polymer#Polymer/polymer#^2.0.0
* @bower_components/prism#LeaVerou/prism#*
* @bower_components/prism-element#PolymerElements/prism-element#1 - 2
* @bower_components/shadycss#webcomponents/shadycss#^v1.0.0
* @bower_components/sinon-chai#domenic/sinon-chai#^2.7.0
* @bower_components/sinonjs#blittle/sinon.js#^1.14.1
* @bower_components/stacky#PolymerLabs/stacky#^1.3.0
* @bower_components/test-fixture#PolymerElements/test-fixture#^3.0.0
* @bower_components/web-component-tester#Polymer/web-component-tester#^6.0.0
* @bower_components/webcomponentsjs#webcomponents/webcomponentsjs#^1.0.0
* @bower_components/xtal-json-editor#bahrus/xtal-json-editor#^0.0.6
xtal-json-editor version 0.0.12
### Dependencies
* @types/jsoneditor#^5.5.2
* @bower_components/accessibility-developer-tools#GoogleChrome/accessibility-developer-tools#^2.10.0
* @bower_components/async#caolan/async#^1.5.0
* @bower_components/chai#chaijs/chai#^3.2.0
* @bower_components/font-roboto#PolymerElements/font-roboto#^1
* @bower_components/iron-demo-helpers#PolymerElements/iron-demo-helpers#^2.0.0
* @bower_components/iron-flex-layout#polymerelements/iron-flex-layout#1 - 2
* @bower_components/iron-location#PolymerElements/iron-location#1 - 2
* @bower_components/json-merge#bahrus/json-merge#^0.1.0
* @bower_components/lodash#lodash/lodash#^3.7.0
* @bower_components/marked#chjj/marked#~0.3.6
* @bower_components/marked-element#polymerelements/marked-element#1 - 2
* @bower_components/mocha#mochajs/mocha#^3.1.2
* @bower_components/polymer#Polymer/polymer#^2.0.0
* @bower_components/prism#LeaVerou/prism#*
* @bower_components/prism-element#PolymerElements/prism-element#1 - 2
* @bower_components/shadycss#webcomponents/shadycss#^v1.0.0
* @bower_components/sinon-chai#domenic/sinon-chai#^2.7.0
* @bower_components/sinonjs#blittle/sinon.js#^1.14.1
* @bower_components/stacky#PolymerLabs/stacky#^1.3.0
* @bower_components/test-fixture#PolymerElements/test-fixture#^3.0.0
* @bower_components/web-component-tester#Polymer/web-component-tester#^6.0.0
* @bower_components/webcomponentsjs#webcomponents/webcomponentsjs#^1.0.0
* @bower_components/xtal-json-editor#bahrus/xtal-json-editor#^0.0.6
xtal-json-editor version 0.0.8
### Dependencies
* @types/jsoneditor#^5.5.2
* @bower_components/accessibility-developer-tools#GoogleChrome/accessibility-developer-tools#^2.10.0
* @bower_components/async#caolan/async#^1.5.0
* @bower_components/chai#chaijs/chai#^3.2.0
* @bower_components/font-roboto#PolymerElements/font-roboto#^1
* @bower_components/iron-demo-helpers#PolymerElements/iron-demo-helpers#^2.0.0
* @bower_components/iron-flex-layout#polymerelements/iron-flex-layout#1 - 2
* @bower_components/iron-location#PolymerElements/iron-location#1 - 2
* @bower_components/json-merge#bahrus/json-merge#^0.1.0
* @bower_components/lodash#lodash/lodash#^3.7.0
* @bower_components/marked#chjj/marked#~0.3.6
* @bower_components/marked-element#polymerelements/marked-element#1 - 2
* @bower_components/mocha#mochajs/mocha#^3.1.2
* @bower_components/polymer#Polymer/polymer#^2.0.0
* @bower_components/prism#LeaVerou/prism#*
* @bower_components/prism-element#PolymerElements/prism-element#1 - 2
* @bower_components/shadycss#webcomponents/shadycss#^v1.0.0
* @bower_components/sinon-chai#domenic/sinon-chai#^2.7.0
* @bower_components/sinonjs#blittle/sinon.js#^1.14.1
* @bower_components/stacky#PolymerLabs/stacky#^1.3.0
* @bower_components/test-fixture#PolymerElements/test-fixture#^3.0.0
* @bower_components/web-component-tester#Polymer/web-component-tester#^6.0.0
* @bower_components/webcomponentsjs#webcomponents/webcomponentsjs#^1.0.0
* @bower_components/xtal-json-editor#bahrus/xtal-json-editor#^0.0.6
xtal-json-editor version 0.0.9
### Dependencies
Polymer/polymer#^2.0.0
* bahrus/json-merge#^0.1.0
xtal-json-editor version 0.0.13
### Dependencies
* @types/jsoneditor#^5.5.2
* @bower_components/accessibility-developer-tools#GoogleChrome/accessibility-developer-tools#^2.10.0
* @bower_components/async#caolan/async#^1.5.0
* @bower_components/chai#chaijs/chai#^3.2.0
* @bower_components/font-roboto#PolymerElements/font-roboto#^1
* @bower_components/iron-demo-helpers#PolymerElements/iron-demo-helpers#^2.0.0
* @bower_components/iron-flex-layout#polymerelements/iron-flex-layout#1 - 2
* @bower_components/iron-location#PolymerElements/iron-location#1 - 2
* @bower_components/json-merge#bahrus/json-merge#^0.1.0
* @bower_components/lodash#lodash/lodash#^3.7.0
* @bower_components/marked#chjj/marked#~0.3.6
* @bower_components/marked-element#polymerelements/marked-element#1 - 2
* @bower_components/mocha#mochajs/mocha#^3.1.2
* @bower_components/polymer#Polymer/polymer#^2.0.0
* @bower_components/prism#LeaVerou/prism#*
* @bower_components/prism-element#PolymerElements/prism-element#1 - 2
* @bower_components/shadycss#webcomponents/shadycss#^v1.0.0
* @bower_components/sinon-chai#domenic/sinon-chai#^2.7.0
* @bower_components/sinonjs#blittle/sinon.js#^1.14.1
* @bower_components/stacky#PolymerLabs/stacky#^1.3.0
* @bower_components/test-fixture#PolymerElements/test-fixture#^3.0.0
* @bower_components/web-component-tester#Polymer/web-component-tester#^6.0.0
* @bower_components/webcomponentsjs#webcomponents/webcomponentsjs#^1.0.0
* @bower_components/xtal-json-editor#bahrus/xtal-json-editor#^0.0.6
xtal-json-editor version 0.0.14
### Dependencies
* @types/jsoneditor#^5.5.2
* @bower_components/accessibility-developer-tools#GoogleChrome/accessibility-developer-tools#^2.10.0
* @bower_components/async#caolan/async#^1.5.0
* @bower_components/chai#chaijs/chai#^3.2.0
* @bower_components/font-roboto#PolymerElements/font-roboto#^1
* @bower_components/iron-demo-helpers#PolymerElements/iron-demo-helpers#^2.0.0
* @bower_components/iron-flex-layout#polymerelements/iron-flex-layout#1 - 2
* @bower_components/iron-location#PolymerElements/iron-location#1 - 2
* @bower_components/json-merge#bahrus/json-merge#^0.1.0
* @bower_components/lodash#lodash/lodash#^3.7.0
* @bower_components/marked#chjj/marked#~0.3.6
* @bower_components/marked-element#polymerelements/marked-element#1 - 2
* @bower_components/mocha#mochajs/mocha#^3.1.2
* @bower_components/polymer#Polymer/polymer#^2.0.0
* @bower_components/prism#LeaVerou/prism#*
* @bower_components/prism-element#PolymerElements/prism-element#1 - 2
* @bower_components/shadycss#webcomponents/shadycss#^v1.0.0
* @bower_components/sinon-chai#domenic/sinon-chai#^2.7.0
* @bower_components/sinonjs#blittle/sinon.js#^1.14.1
* @bower_components/stacky#PolymerLabs/stacky#^1.3.0
* @bower_components/test-fixture#PolymerElements/test-fixture#^3.0.0
* @bower_components/web-component-tester#Polymer/web-component-tester#^6.0.0
* @bower_components/webcomponentsjs#webcomponents/webcomponentsjs#^1.0.0
* @bower_components/xtal-json-editor#bahrus/xtal-json-editor#^0.0.6
xtal-json-editor version 0.0.15
### Dependencies
* @types/jsoneditor#^5.5.2
* @bower_components/accessibility-developer-tools#GoogleChrome/accessibility-developer-tools#^2.10.0
* @bower_components/async#caolan/async#^1.5.0
* @bower_components/chai#chaijs/chai#^3.2.0
* @bower_components/font-roboto#PolymerElements/font-roboto#^1
* @bower_components/iron-demo-helpers#PolymerElements/iron-demo-helpers#^2.0.0
* @bower_components/iron-flex-layout#polymerelements/iron-flex-layout#1 - 2
* @bower_components/iron-location#PolymerElements/iron-location#1 - 2
* @bower_components/json-merge#bahrus/json-merge#^0.1.0
* @bower_components/lodash#lodash/lodash#^3.7.0
* @bower_components/marked#chjj/marked#~0.3.6
* @bower_components/marked-element#polymerelements/marked-element#1 - 2
* @bower_components/mocha#mochajs/mocha#^3.1.2
* @bower_components/polymer#Polymer/polymer#^2.0.0
* @bower_components/prism#LeaVerou/prism#*
* @bower_components/prism-element#PolymerElements/prism-element#1 - 2
* @bower_components/shadycss#webcomponents/shadycss#^v1.0.0
* @bower_components/sinon-chai#domenic/sinon-chai#^2.7.0
* @bower_components/sinonjs#blittle/sinon.js#^1.14.1
* @bower_components/stacky#PolymerLabs/stacky#^1.3.0
* @bower_components/test-fixture#PolymerElements/test-fixture#^3.0.0
* @bower_components/web-component-tester#Polymer/web-component-tester#^6.0.0
* @bower_components/webcomponentsjs#webcomponents/webcomponentsjs#^1.0.0
* @bower_components/xtal-json-editor#bahrus/xtal-json-editor#^0.0.6
xtal-json-editor version 0.0.16
### Dependencies
* @types/jsoneditor#^5.5.2
* @bower_components/accessibility-developer-tools#GoogleChrome/accessibility-developer-tools#^2.10.0
* @bower_components/async#caolan/async#^1.5.0
* @bower_components/chai#chaijs/chai#^3.2.0
* @bower_components/font-roboto#PolymerElements/font-roboto#^1
* @bower_components/iron-demo-helpers#PolymerElements/iron-demo-helpers#^2.0.0
* @bower_components/iron-flex-layout#polymerelements/iron-flex-layout#1 - 2
* @bower_components/iron-location#PolymerElements/iron-location#1 - 2
* @bower_components/json-merge#bahrus/json-merge#^0.1.0
* @bower_components/lodash#lodash/lodash#^3.7.0
* @bower_components/marked#chjj/marked#~0.3.6
* @bower_components/marked-element#polymerelements/marked-element#1 - 2
* @bower_components/mocha#mochajs/mocha#^3.1.2
* @bower_components/polymer#Polymer/polymer#^2.0.0
* @bower_components/prism#LeaVerou/prism#*
* @bower_components/prism-element#PolymerElements/prism-element#1 - 2
* @bower_components/shadycss#webcomponents/shadycss#^v1.0.0
* @bower_components/sinon-chai#domenic/sinon-chai#^2.7.0
* @bower_components/sinonjs#blittle/sinon.js#^1.14.1
* @bower_components/stacky#PolymerLabs/stacky#^1.3.0
* @bower_components/test-fixture#PolymerElements/test-fixture#^3.0.0
* @bower_components/web-component-tester#Polymer/web-component-tester#^6.0.0
* @bower_components/webcomponentsjs#webcomponents/webcomponentsjs#^1.0.0
* @bower_components/xtal-json-editor#bahrus/xtal-json-editor#^0.0.6
xtal-json-editor version 0.0.17
### Dependencies
* @types/jsoneditor#^5.5.2
* @bower_components/accessibility-developer-tools#GoogleChrome/accessibility-developer-tools#^2.10.0
* @bower_components/async#caolan/async#^1.5.0
* @bower_components/chai#chaijs/chai#^3.2.0
* @bower_components/font-roboto#PolymerElements/font-roboto#^1
* @bower_components/iron-demo-helpers#PolymerElements/iron-demo-helpers#^2.0.0
* @bower_components/iron-flex-layout#polymerelements/iron-flex-layout#1 - 2
* @bower_components/iron-location#PolymerElements/iron-location#1 - 2
* @bower_components/json-merge#bahrus/json-merge#^0.1.0
* @bower_components/lodash#lodash/lodash#^3.7.0
* @bower_components/marked#chjj/marked#~0.3.6
* @bower_components/marked-element#polymerelements/marked-element#1 - 2
* @bower_components/mocha#mochajs/mocha#^3.1.2
* @bower_components/polymer#Polymer/polymer#^2.0.0
* @bower_components/prism#LeaVerou/prism#*
* @bower_components/prism-element#PolymerElements/prism-element#1 - 2
* @bower_components/shadycss#webcomponents/shadycss#^v1.0.0
* @bower_components/sinon-chai#domenic/sinon-chai#^2.7.0
* @bower_components/sinonjs#blittle/sinon.js#^1.14.1
* @bower_components/stacky#PolymerLabs/stacky#^1.3.0
* @bower_components/test-fixture#PolymerElements/test-fixture#^3.0.0
* @bower_components/web-component-tester#Polymer/web-component-tester#^6.0.0
* @bower_components/webcomponentsjs#webcomponents/webcomponentsjs#^1.0.0
* @bower_components/xtal-json-editor#bahrus/xtal-json-editor#^0.0.6
xtal-json-editor version 0.0.18
### Dependencies
* @types/jsoneditor#^5.5.2
* @bower_components/accessibility-developer-tools#GoogleChrome/accessibility-developer-tools#^2.10.0
* @bower_components/async#caolan/async#^1.5.0
* @bower_components/chai#chaijs/chai#^3.2.0
* @bower_components/font-roboto#PolymerElements/font-roboto#^1
* @bower_components/iron-demo-helpers#PolymerElements/iron-demo-helpers#^2.0.0
* @bower_components/iron-flex-layout#polymerelements/iron-flex-layout#1 - 2
* @bower_components/iron-location#PolymerElements/iron-location#1 - 2
* @bower_components/json-merge#bahrus/json-merge#^0.1.0
* @bower_components/lodash#lodash/lodash#^3.7.0
* @bower_components/marked#chjj/marked#~0.3.6
* @bower_components/marked-element#polymerelements/marked-element#1 - 2
* @bower_components/mocha#mochajs/mocha#^3.1.2
* @bower_components/polymer#Polymer/polymer#^2.0.0
* @bower_components/prism#LeaVerou/prism#*
* @bower_components/prism-element#PolymerElements/prism-element#1 - 2
* @bower_components/shadycss#webcomponents/shadycss#^v1.0.0
* @bower_components/sinon-chai#domenic/sinon-chai#^2.7.0
* @bower_components/sinonjs#blittle/sinon.js#^1.14.1
* @bower_components/stacky#PolymerLabs/stacky#^1.3.0
* @bower_components/test-fixture#PolymerElements/test-fixture#^3.0.0
* @bower_components/web-component-tester#Polymer/web-component-tester#^6.0.0
* @bower_components/webcomponentsjs#webcomponents/webcomponentsjs#^1.0.0
* @bower_components/xtal-json-editor#bahrus/xtal-json-editor#^0.0.6
xtal-json-editor version 0.0.19
### Dependencies
* @types/jsoneditor#^5.5.2
* @bower_components/accessibility-developer-tools#GoogleChrome/accessibility-developer-tools#^2.10.0
* @bower_components/async#caolan/async#^1.5.0
* @bower_components/chai#chaijs/chai#^3.2.0
* @bower_components/font-roboto#PolymerElements/font-roboto#^1
* @bower_components/iron-demo-helpers#PolymerElements/iron-demo-helpers#^2.0.0
* @bower_components/iron-flex-layout#polymerelements/iron-flex-layout#1 - 2
* @bower_components/iron-location#PolymerElements/iron-location#1 - 2
* @bower_components/json-merge#bahrus/json-merge#^0.1.0
* @bower_components/lodash#lodash/lodash#^3.7.0
* @bower_components/marked#chjj/marked#~0.3.6
* @bower_components/marked-element#polymerelements/marked-element#1 - 2
* @bower_components/mocha#mochajs/mocha#^3.1.2
* @bower_components/polymer#Polymer/polymer#^2.0.0
* @bower_components/prism#LeaVerou/prism#*
* @bower_components/prism-element#PolymerElements/prism-element#1 - 2
* @bower_components/shadycss#webcomponents/shadycss#^v1.0.0
* @bower_components/sinon-chai#domenic/sinon-chai#^2.7.0
* @bower_components/sinonjs#blittle/sinon.js#^1.14.1
* @bower_components/stacky#PolymerLabs/stacky#^1.3.0
* @bower_components/test-fixture#PolymerElements/test-fixture#^3.0.0
* @bower_components/web-component-tester#Polymer/web-component-tester#^6.0.0
* @bower_components/webcomponentsjs#webcomponents/webcomponentsjs#^1.0.0
* @bower_components/xtal-json-editor#bahrus/xtal-json-editor#^0.0.6
xtal-json-editor version 0.0.21
### Dependencies
* @polymer/polymer#^3.0.0
xtal-json-editor version 0.0.23
### Dependencies
* @polymer/polymer#^3.0.0
xtal-json-editor version 0.0.24
### Dependencies
* @polymer/polymer#^3.0.0
xtal-json-editor version 0.0.25
### Dependencies
* xtal-latx#0.0.17
xtal-json-editor version 0.0.26
### Dependencies
* xtal-latx#0.0.17
xtal-json-editor version 0.0.27
### Dependencies
* xtal-latx#0.0.17
xtal-json-editor version 0.0.28
### Dependencies
* xtal-latx#0.0.17
xtal-json-editor version 0.0.29
### Dependencies
* xtal-latx#0.0.17
xtal-json-editor version 0.0.30
### Dependencies
* xtal-latx#0.0.44
xtal-json-editor version 0.0.31
### Dependencies
* xtal-latx#0.0.44
xtal-json-editor version 0.0.32
### Dependencies
* xtal-latx#0.0.44
xtal-json-editor version 0.0.33
### Dependencies
* xtal-element#0.0.43
xtal-json-editor version 0.0.34
### Dependencies
* xtal-element#0.0.58
* trans-render#0.0.110