https://github.com/juicy/juicy-jsoneditor
Polymer Element that wraps josdejong/jsoneditor and adds two-way binding for edited JSON.
https://github.com/juicy/juicy-jsoneditor
polymer used-in-starcounter-app
Last synced: 3 days ago
JSON representation
Polymer Element that wraps josdejong/jsoneditor and adds two-way binding for edited JSON.
- Host: GitHub
- URL: https://github.com/juicy/juicy-jsoneditor
- Owner: Juicy
- License: mit
- Created: 2014-06-10T21:16:30.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2022-05-25T23:13:54.000Z (over 3 years ago)
- Last Synced: 2024-04-14T12:14:56.226Z (over 1 year ago)
- Topics: polymer, used-in-starcounter-app
- Language: HTML
- Homepage: http://juicy.github.io/juicy-jsoneditor/
- Size: 269 KB
- Stars: 42
- Watchers: 12
- Forks: 12
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# <juicy-jsoneditor>
[](https://vaadin.com/directory/component/Juicyjuicy-jsoneditor)
[](https://vaadin.com/directory/component/Juicyjuicy-jsoneditor)
> Polymer Element that wraps [josdejong/jsoneditor](http://github.com/josdejong/jsoneditor) and adds two-way binding for edited JSON.
## Demo
[Check it live!](http://juicy.github.io/juicy-jsoneditor)
## Install
Install the component using [Bower](http://bower.io/):
```sh
$ bower install juicy-jsoneditor --save
```
Or [download as ZIP](https://github.com/juicy/juicy-jsoneditor/archive/master.zip).
## Usage
1. Import Web Components' polyfill, if needed:
```html
```
2. Import Custom Element:
```html
```
3. Start using it!
```html
```
## Options
Attribute | Options | Default | Description
--- | --- | --- | ---
`json` | *Object* | `{}` | JSON to edit. This could be object reference given via property or stringified JSON via attribute
`mode` | *String* | `tree` | Editing mode, see [API](https://github.com/josdejong/jsoneditor/blob/master/docs/api.md#constructor)
`modes` | *Array of Strings* | | List of editing modes to be available, see [API](https://github.com/josdejong/jsoneditor/blob/master/docs/api.md#constructor)
`name` | *String* | | Object name, see [API](https://github.com/josdejong/jsoneditor/blob/master/docs/api.md#constructor)
`search` | *Boolean* | `true` | Toggle search box, see [API](https://github.com/josdejong/jsoneditor/blob/master/docs/api.md#constructor)
`indentation` | *Number* | `2` | Indentation, see [API](https://github.com/josdejong/jsoneditor/blob/master/docs/api.md#constructor)
`history` | *Boolean* | `true` | Toggle history - undo, redo, see [API](https://github.com/josdejong/jsoneditor/blob/master/docs/api.md#constructor)
## Properties
All attributes, plus:
Name | Type | Description
--- | --- | ---
`editor` | *JSONEditor* | [JSONEditor](https://github.com/josdejong/jsoneditor/blob/master/docs/api.md#constructor) instance.
## Methods
- `set`,
- `setMode`,
- `setName`,
- `setText`,
- `get`,
- `getName`,
- `getText`
delegated to [`JSONEditor`'s methods](https://github.com/josdejong/jsoneditor/blob/master/docs/api.md#methods)
## Events
Event | event.details | Description
--- | --- | ---
`change` | `{action: "JSONEditor-action", params: {..} }` | Triggers when json changes.
## Notes
- `juicy-jsoneditor` is a [hybrid element](https://www.polymer-project.org/2.0/docs/devguide/hybrid-elements).
## [Contributing and Development](CONTRIBUTING.md)
## History
For detailed changelog, check [Releases](https://github.com/juicy/dummyCRM/releases).
## License
- `` MIT
- `josdejong/JSONEditor` [Apache License](https://github.com/josdejong/jsoneditor/blob/master/LICENSE)