xtal-json-editor | Vaadin

Vanilla-ish web component wrapper around the JSONEditor library

Published on webcomponents.org


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:

<xtal-json-editor id="firstEditor" options="{}" as="json"></xtal-json-editor>
<p-d on="edited-result-changed" to="xtal-json-editor{input}"></p-d>
<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



Link to this version
ImportedReleased 26 May 2018MIT License
Framework Support
Polymer 3.0+
Also supported:
Polymer 2 (0.0.12)
Browser Independent
Install with
npm install xtal-json-editor"@0.0.24"
Run the above npm command in your project folder. If you have any issues installing, please contact the author.
Release notes - Version 0.0.24


  • @polymer/polymer#^3.0.0