Directory

← Back

xtal-json-editor

Vanilla-ish web component wrapper around the JSONEditor library

Author

Rating

Popularity

<100

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.

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

Compatibility

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

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 library xtal-json-editor - Vaadin Add-on Directory
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/bahrus/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: ```html
Input:
Output:
``` The markup above is using the [pass down element (p-d)](https://www.webcomponents.org/element/p-d.p-u) 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](https://www.npmjs.com/package/polymer-cli) and npm (packaged with [Node.js](https://nodejs.org)) 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
Online