infiman / juicy-jsoneditor

Polymer Element that wraps josdejong/jsoneditor and adds two-way binding for edited JSON.

<juicy-jsoneditor>

Polymer Element that wraps josdejong/jsoneditor and adds two-way binding for edited JSON.

Demo

Check it live!

Install

Install the component using Bower:

$ bower install juicy-jsoneditor --save

Or download as ZIP.

Usage

1. Import Web Components' polyfill, if needed:

   <script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>

2. Import Custom Element:

   <link rel="import" href="bower_components/juicy-jsoneditor/juicy-jsoneditor.html">
   <!-- josdejong/jsoneditor#104 workaround-->
   <link rel="stylesheet" type="text/css" href="bower_components/jsoneditor/jsoneditor.min.css">

3. Start using it!

   <juicy-jsoneditor></juicy-jsoneditor>

Options

Attribute	Options	Default	Description
json	Object	{}	JSON to edit.
mode	String	tree	Editing mode, see API
modes	Array of Strings		List of editing modes to be available, see API
name	String		Object name, see API
search	Boolean	true	Toggle search box, see API
indentation	Number	2	Indentation, see API
history	Boolean	true	Toggle history - undo, redo, see API

Properties

All attributes, plus:

Name	Type	Description
editor	JSONEditor	JSONEditor instance.

Methods

• set,
• setMode,
• setName,
• setText,
• get,
• getName,
• getText

delegated to JSONEditor's methods

Events

Event	event.details	Description
change	{action: "JSONEditor-action", params: {..} }	Triggers when json changes.

Notes

• juicy-jsoneditor is a hybrid element.

Contributing and Development

History

For detailed changelog, check Releases.

License

• <juicy-jsoneditor> MIT
• josdejong/JSONEditor Apache License