Skip to content

Latest commit

 

History

History
89 lines (72 loc) · 3.37 KB

README.md

File metadata and controls

89 lines (72 loc) · 3.37 KB
Raw

Published on webcomponents.org

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

Viewing Your Element

$ npm install
$ npm run serve

or

<script type=module src="https://cdn.pika.dev/xtal-json-editor"></script>