Showing preview only (910K chars total). Download the full file or copy to clipboard to get everything.
Repository: josdejong/jsoneditor
Branch: develop
Commit: b14dd44a5075
Files: 152
Total size: 863.6 KB
Directory structure:
gitextract_p3pjbjxq/
├── .babelrc
├── .github/
│ ├── FUNDING.yml
│ └── workflows/
│ └── build.yaml
├── .gitignore
├── .npmignore
├── CONTRIBUTING.md
├── HISTORY.md
├── LICENSE
├── NOTICE
├── README.md
├── SECURITY.md
├── docs/
│ ├── api.md
│ ├── shortcut_keys.md
│ ├── styling.md
│ └── usage.md
├── examples/
│ ├── 01_basic_usage.html
│ ├── 02_viewer.html
│ ├── 03_switch_mode.html
│ ├── 04_load_and_save.html
│ ├── 05_custom_fields_editable.html
│ ├── 06_custom_styling.html
│ ├── 07_json_schema_validation.html
│ ├── 08_custom_ace.html
│ ├── 09_readonly_text_mode.html
│ ├── 10_templates.html
│ ├── 11_autocomplete_basic.html
│ ├── 12_autocomplete_dynamic.html
│ ├── 13_autocomplete_advanced.html
│ ├── 14_translate.html
│ ├── 15_selection_api.html
│ ├── 16_synchronize_editors.html
│ ├── 17_on_event_api.html
│ ├── 18_custom_validation.html
│ ├── 19_custom_validation_async.html
│ ├── 20_custom_css_style_for_nodes.html
│ ├── 21_customize_context_menu.html
│ ├── 22_on_validation_event.html
│ ├── 23_custom_query_language.html
│ ├── 24_new_window.html
│ ├── 25_sync_node_expand.html
│ ├── 26_autocomplete_by_schema.html
│ ├── 27_autocomplete_by_schema_recursive_refs.html
│ ├── 28_autocomplete_text_value_objects.html
│ ├── 29_autocomplete_multiple_fields.html
│ ├── css/
│ │ └── darktheme.css
│ ├── react_advanced_demo/
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── public/
│ │ │ └── index.html
│ │ └── src/
│ │ ├── App.css
│ │ ├── App.js
│ │ ├── App.test.js
│ │ ├── JSONEditorReact.css
│ │ ├── JSONEditorReact.js
│ │ ├── index.css
│ │ └── index.js
│ ├── react_demo/
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── public/
│ │ │ └── index.html
│ │ └── src/
│ │ ├── App.css
│ │ ├── App.js
│ │ ├── App.test.js
│ │ ├── JSONEditorDemo.css
│ │ ├── JSONEditorDemo.js
│ │ ├── index.css
│ │ └── index.js
│ └── requirejs_demo/
│ ├── requirejs_demo.html
│ └── scripts/
│ └── main.js
├── greenkeeper.json
├── gulpfile.js
├── index.js
├── misc/
│ └── how_to_publish.md
├── package.json
├── src/
│ ├── docs/
│ │ └── which files do I need.md
│ ├── js/
│ │ ├── ContextMenu.js
│ │ ├── ErrorTable.js
│ │ ├── FocusTracker.js
│ │ ├── Highlighter.js
│ │ ├── History.js
│ │ ├── JSONEditor.js
│ │ ├── ModeSwitcher.js
│ │ ├── Node.js
│ │ ├── NodeHistory.js
│ │ ├── SchemaTextCompleter.js
│ │ ├── SearchBox.js
│ │ ├── TreePath.js
│ │ ├── ace/
│ │ │ ├── index.js
│ │ │ └── theme-jsoneditor.js
│ │ ├── appendNodeFactory.js
│ │ ├── assets/
│ │ │ ├── jsonlint/
│ │ │ │ ├── README.md
│ │ │ │ └── jsonlint.js
│ │ │ └── selectr/
│ │ │ ├── README.md
│ │ │ ├── selectr.js
│ │ │ └── selectr.scss
│ │ ├── autocomplete.js
│ │ ├── constants.js
│ │ ├── createAbsoluteAnchor.js
│ │ ├── header.js
│ │ ├── i18n.js
│ │ ├── jmespathQuery.js
│ │ ├── jsonUtils.js
│ │ ├── polyfills.js
│ │ ├── previewmode.js
│ │ ├── showMoreNodeFactory.js
│ │ ├── showSortModal.js
│ │ ├── showTransformModal.js
│ │ ├── textmode.js
│ │ ├── treemode.js
│ │ ├── tryRequireAjv.js
│ │ ├── tryRequireThemeJsonEditor.js
│ │ ├── types.js
│ │ ├── util.js
│ │ ├── validationUtils.js
│ │ └── vanilla-picker/
│ │ └── index.js
│ └── scss/
│ ├── img/
│ │ └── description.txt
│ ├── jsoneditor/
│ │ ├── _autocomplete.scss
│ │ ├── _contextmenu.scss
│ │ ├── _editor.scss
│ │ ├── _menu.scss
│ │ ├── _navigationbar.scss
│ │ ├── _reset.scss
│ │ ├── _searchbox.scss
│ │ ├── _statusbar.scss
│ │ ├── _treepath.scss
│ │ └── _variables.scss
│ └── jsoneditor.scss
└── test/
├── Node.test.js
├── SchemaTextCompleter.test.js
├── couchdbeditor.html
├── data/
│ ├── jsons.js
│ └── schemas.js
├── jsonUtils.test.js
├── setup.js
├── test_bootstrap.html
├── test_build.html
├── test_build_min.html
├── test_code_mode.html
├── test_color_picker.html
├── test_destroy.html
├── test_enum.html
├── test_enum_2.html
├── test_focus_tracker.html
├── test_get_inner_text.html
├── test_large_array.html
├── test_materialize.html
├── test_minimalist_min.html
├── test_popup_anchor.html
├── test_preview_load_save.html
├── test_schema.html
├── test_update.html
└── util.test.js
================================================
FILE CONTENTS
================================================
================================================
FILE: .babelrc
================================================
{
"presets": [
["@babel/preset-env"]
]
}
================================================
FILE: .github/FUNDING.yml
================================================
github: josdejong
================================================
FILE: .github/workflows/build.yaml
================================================
name: Node.js CI
on: [push, pull_request]
jobs:
build:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [20.x, 22.x, 24.x]
steps:
- uses: actions/checkout@v4
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v4
with:
node-version: ${{ matrix.node-version }}
- run: npm install
- run: npm run test
env:
CI: true
lint:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
node-version: 24.x
- run: npm ci
- run: npm run lint
env:
CI: true
================================================
FILE: .gitignore
================================================
.idea
*.iml
.vscode
build
dist
downloads
node_modules
*.zip
npm-debug.log
/.vs
================================================
FILE: .npmignore
================================================
bower.json
CONTRIBUTING.md
downloads
misc
node_modules
test
tools
.idea
component.json
.npmignore
.gitignore
*.zip
npm-debug.log
================================================
FILE: CONTRIBUTING.md
================================================
## Contributing
Contributions to the `jsoneditor` library are very welcome! We can't do this
alone. You can contribute in different ways: spread the word, report bugs, come
up with ideas and suggestions, and contribute to the code.
There are a few preferences regarding code contributions:
- Send pull requests to the `develop` branch, not the `master` branch.
- You can use modern JavaScript features, the code is transpiled using Babel.
- `jsoneditor` follows the https://standardjs.com/ code style. To test:
```
npm run lint
```
- If possible, create a unit test for any new functionality. To run tests:
```
npm test
```
Thanks!
================================================
FILE: HISTORY.md
================================================
# JSON Editor - History
<https://github.com/josdejong/jsoneditor>
## 2025-10-15, version 10.4.2
- Fix: #1680 ensure that method `.validate()` always returns a `Promise`.
## 2025-08-28, version 10.4.1
- Fix: show autocompletion dropdown for single element when `option.text` is
available (#1676). Thanks @ahmed-saber.
## 2025-08-22, version 10.4.0
- Feat: implemented a new option `withPath` for the `expand` method,
see #1671.
- Feat: update dependencies `jsonrepair` and `ace-builds`.
- Fix: #1673 refinements in the autocomplete text highlighting and dropdown
logic (#1674). Thanks @ahmed-saber.
- Fix: some class names for highlighting search results in the `darktheme.css`
example file (#1672). Thanks @epeleh.
## 2025-08-01, version 10.3.0
- Feat: add support for autocompletion options with separate `text` and `value`
(#1669). Thanks @ahmed-saber.
- Fix: update dependencies (like `jsonrepair` and `ace-builds`).
## 2025-03-28, version 10.2.0
- Feat: stringify integer numbers bigger than max safe integer (#1646).
Thanks @pawfrolow.
## 2025-02-17, version 10.1.3
- Fix: #1643 handle `true` property value in a JSON Schema (#1644).
Thanks @joshkel.
## 2024-12-18, version 10.1.2
- Fix: #1637 remove `mobius1-selectr` from the list with dependencies to get
rid of a security vulnerability in its docs.
## 2024-11-13, version 10.1.1
- Fix: when editing a key giving it a ` (copy)` suffix, the suffix was removed.
- Fix: #1627 `onValidationError` did not always trigger.
- Fix: upgrade to the latest version of `ace`.
- Fix: upgrade to the latest version of `sass`.
## 2024-06-19, version 10.1.0
- Feat: upgrade to the latest version of `ace` and `jsonrepair`
- Fix: #1601 do not convert hexadecimal values into regular numbers.
## 2024-05-09, version 10.0.4
- Fix: #1591 select contents in tree mode only when using the left mouse button,
not the middle button or right mouse button.
## 2024-04-25, version 10.0.3
- Update dependencies `ace-builds`, `jsonrepair`, and `vanilla-picker`.
- Fix: fix HTML open tag wrongly being `label` instead of `div`.
Thanks @ppetkow.
## 2024-03-18, version 10.0.2
- Fix: autocompletion sometimes throwing an error when there are no suggestions.
Thanks @jpage-godaddy.
- Update dependencies `ace` and `jsonrepair`.
## 2024-02-09, version 10.0.1
- Fix #1570: Spanish grammar corrections (#1571). Thanks @gonchesan.
- Update dependencies `ace` and `jsonrepair`.
## 2023-12-21, version 10.0.0
- BREAKING CHANGE: dropped support for Internet Explorer 11.
- Update dependencies `ace` and `jsonrepair`.
## 2023-12-21, version 9.10.5
- Revert dependency `jsonrepair` to `v3.1.0` to stay compatible with
Internet Explorer 11. Regression introduced in `v9.10.3`. See #1563.
## 2023-11-08, version 9.10.4
- Fix #1558: url not wrapping on Chrome in mode `view`, font-size increasing
on mobile Webview.
- Upgraded to the latest version of `ace` and `jsonrepair`.
## 2023-09-21, version 9.10.3
- Fix #1550: trimming zero in front of a number (#1549). Thanks @DarkFisk.
- Updated dependencies, most notable `ace`, `jsonrepair`, and `vanilla-picker`.
## 2023-05-12, version 9.10.2
- Fix option `showErrorTable` (see #1515):
- a console warning was logged when using the option `showErrorTable`
- `showErrorTable: false` was not working
- `showErrorTable` was not working for `preview` mode
- Upgraded to the latest version of `ace` and `jsonrepair`.
## 2023-05-12, version 9.10.1
- Fix #1515: a console warning is logged when using the option `showErrorTable`.
## 2023-02-20, version 9.10.0
- Implement option `showErrorTable` to customize in which modes the error table
shows up initially (#1497). Thanks @magedhennawy.
- Upgrade to the latest version of Ace editor, `v1.15.2`.
- Upgrade to the latest version of jsonrepair, `v3.0.2`.
- Fix #1208: source map issue "Could not load source file "0" in source map"
(#1499). Thanks @joshkel.
## 2022-09-20, version 9.9.2
- Fix #1470: update the code of Selectr from `2.4.0` to `2.4.13`.
## 2022-09-19, version 9.9.1
- Upgrade to the latest version of Ace editor, `v1.10.1`.
## 2022-06-13, version 9.9.0
- Implemented #968: support for auto-completion based on JSON Schema (#1435).
Thanks @meirotstein.
- Upgrade to the latest version of Ace editor, `v1.6.0`.
## 2022-05-31, version 9.8.0
- Implemented method `editor.expand({ path, isExpand, recursive })` and callback
`onExpand({ path, isExpand, recursive })`. Thanks @himanshu520.
- Upgrade to the latest version of Ace editor, `v1.5.3`.
## 2022-03-15, version 9.7.4
- Fix #1421: fix `onBlur` event not firing when focus goes to an `iframe`.
## 2022-03-04, version 9.7.3
- Fix #1422: fix `setSchema` not working.
## 2022-02-09, version 9.7.2
- Fix #1419: blurry text preview query on Chrome.
## 2022-02-09, version 9.7.1
- Fix #1419: blurry text preview on Chrome.
## 2022-01-30, version 9.7.0
- Implement #1413: show color indicator on readonly fields and in mode `view`.
## 2022-01-13, version 9.6.0
- Pass a new property `value` along with the `onNodeName` callback, see #1409.
Thanks @brianpos.
- Implement the `value` property of the callbacks `onNodeName`, `onEditable`,
and `onClassName` for objects and arrays too (was `undefined` before).
Since this can be a heavy recursive operation, the property is changed into
a lazy getter.
## 2021-12-29, version 9.5.11
- Fix the font on Ubuntu for real by add the "ubuntu mono" font. See #1405.
## 2021-12-27, version 9.5.10
- Fix the font on Ubuntu: add "dejavu sans mono". See #1405.
## 2021-12-22, version 9.5.9
- More tweaking of the font because the 13px Cascadia Mono font on Windows gave
issues in Ace editor. Changed to 14px Consolas on Windows, 14px Menlo on Mac,
see #1392, #1403.
## 2021-12-19, version 9.5.8
- Fix vertical centering of text and buttons, see #1392.
- Improve font: 13px Cascadia Mono on Windows, 13px Monaco on Mac, see #1392.
## 2021-11-06, version 9.5.7
- More robust polyfill for `Element.remove`, `window.CharacterData.remove`,
and `window.DocumentType.remove`. Thanks @caok2709.
- Update dependencies: `ace-builds@1.4.13`, `vanilla-picker@2.12.1`.
## 2021-09-22, version 9.5.6
- Fix inefficient regex to replace return characters.
## 2021-09-01, version 9.5.5
- Fix `setMode` not throwing an exception anymore in case of a parse error
(regression since `9.5.4`).
## 2021-08-25, version 9.5.4
- Use `noreferrer` for window.open, see #1365. Thanks @rajitbanerjee.
- Fix #1363: parsing error contains html characters.
- Fix opening the Transform or Sort modal in code mode with invalid JSON
contents not triggering the `onError` callback (see #1364).
- Change the default behavior of error handling to open a basic alert instead
of logging the error in the console (see #1364).
## 2021-07-28, version 9.5.3
- Fix #1356: background of tree mode is transparent instead of white.
- Fix #473: enum dropdown not working on referenced schemas and templates,
see #1355. Thanks @mpccolorado.
## 2021-07-22, version 9.5.2
- Fix #675: Relative image urls in CSS replaced with absolute urls by build
script, see #1354. Thanks @esulu.
## 2021-06-30, version 9.5.1
- Upgrade to `jsonrepair@2.2.1`.
## 2021-06-05, version 9.5.0
- Implemented new method `JSONEditor.validate(): Promise<ValidationError[]>`.
Thanks @ChrisAcrobat.
## 2021-06-02, version 9.4.2
- Fix #1311: exception being thrown under certain conditions when switching
from `code` mode to `preview` mode.
- Rename spin animation of `selectr` to prevent conflicts with tailwind,
see #1333. Thanks @mdix.
## 2021-04-25, version 9.4.1
- Improvements in the Korean translation. Thanks @luasenvy.
## 2021-04-17, version 9.4.0
- Added Korean translation. Thanks @luasenvy.
- Added Spanish translation. Thanks @joabac.
- Fix #1282: JSON schema enum dropdown not working for conditionals like
`oneOf`, `anyOf`, `allOf`. Thanks @maufl.
- Fix #1307: losing caret position when calling `refresh()` during `onChange`
callback.
## 2021-04-10, version 9.3.1
- Introduced a new sass variable `$jse-icons-url`, see #1268. Thanks @ppetkow.
## 2021-04-01, version 9.3.0
- Improved Russian translation. Thanks @PunKHS.
- Upgraded dependencies to `jsonrepair@2.1.0`.
## 2021-02-24, version 9.2.0
- Added Russian translation. Thanks @PunKHS.
- Changed shortcut keys for Format and Compact in code mode from `Ctrl+\` and
`Ctrl+Shift+\` to `Ctrl+I` and `Ctrl+Shift+I` respectively, because not all
browsers and operating systems support this key combination.
## 2021-02-14, version 9.1.10
- Fixed resolving a JSON schema reference linking to an other schema, see #1239.
Thanks @Hagartinger.
- Upgraded to latest dependencies (`vanilla-picker@2.11.2`).
## 2021-01-23, version 9.1.9
- Fix `jsoneditor-minimalist` bundle being too large. Regression since `v9.1.5`
(caused by a recent upgrade to Webpack 5). Thanks @cbmgit.
## 2021-01-16, version 9.1.8
- Replaced `simple-json-repair` with `jsonrepair` (library was renamed).
## 2020-12-30, version 9.1.7
- Fix #1206: library bundle broken on IE 11, regression introduced in v9.1.6.
## 2020-12-23, version 9.1.6
- Fix #1192: enum dropdown from a JSON schema not rendered when using
`additionalProperties`. Thanks @maufl.
- Fix #1191: clarify docs about configuration option `ajv`.
- Fix #1193: simplify and fix example 20_custom_css_style_for_nodes.html.
## 2020-12-14, version 9.1.5
- Fix #1185: enum dropdown not selecting actual value when this is not a string.
- Fix selected value of enum dropdown not updated when changed programmatically.
## 2020-11-23, version 9.1.4
- Fix #1119: list of keys in navigation bar missing a scroll bar.
Thanks @tanmayrajani.
## 2020-11-19, version 9.1.3
- Fix #1158: JSON schema_findSchema not found if using internal references. Thanks @maufl.
- Update dependencies: `vanilla-picker@2.11.0`.
## 2020-11-07, version 9.1.2
- Fix #1126: fire `onEvent` for boolean checkbox and enum selectbox too.
- Log a clear error in the console when the returned value of `onEditable` is
invalid. See #1112.
- Updated dependency to `ajv@6.12.6`.
- Extract the JSON repair functionality into a separate,
library `simple-json-repair` with many improvements.
## 2020-09-23, version 9.1.1
- Fix #1111: Enum dropdown not showing when using patternProperties for schema.
Thanks @ziga-miklic.
- Fixed JSONEditor not working when opened in a new window, see #1098.
Thanks @joshkel.
- Fix quick-key `Ctrl+D` (duplicate) not working.
- Define "charset: utf-8" in all HTML examples.
## 2020-09-15, version 9.1.0
- Implemented German translation (`de`). Thanks @s-a.
- Fix quick-keys `Ctrl-\` (format) and `Ctrl-Shift-\` (compact) not working
in `code` mode.
- Updated dependencies to `ajv@6.12.5`.
## 2020-09-09, version 9.0.5
- Fix #1090: autocomplete firing on dragging or clicking a node.
- Fix #1096: editor crashing when passing an empty string as `name`.
- Updated dependencies to `ajv@6.12.4`.
## 2020-08-15, version 9.0.4
- Updated dependencies to `ace-builds@1.4.12`, `ajv@6.12.3`.
- Fix #1077: change the `main` field in `package.json` to point to the actual
bundled and minified file instead of a node.js index file.
## 2020-07-02, version 9.0.3
- Fix regression introduced in `v9.0.2` in the select boxes in the
Transform model not lighlighting the matches correctly.
## 2020-07-01, version 9.0.2
- Fix #1029: XSS vulnerabilities. Thanks @onemoreflag for reporting.
- Fix #1017: unable to style the color of a value containing a color.
Thanks @p3x-robot.
## 2020-06-24, version 9.0.1
- Fixed broken link to the Ace editor website (<https://ace.c9.io/>).
Thanks @p3x-robot.
- Fix #1027: create IE11 Array polyfills `find` and `findIndex` in such a way
that they are not iterable.
## 2020-05-24, version 9.0.0
- Implemented option `limitDragging`, see #962. This is a breaking change when
using a JSON schema: dragging is more restrictive by default in that case.
Set `limitDragging: false` to keep the old, non-restricted behavior.
## 2020-05-13, version 8.6.8
- Fix #936: too many return characters inserted when pasting formatted text
from OpenOffice.
## 2020-05-10, version 8.6.7
- Fix #858: the `dist/jsoneditor.js` bundle containing a link to a
non-existing source map.
- Fix #978: in some special cases the caret was jumping to the beginning of the
line whilst typing.
- Update dependencies to `ajv@6.12.2`.
## 2020-04-21, version 8.6.6
- Fix #969: adding a new property to an empty object or array is broken.
Regression introduced in `v8.6.5`.
## 2020-04-19, version 8.6.5
- Fix #964: translation of titles of some context menu items not working.
- Update dependencies to `ace-builds@1.4.11`, `ajv@6.12.1`.
## 2020-03-29, version 8.6.4
- Fix #921: `sortObjectKeys` emits `onChange` events.
- Fix #946: `language` not working in modes `text`, `code`, and `preview`.
- Revert reckoning with the order of object properties when updating an
object (introduced in `v8.6.2`). See #917.
- Implement support for repairing line separate JSON.
## 2020-03-18, version 8.6.3
- Fix #932: `JSONEditor.update` broken, did not always recognize when the
input changed. Regression introduced in `v8.6.2`.
## 2020-03-18, version 8.6.2
- Fixed #917, #926: Keep order of properties when updating an object.
- Fixed #928: Custom root name not reflected in path of navigation bar.
- Upgraded to `ajv@6.12.0`
## 2020-02-17, version 8.6.1
- Fixed #908: editor throwing an exception when switching from `'preview'`
to `'code'` mode.
## 2020-02-16, version 8.6.0
- Fixed #906: Implemented turning Python objects containing `True`, `False`
and `None` into valid JSON using repair.
## 2020-02-06, version 8.5.3
- Fix #892: the undo/redo buttons in mode `code` being broken when custom
loading an old version of Ace Editor.
## 2020-02-05, version 8.5.2
- Fix undo/redo buttons in mode `code` not always updating.
## 2020-02-05, version 8.5.1
- Fix broken build.
## 2020-02-05, version 8.5.0
- Implemented support for customizing the query language used in the
Transform modal. New options `createQuery`, `executeQuery`, and
`queryDescription` are available for this now. An example is available
in `examples/23_custom_query_language.html`. See #857, #871.
- Implement undo/redo buttons in `code` mode.
- Fix history (undo/redo) being cleared in mode `code` and `text` after
transforming or sorting.
## 2020-01-25, version 8.4.1
- Fix `console.log` in production code. Oopsie.
## 2020-01-25, version 8.4.0
- Added CSS classes `jsoneditor-expanded` and `jsoneditor-collapsed` on array
and object nodes reflecting there state.
## 2020-01-18, version 8.3.0
- Update dependency `ajv` to `v6.11.0`.
- Fix #790: editor breaking when missing a translation containing a
placeholder.
## 2020-01-16, version 8.2.0
- Make it easy to create custom styling by overriding default SASS variable
values, see #881. Thanks @petermanders89.
- Update `ace` to `v1.4.8`.
## 2020-01-06, version 8.1.2
- Fix #873: buttons Format, Compact, and Repair not supporting
internationalization.
- Fix #877: Some CSS styling issues when used in combination with Materialize.
- Updated dependency `vanilla-picker` to `v2.10.1`.
## 2019-12-28, version 8.1.1
- Fixed the file size reported in `preview` mode show `KB` and `MB` instead
of `KiB` and `MiB` in order to match the size reported by filesystems.
## 2019-12-18, version 8.1.0
- Implemented `popupAnchor` allowing to select a custom anchor element.
See #869 and #870.
- Fixed #502: CSS rule `* { font-family: ... }` resulting in Ace editor (`code`
mode) not having a mono-space font anymore.
## 2019-12-11, version 8.0.0
- Implemented option `timestampFormat` which allows customizing the formatting
of timestamp tags. See also option `timestampTag`. Thanks @smallp.
- Changed the behavior of `timestampTag` to fallback on the built-in rules when
the function does not return a boolean. See #856.
- Reverted the heuristics introduced in `v7.3.0` to check whether some field
contains a timestamp based on the field name, because they can give wrong
timestamps in case of values in seconds instead of the assumed milliseconds
(see #847, #856).
## 2019-12-08, version 7.5.0
- Extended the callback `onValidationError` to also report parse errors,
and distinguish between JSON schema validation errors and custom errors.
See #861 and #612. Thanks @meirotstein.
## 2019-12-01, version 7.4.0
- Implemented callback function `onValidationError`, see #612, #854.
Thanks @meirotstein.
- Fixed #850: make autocomplete options robust against non-string inputs
like `null`, `123`, `true`, `false`.
## 2019-12-01, version 7.3.1
- Fixed #855: `onFocus` and `onBlur` not working in modes `text` and `code`
when editor was created without main menu bar, and `editor.destroy()`
throwing an exception.
## 2019-11-27, version 7.3.0
- Implemented callbacks `onFocus` and `onBlur` (PR #809, issue #727).
Thanks @123survesh.
- Fixed #847: allow customizing the in rules determining whether a value
is a timestamp or not by passing a callback function to `timestampTag`.
## 2019-10-27, version 7.2.1
- Fixed #826: editor not allowing indentation `0`.
- Fixed #828: do not expand/collapse when clicking the text of a node
in modes `view` or `form`.
- Fixed #829: z-index issue of context-menu button and conflicting css names.
## 2019-10-23, version 7.2.0
- Implemented Japanese translation (`ja`). Thanks @yutakiyama.
- Implemented French translation (`fr-FR`), and some improvements in the
translation. Thanks @yannickyvin.
- Upgraded to the latest version of Ace editor, 1.4.7.
- Fixed #824: Parse errors not displayed with bottom right error icon in modes
`code` and `text`.
## 2019-10-13, version 7.1.0
- Upgraded to the latest version of Ace editor 1.4.6. Changed implementation
to use `ace-builds` directly instead of `brace` (still using Ace 1.2.9).
- Improved Portuguese translation. Thanks @victorananias.
## 2019-10-06, version 7.0.5
- Upgraded dependencies: `vanilla-picker@2.10.0`.
- Minor documentation improvements. Thanks @slash-arun.
- Minor styling fixes.
## 2019-09-11, version 7.0.4
- Fixed #723: schema error popup and color picker not always fully visible.
- Fixed wrong text color in search box when using JSONEditor in combination
with bootstrap. See #791. Thanks @dmitry-kulikov.
- Fixed react examples not working out of the box when cloning or downloading
the git repository of JSONEditor. See #787, #788. Thanks @vishwasnavadak.
## 2019-09-04, version 7.0.3
- Fixed `index.js` pointing to non-transpiled code. See #783.
- Fixed absolute url of images in SASS. Thanks @moonbreezee.
## 2019-09-02, version 7.0.2
- Fix #781: race condition when destroying the editor right after setting data.
## 2019-09-01, version 7.0.1
- Fix npm package missing `dist` folder.
## 2019-09-01, version 7.0.0
- Converted the code largely to ES6, put Babel transpiler in place.
- Dropped support for bower, removed the `dist` folder from the git repository.
- Fixed #586: caret position lost when switching browser tabs.
## 2019-08-28, version 6.4.1
- Fix styling of autocompletion dropdown broken. Regression since `v6.4.0`.
## 2019-08-28, version 6.4.0
- Replaces CSS with SASS internally, improvements in styling. Thanks @ppetkow.
- Fixed #761: JSON schema errors not rendered in the gutter for mode `code`
when the path contained a property with a forward slash, and errors not
clickable in the error table.
- Fixed #777: option `sortObjectKeys` broken.
## 2019-08-15, version 6.3.0
- Fixed #755: JSONEditor throwing an exception in mode `code`, `text`, and
`preview` when `statusBar: false`.
- When duplicating an object property, move focus to the field and do not
immediately add the `(copy)` suffix. See #766.
- Fixed #769: option `name` not working anymore. Regression since `v6.1.0`.
- Fixed #763: `autocomplete.trigger: 'focus'` throws an error when opening the
context menu. Thanks @Thaina.
- Updated dependencies `json-source-map@0.6.1`
## 2019-08-01, version 6.2.1
- Updated Chinese translation. Thanks @SargerasWang.
## 2019-07-28, version 6.2.0
- Implemented new mode `preview`, capable of working with large JSON documents
up to 500 MiB.
- Repair button is now capable of turning MongoDB documents into valid JSON.
- Fixed #730: in `code` mode, there was an initial undo action which clears
the content.
- Upgraded dependencies `vanilla-picker@2.9.2`, `mobius1-selectr@2.4.13`,
`ajv@6.10.2`.
## 2019-06-22, version 6.1.0
- Implemented menu options `sort` and `transform` for modes `code` and `text`.
- Implemented new context menu item `extract`.
- Minor tweaks in the way paths are displayed in the sort and transform modals.
## 2019-06-12, version 6.0.0
- Breaking change: upgraded dependency `ajv@6.10.0`, supporting JSON schema
draft-07 alongside draft-06 and draft-04.
- Upgraded dependency `vanilla-picker@2.8.1`.
- Use JSON schema title as name for the root object if defined (see #635).
## 2019-06-08, version 5.34.0
- Extended the autocomplete feature with new options `filter` and `trigger`.
Thanks @Gcaufy.
- Removed :hover style on disabled buttons. Thanks @Gcaufy.
- Upgraded dependency `mobius1-selectr@2.4.12`.
## 2019-05-29, version 5.33.0
- Fixed #697: JSON Schema enum dropdown not working inside an array.
- Fixed #698: When using `onCreateMenu`, `node.path` is null when clicking
on an append node or when multiple nodes are selected.
- Upgraded dependencies to `mobius1-selectr@2.4.10`, `vanilla-picker@2.8.0`.
- Remove :hover style on disabled buttons. Thanks @Gcaufy.
## 2019-04-27, version 5.32.5
- Fixed a bug in the JMESPath query wizard which didn't correctly handle
selecting multiple fields.
- Fixed context menu not working when multiple nodes are selected.
## 2019-04-10, version 5.32.4
- Fixed #682 and #687: JSONEditor not being able to handle JSON schema
validation errors when the root of the document is an Array. Thanks @DusuWen.
## 2019-04-04, version 5.32.3
- Fixed #684: `const` used in bundled library.
## 2019-04-03, version 5.32.2
- Fixed #416: Clipped action menu for append nodes.
- Improve detection of value type in transform modal.
- Styling improvements in the transform modal.
- Fix CSS class for default/non-default schema values not applied to enums,
see (#666).
- Fixed #671: Improved handling of duplicate property names, which could cause
values to be cleared when used as a controlled component in for example React.
## 2019-03-28, version 5.32.1
- Fixed a regression in parsing JSON paths: numbers where parsed as strings
instead of a numeric value. See #679. Thanks @AdamVig.
- Fixed using hyphens in the path of custom validation errors (see #665).
Thanks @tobiasfriden.
## 2019-03-20, version 5.32.0
- Implemented support for reckoning with JSON schema default values: custom
styling can be applied for default and non-default values. Thanks @AdamVig.
- Fixed #667: resolving JSON Schema examples and descriptions did not always
work for referenced schemas. Thanks @AdamVig.
- Fixed #676: JSON Paths containing array properties with a `]` not parsed
correctly.
## 2019-03-14, version 5.31.1
- Fix IE11 issue.
- Some fixes in the Simplified Chinese translation.
Thanks @@adf0001 and @yuxizhe.
## 2019-03-10, version 5.31.0
- Display JSON schema examples in tooltip (#664). Thanks @AdamVig.
## 2019-03-02, version 5.30.0
- Implemented a new option `onCreateMenu` to customize the action menu.
Thanks @RobAley.
## 2019-02-20, version 5.29.1
- Fixed #661: JSONEditor broken on IE11 caused by duplicate JSON entries
in a translation.
## 2019-02-16, version 5.29.0
- Added Simplified Chinese localization. Thanks @long2ice.
- Added Turkish localization. Thanks @beratpostalci.
- Improved JSON schema titles on fields. Fixes #321. Thanks @AdamVig.
- Fixes in resolving JSON schemas, see #651. Thanks @AdamVig.
- Fix #657: `onClassName` throwing an error when a node is removed.
## 2019-01-23, version 5.28.2
- Fix #639: Occurrence of non-ES5 `const` declaration in published code.
Regression introduced in `v5.28.0`.
## 2019-01-22, version 5.28.1
- Fix #637: Vertical white border left/right from the main menu in some
specific circumstances.
- Fix #638: Cannot expand after collapse. Regression introduced in v5.28.0.
## 2019-01-21, version 5.28.0
- Implemented new option `maxVisibleChilds` to customize the maximum number
childs that is rendered by default. Thanks @20goto10.
- Implemented new option `onClassName`, allowing customized and dynamic
styling of nodes. See 20_custom_css_style_for_nodes.html for a demo.
Thanks @maestr0.
- Make the method `refresh()` public.
## 2019-01-16, version 5.27.1
- Improved navigating deeply nested paths via the navigation bar, see #619.
Thanks @meirotstein.
- Sdd title from schema description to show the tips for user input.
Thanks @tylerchen.
- Fix JSON Schema not resolving refs `$ref`, and not creating enum dropdowns.
Thanks @tylerchen.
## 2019-01-05, version 5.27.0
- Implemented customizing object and array names via a new option
`onNodeName`. Thanks @bnanchen.
- Visibility of schema validation errors at the bottom of mode code and text
are now toggleable. Thanks @meirotstein.
- Fixed text of the mode switcher not being translated. Thanks @antfu.
## 2018-12-06, version 5.26.3
- Fixed #610: JSON Repair now removes trailing commas.
- Upgraded devDependency `gulp` to v4. Thanks @maestr0.
## 2018-11-13, version 5.26.2
- Fixed dragging and selecting multiple nodes not working
(regression introduced in `v5.26.1`).
## 2018-11-13, version 5.26.1
- Fixed `.update()` throwing an exception when replacing a JSON object
with `null`. Thanks @DullReferenceException.
- Fixed #598: Search field can't be focused in object view.
## 2018-11-12, version 5.26.0
- Implemented option `mainMenuBar` to enable/disable the main menu bar.
Thanks @tanmayrajani.
## 2018-10-29, version 5.25.0
- Implemented options `enableSort` and `enableTransform` so you can turn off
these features. Thanks @tanmayrajani.
- Fixed #590: validation failing in code and text mode when status
bar is disabled.
- Fixed #589: the path in the navigation bar is not updated
when duplicating or removing a node, and neither after an undo/redo action.
- Fixed duplicate and remove of the action menu of multiple selected
nodes not working.
- Fixed not preventing default selection of text when selecting nodes.
- Fixed #595: navigation bar path link not working.
## 2018-10-08, version 5.24.7
- Fix #582: parse error annotations not always up to date in
code editor. Thanks @meirotstein.
## 2018-09-12, version 5.24.6
- Fix #548: `import JSONEditor from 'jsoneditor'` not working in
TypeScript projects (gave a constructor is undefined error).
## 2018-09-06, version 5.24.5
- Fixed a bug in textmode on IE 11, not loading the editor when
`Promise` is undefined.
## 2018-09-06, version 5.24.4
- Fixed #576: Visualization in mode `view` when an array
with more than 100 items is rendered.
- Fixed JSONEditor not working on IE11: continue and throw console
errors when `Promise` is undefined. Regression since `v5.23.0`.
- Fixed `onClose` of color picker not being fired when clicking outside
the picker to close it.
- Upgraded dependencies `brace`, `mobius1-selectr`, `vanilla-picker`.
- Upgraded devDependency `mocha`.
## 2018-08-29, version 5.24.3
- Fixed color picker not working in ES6 projects.
- Fixed color picker closing immediately after the first `onChange`
event, and `onChange` events are now debounced like all text inputs.
## 2018-08-27, version 5.24.2
- Improved error and validation messaging in `text` mode.
Thanks @meirotstein.
- Clicking a message now selects the line where the error occurs.
- Icon bottom right showing when there are warnings or errors.
- Fixed field still editable after moving a node from an object
to an array, changing the field from a property into an index.
## 2018-08-26, version 5.24.1
- Context menu and color picker are now absolutely positioned, and
can overflow the borders of the editor.
- Fixed #568: mode switcher disappearing when selecting the current
mode again.
- Fixed `transform` not creating/removing expand button when the type
of a node changed.
## 2018-08-22, version 5.24.0
- Implemented a color picker, and allow hooking in a custom color
picker. new options are `colorPicker` and `onColorPicker`.
- Implemented a timestamp tag displayed right from timestamps,
with corresponding option `timestampTag`.
## 2018-08-17, version 5.23.1
- Fixed #566: transform function broken, regression since `v5.20.0`.
## 2018-08-15, version 5.23.0
- Implemented support for custom validation using a new `onValidate` callback.
- In tree mode, nodes containing a validation error now have a className
`jsoneditor-validation-error` which can be used for custom styling.
## 2018-08-13, version 5.22.0
- Implemented `onEvent` callback triggered when an event occurs in a JSON
field or value. Thanks @cristinabarrantes.
## 2018-08-12, version 5.21.0
- Show validation errors inline instead of at the bottom when in code
mode. Thanks @meirotstein.
- Fix #562: allow `$` character in property names of of a JSON schema.
## 2018-08-10, version 5.20.0
_Good news: JSONEditor is finally framework friendly and can now be easily
integrated in React, Vue, and Angular!_
- Implemented new methods `update` and `updateText`, which maintain the state
of the editor (expanded nodes, search, selection). This makes it easy to
integrate in frameworks like React.
- Implemented options `onChangeJSON(json)` and `onChangeText(jsonString)`.
- Added two React examples to the `examples` folder.
- Fixed menu buttons "Sort" and "Transform" being available in modes `view`
and `form`.
## 2018-08-02, version 5.19.2
- Fixed #558: scrolling to search results and automatically scrolling up/down
when dragging an item broken (regression since v5.19.1).
## 2018-07-28, version 5.19.1
- Fixed #557: inner contents of the scrollable area being displayed outside of
the editor (on Chrome only).
## 2018-07-11, version 5.19.0
- No more grayed out icons of the context menu, see #532.
- Added Sort and Transform buttons to the main menu.
- Fixes and improvements in the Transform dialog.
## 2018-06-27, version 5.18.0
- Implemented JMESPath support for advanced filtering, sorting, and
transforming of JSON documents.
- Implemented a new option `modalAnchor` to control at which part of the
screen the modals are displayed.
- Fixed #544: JSON Schema errors sometimes not being displayed in the
editor.
## 2018-06-03, version 5.17.1
- Fixed a bug in a translation text.
## 2018-06-03, version 5.17.0
- Implemented advanced sorting for arrays.
## 2018-05-23, version 5.16.0
- Better handling of JSON documents containing large arrays:
- Only displays the first 100 items of large arrays,
with buttons "show more" and "show all" to render more items.
- Search results are now limited to max 1000 matches,
and search does no longer expand the paths to all matches
but only expands the path of the current search result.
- Fixed index numbers of Array items not being updated after sorting.
## 2018-05-02, version 5.15.0
- Implemented selection API: `onSelectionChanged`, `onTextSelectionChanged`,
`getSelection`, `getTextSelection`, `setSelection`, `setTextSelection`,
and `getNodesByRange`. Thanks @meirotstein.
## 2018-03-21, version 5.14.1
- Fixed absolute path of css image `jsoneditor-icons.svg`, which could.
give issues with webpack plugin "file-loader". Thanks @landru29.
## 2018-02-25, version 5.14.0
- Implemented support for translations. Thanks @mariohmol.
- Fixed a bug sometimes occurring when dragging items from array to
object, see #509. Thanks @43081j.
- Fixed autocomplete not accepting returned `null` values, see #512.
Thanks @43081j.
- Fixed memory inefficiency when working with large JSON Schema's
generating many errors. Thanks @43081j.
## 2018-02-07, version 5.13.3
- Fixed a positioning issue with JSON Schema errors in text/code mode.
## 2018-01-18, version 5.13.2
- Fixed view mode opening links in a new tab instead of current tab
when Ctrl key is not down. Thanks @LEW21.
- Fixed #502: code editor not showing a monospaced font some cases.
## 2017-12-28, version 5.13.1
- Fixed another occurrence of #494: properties not escaped in the
navigation bar.
## 2017-12-28, version 5.13.0
- Implemented cursor position in text mode. Thanks @meirotstein.
- Fixed #494: properties not escaped in the navigation bar.
Thanks @meirotstein.
## 2017-12-18, version 5.12.0
- Implemented #482: Include `caseSensitive` option for autocomplete.
Thanks @israelito3000.
- Upgraded dependencies
- `ajv@5.5.2`
## 2017-11-22, version 5.11.0
- Upgraded dependencies
- `ajv@5.4.0`
- `brace@0.11.0`
- Fixed dropdown for JSON Schema enums when defined inside pattern
properties. Thanks @alquist.
- Fixed code containing a non UTF-8 character. Thanks @alshakero.
## 2017-11-15, version 5.10.1
- Some styling tweaks in the navigation bar and status bar.
- Don't display status bar in `text` mode (which doesn't yet support
row and col counts).
## 2017-11-15, version 5.10.0
- Implemented a navigation bar showing the path. Thanks @meirotstein.
- Implemented a status bar showing cursor location.
Thanks @meirotstein.
- Implemented repairing JSON objects containing left and right single
and double quotes (which you get when typing a JSON object in Word)
in `text` and `code` mode.
- Implemented repairing JSON objects containing special white space
characters like non-breaking space.
- Upgraded dependency `ajv` to version `5.3.0`.
- Fixed #481: A polyfill required `DocumentType` which is not defined
in all environments.
## 2017-09-16, version 5.9.6
- Fixed displaying a dropdown for enums inside composite schemas.
Thanks @hachichaud.
- Fixed #461: Urls opening twice on Firefox and Safari.
## 2017-08-26, version 5.9.5
- Fixed a regression introduced in `v5.9.4`: after using the context
menu once, it was not possible to set focus to an other input field
anymore.
## 2017-08-20, version 5.9.4
- Fixed #447: context menus not working in Shadow DOM. Thanks @tomalec.
## 2017-07-24, version 5.9.3
- Fixed broken multi-selection (regression).
## 2017-07-13, version 5.9.2
- Fixed a bug in the JSON sanitizer.
## 2017-07-13, version 5.9.1
- `setText` method of tree mode now automatically sanitizes JSON input
when needed.
- Fixed #430: automatically fix unescaped control characters in
JSON input.
## 2017-07-10, version 5.9.0
- Implemented support for JSON schema references `$ref`, see #302.
Thanks @meirotstein.
- Fixed #429: JSONEditor no longer accepting an empty array for option
`modes`. Thanks @trystan2k.
- Fixed JSONEditor picking the first entry of `modes` as initial mode
instead of option `mode`.
## 2017-07-08, version 5.8.2
- Select first option from `modes` instead of `tree` when `mode` is not
configured. Thanks @bag-man.
- Some fixes and improvements in the API of autocompletion.
Thanks @israelito3000.
## 2017-07-03, version 5.8.1
- Fixed broken minified bundles in folder `dist` (again...).
## 2017-07-02, version 5.8.0
- Implemented support for autocompletion. Thanks @israelito3000.
## 2017-06-27, version 5.7.2
- Fixed broken minified bundles in folder `dist`
(reverted to `uglify-js@2.8.22` for now).
## 2017-06-25, version 5.7.1
- Upgraded dependency `ajv` to version `5.2.0`. Resolves warnings in
Webpack build processes.
## 2017-05-26, version 5.7.0
- Implemented support for template items. Thanks @israelito3000.
- Upgraded dependencies to the latest versions. Thanks @andreykaipov.
## 2017-04-15, version 5.6.0
- Implemented readonly option for modes `text` and `code.`
Thanks @walkerrandolphsmith.
- Upgraded dependencies (`brance` and `ajv`) to the latest versions.
- Fixed not being able to move focus to enum select box when clicking
a JSON Schema warning.
- Fixed #309: already loaded version of Ace being overwritten by the
embedded version of JSONEditor.
- Fixed #368: Mode selection drop down not fully visible on small screen.
- Fixed #253: Optimize the input experience of Chinese IME.
Thanks @chinesedfan.
## 2017-01-06, version 5.5.11
- Fixed embedded version of jsoneditor ace theme not being loaded in
minimalist version (see #55).
- Fixed a styling issue in the SearchBox of Ace editor (mode `code`).
- Fixed #347: CSS more robust against global settings of div position.
- Added docs and example on how to use a custom version of Ace editor.
## 2016-11-02, version 5.5.10
- Fixed #85: pressing enter in an input in a form containing a JSONEditor too
breaks submitting the form.
## 2016-10-17, version 5.5.9
- Fixed #329: Editor showing duplicate key warnings for keys defined on the
Object prototype, like `toString` and `watch`.
## 2016-09-27, version 5.5.8
- Fixed #314: JSON schema validation throwing an error "Unexpected token ' in
JSON at position 0" in specific cases. Thanks @apostrophest
## 2016-08-17, version 5.5.7
- Fixed #308: wrong positioning of label "empty array" when `onEditable`
returns false.
## 2016-06-15, version 5.5.6
- Fixed #303: editor contents collapsed when the parent div of the JSONEditor
has no height set.
- Improved example 04_load_and_save.html. Thanks @RDCH106.
## 2016-05-24, version 5.5.5
- Fixed #298: Switch mode button disappears when switching from text/code to
tree/form/view mode when the JSON contained errors.
- Fixed enum drop downs not working when the JSONEditor is configured with
a name.
## 2016-05-22, version 5.5.4
- Fixed #285: an issue with the enum drop down when having defined multiple
enums in a JSON schema.
- Fixed a (harmless) error in the console when clicking right from an enum
drop down.
## 2016-05-22, version 5.5.3
- Fixed #299: reverted the fix of #268 by trimming text in fields and values.
## 2016-04-18, version 5.5.2
- Fixed #294: Fields reset their caret location on every key press in Firefox.
## 2016-04-16, version 5.5.1
- Fixed enum select boxes not being rendered/removed when setting or removing
a JSON schema via `editor.setSchema(schema)`.
## 2016-04-16, version 5.5.0
- Implemented a dropdown for values having an JSON Schema enum.
Thanks @tdakanalis.
- Fixed #291, #292: Some CSS broken when using the editor in combination with
bootstrap. Thanks @nucleartide.
## 2016-04-09, version 5.4.0
- Upgraded all dependencies (`ajv`, `brace`, etc).
- Fixed #289: Some CSS breaking when using the editor in combination with
materialize.css or bootstrap.
- Fixed #290: `setText()` not working in mode text or code.
## 2016-04-06, version 5.3.0
- Implemented support for sorting object keys naturally. Thanks @edufelipe.
- Sorting object keys or array items via the context menu is now also naturally
sorted.
- Fixed #283: improved JSON schema error message in case of no
additionalProperties.
- Fixed #286: Calling `get()` or `getText()` caused the editor to lose focus.
A regression introduced in v5.2.0.
## 2016-03-20, version 5.2.0
- Implemented method `editor.destroy()` to properly cleanup the editor (#278).
- Fixed #268: JSONEditor now trims text in fields and values.
- Fixed #280: Some CSS issues when used in combination with bootstrap.
## 2016-02-15, version 5.1.5
- Fixed #272: Checkbox for boolean values visible in view mode.
## 2016-02-13, version 5.1.4
- Fixed broken example 04_load_and_save.html. See #265.
## 2016-02-03, version 5.1.3
- Fixed #264: Clicking items in the context menu not working on Firefox.
## 2016-01-21, version 5.1.2
- Improvements in sanitizing invalid JSON.
- Updated dependencies to the latest version.
- Fixed clicking format/compact not triggering an onChange event.
- Fixed #259: when having a JSONEditor inside an HTML form, clicking an entry
in the context menu did submit the form.
- Fixed browserify build, see #260. Thanks @onip.
## 2016-01-16, version 5.1.1
- Fixed #257: Improving error messages for enum errors failed when the
schema contains references.
- Fixed #255: Removed wrong console warning about the option `search`.
- Fixed error thrown when option `search` is false (see #256). Thanks @MiroHibler.
## 2016-01-14, version 5.1.0
- Implemented support for JSON schema validation, powered by `ajv`.
- Implemented #197: display an error in case of duplicate keys in an object.
- Implemented #183: display a checkbox left from boolean values, so you can
easily switch between true/false.
- Implemented debouncing of keyboard input, resulting in much less history
actions whilst typing.
- Added a minimalist bundle to the `dist` folder, excluding `ace` and `ajv`.
- Fixed #222: editor throwing `onChange` events when switching mode.
- Fixed an error throw when switching to mode "code" via the menu.
- Fixed interfering shortcut keys: changed quick keys to select multiple fields
from `Shift+Arrow Up/Down` to `Ctrl+Shift+Arrow Up/Down`.
## 2015-12-31, version 5.0.1
- Fixed a bug in positioning of the context menu for multiple selected nodes.
- Fixed #130: option `onEditable` not available in mode `form`.
- Fixed #202: removed `version` field from bower.json.
## 2015-12-31, version 5.0.0
- New design.
- Implemented selection of multiple nodes, allowing to move/duplicate/remove
multiple nodes at once (See #106).
- Implemented a new option `escapeUnicode`, which will show the hexadecimal
unicode instead of the character itself. (See #93 and #230).
- Implemented method `getMode`.
- Implemented option `onModeChange(oldMode, newMode)`.
- Implemented #203: Objects and arrays in mode `form` and `view` are now
expandable by clicking the field names too.
- Replaced the PNG icon images with SVG. Thanks @1j01.
- Renamed all CSS classes They now have prefixes `.jsoneditor-` to prevent
name collisions with css frameworks like bootstrap.
- Renamed options `change`, `editable`, `error` to respectively `onChange`,
`onEditable`, and `onError`. Old options are still working and give a
deprecation warning.
- Colors of values are now customizable using CSS.
- JSONEditor new throws a warning in the console in case of unknown options.
- Fixed #93 and #227: html codes like `&` not escaped.
- Fixed #149: Memory leak when switching mode from/to `code` mode, web worker
of Ace editor wasn't cleaned up.
- Fixed #234: Remove dependency on a fork of the `jsonlint` project on github.
- Fixed: disabled `Ctrl+L` quick key to go to a line, instead use the default
browser behavior of selecting the address bar.
- Fixed #38: clear search results after a new JSON object is set.
- Fixed #242: row stays highlighted when dragging outside editor.
- Fixed quick-keys Shift+Alt+Arrows not registering actions in history.
- Fixed #104: context menus are now positioned relative to the elements of the
editor instead of an absolute position in the window.
## 2015-06-13, version 4.2.1
- Fixed #161: Cannot select text in Ace editor on systems using Chinese fonts.
## 2015-05-14, version 4.2.0
- Implemented option `theme`, allowing to set a custom theme for the Ace
editor. Thanks @nfvs.
- Implemented option `ace`, which allows to pass a custom instance of the Ace
instead of the embedded version.
- Fixed #186: binding issue to `jsonlint.parse`.
- Fixed `editor.get()` manipulating the code when containing an error.
## 2015-03-15, version 4.1.1
- Added missing file `index.js` to the bower package.
## 2015-03-15, version 4.1.0
- Implemented a function `focus()` for modes tree, view, and form.
- Added `./src` folder to the distributed package, needed for usage via
node.js/browserify.
## 2015-02-28, version 4.0.0
- Ace editor and jsonlint are now packed with jsoneditor.js by default.
This makes the library about 4 times larger. If Ace is not needed, a custom
build of the library can be done.
- The distribution files are now moved from the root to the `/dist` folder.
- Reworked the source code to CommonJS modules, using `brace` to load Ace.
- JSONP is now automatically stripped from JSON. Thanks @yanivefraim.
- Fixed bugs in the JSON sanitizer, no longer manipulating JSON-like structures
inside strings.
## 2015-01-25, version 3.2.0
- Implemented shortcut keys `Ctrl+\` to format and `Ctrl+Shift+\` to compact
JSON when in mode `text` or `code`.
- Before an error is thrown because of invalid text, the editor first tries to
sanitize the text (replace JavaScript notation with JSON notation), and only
after that throws the error.
- Fixed Node.path() not working for a JSON Object `""`. Thanks @tomalec.
- Minor styling improvements.
- Fixed configured indentation not being applied to Ace editor.
## 2014-09-03, version 3.1.2
- Some fixes/improvements in `parseJS` (to parse a JSON object from a JavaScript
object).
- Fixed the lack of a semi colon at end of the bundled files.
## 2014-08-01, version 3.1.1
- Replaced parsing of JavaScript objects into JSON from `eval` to a dedicated
`parseJS` function.
## 2014-07-28, version 3.1.0
- JSONEditor now accepts JavaScript objects as input, and can turn them into
valid JSON. For example `{a:2,b:'str'}` can be turned into `{"a":2,"b":"str"}`.
- Implemented an option `editable`, a callback function, which allows to set
individual nodes (their field and/or value) editable or read-only.
- Fixed: shortcut keys to manipulate the nodes are now disabled when mode
is `form` or `view`.
## 2014-05-31, version 3.0.0
- Large code reorganization.
- Editor must be loaded as `new JSONEditor(...)` instead of
`new jsoneditor.JSONEditor(...)`.
- Css is not automatically loaded anymore when using AMD.
- Web application has been moved to another project.
## 2014-01-03, version 2.3.6
- Fixed positioning issue of the action menu.
## 2013-12-09, version 2.3.5
- Fixed a positioning issue of the action menu again.
- Fixed an issue with non-breaking space characters.
## 2013-11-19, version 2.3.4
- Dropped support for IE8, cleaned up legacy code for old browsers.
- Disabled saving files using HTML5 on Firefox to prevent a Firefox bug
blocking cut/paste functionality in editable divs after using a.download.
## 2013-10-17, version 2.3.3
- Added support for search (Ctrl+F) in the code editor Ace.
- Fixed a positioning issue of the action menu when in bootstrap modal.
(thanks tsash).
## 2013-09-26, version 2.3.2
- The web application is now available offline. Thanks ayanamist.
## 2013-09-24, version 2.3.1
- Fixed non-working action menu when in bootstrap modal (z-index issue).
- Fixed missing main field in package.json.
## 2013-09-13, version 2.3.0
- Implemented an option `modes`, which creates a menu in the editor
where the user can switch between the selected editor modes.
- Fixed wrong title on fields with value `null`.
- Fixed buggy loading of files in the web application.
## 2013-08-01, version 2.2.2
- Fixed non working option `indentation`.
- Fixed css not being loaded with AMD in case of multiple scripts.
- Fixed a security error in the server side file retriever script of
the web application.
## 2013-05-27, version 2.2.1
- Fixed undefined options in TextEditor. Thanks Wiseon3.
- Fixed non-working save function on Firefox 21. Thanks youxiachai.
## 2013-05-04, version 2.2.0
- Unified JSONFormatter and JSONEditor in one editor with a switchable mode.
- Urls are navigable now.
- Improved error and log handling.
- Added jsoneditor to package managers npm and bower.
## 2013-03-11, version 2.1.1
- Fixed an issue with console outputs on IE8, causing the editor not to work
at all on IE8.
## 2013-03-08, version 2.1.0
- Replaced the plain text editor with code editor Ace, which brings in syntax
highlighting and code inspection.
- Improved the splitter between the two panels. Panels can be hided.
## 2013-02-26, version 2.0.2
- Fixed: dragarea of the root node was wrongly visible is removed now.
## 2013-02-21, version 2.0.1
- Fixed undefined variable in the redo method.
- Removed the "hide ads" button. Not allowed by Google AdSense, sorry.
## 2013-02-09, version 2.0.0
- Implemented a context menu, replacing the action buttons on the right side of
the editor and the inline action buttons. This gives a cleaner interface,
more space for the actual contents, and more room for new controls (like
insert and sort).
- Implemented shortcut keys. The JSON Editor can be used with just a keyboard.
- Implemented sort action, which sorts the childs of an array or object.
- Implemented auto scrolling up and down when dragging a node and reaching
the top or bottom of the editor.
- Added support for CommonJS and RequireJS.
- Added more examples.
- Improved performance and memory usage.
- Implemented a new mode 'form', in which only values are editable and the
fields are fixed.
- Minor improvements and bug fixes.
## 2012-12-08, version 1.7.0
- Implemented two modes: 'editor' (default), and 'viewer'. In viewer mode,
the data and datastructure is read-only.
- Implemented methods set(json, name), setName(name), and getName(), which
allows for setting and getting the field name of the root node.
- Fixed an issue where the search bar does not work when there is no global
window.editor object.
## 2012-11-26, version 1.6.2
- Fixed a bug in the change callback handler, resulting in an infinite loop
when requesting the contents of the editor inside the callback (issue #19).
## 2012-11-21, version 1.6.1
- Added a request header "Accept: application/json" when loading files and urls.
## 2012-11-03, version 1.6.0
- Added feature to the web application to load and save files from disk and url.
- Improved error messages in the web application using JSONLint.
- Made the web application pass the W3C markup validation service.
- Added option 'change' to both editor and formatter, which allows to set a
callback which is triggered when the contents of the editor or formatter
changes.
- Changed the default indentation of the JSONFormatter to 4 spaces.
- Renamed options 'enableSearch' and 'enableHistory' to 'search' and 'history'
respectively.
- Added parameter 'json' to the JSONFormatter constructor.
- Added option 'indentation' to the JSONFormatter.
## 2012-10-08, version 1.5.1
- Replaced the paid Chrome App with a free, hosted Chrome App (with ads).
## 2012-10-02, version 1.5.0
- Implemented history: undo/redo all actions.
- Created menu icons (instead of text buttons).
- Cleaned up the code (removed unused params, improved comments, etc).
- Minor performance improvements.
## 2012-08-31, version 1.4.4
- Changed: description of advertisement now gives information about the Chrome
App (without ads).
- Changed: Chrome App is now configured to be available offline.
- Fixed: When zooming your browser window, the fields/values did get wrapped
on Chrome (thanks Henri Gourvest), and on Firefox sometimes the jsoneditor
disappeared due to wrapping of the interface contents.
## 2012-08-25, version 1.4.3
- Changed: changed code for the buttons to copy from formatter to editor and
vice versa, no inline javascript (gives security policy errors in chrome app).
## 2012-08-25, version 1.4.2
- Changed: other bootstrapping mechanism for the chrome app, in a separate
javascript file, as inline javascript is not allowed (security policy).
- Fixed: drop down menu for changing the field type did throw javascript errors
(did not break any functionality though).
## 2012-08-23, version 1.4.1
- New: Chrome app created.
## 2012-08-23, version 1.4.0
- New: Improved icon, logo, and interface header.
## 2012-08-19, version 1.3.0
- New: Added buttons next and previous to the search box in the upper right.
- New: Escape characters are automatically inserted before " and \ missing
and escape character, making the string contents valid JSON. New lines are
automatically replaced with \n. (Thanks Steve Clay)
- Changed: all icons have been put in a single sprite. This will improve page
load times as there are much less server requests needed to load the editor.
## 2012-08-12, version 1.2.0
- New: Added search functionality. Search results are expanded and highlighted.
Quickkeys in the search box: Enter (next), Shift+Enter (previous), Ctrl+Enter
(search again).
- New: The position of the vertical separator between left and right panel is
stored.
- New: Link to the sourcecode on github added at the bottom of the page.
- Changed: Refinements in the layout: fonts, colors, icons.
- Fixed: leading an trailing spaces not being displayed in the editor.
- Fixed: wrapping of long words and urls in Chrome.
- Fixed: ignoring functions and undefined values in the loaded JSON object
(they where interpreted as empty object and string instead of being ignored).
## 2012-07-01, version 1.1.1
- Fixed global event listener for the focus/blur events, causing changes in
fields and values not always being registered.
- Fixed a css issue with Firefox (box-sizing of the editor).
## 2012-04-24, version 1.1
- Fixed a bug. Dragging an object down which has been expanded and collapsed
again did not work.
- Using a minified version of jsoneditor.js, to improve page load time and
save bandwidth.
## 2012-04-21, version 1.0
- Values are no longer aligned in one global column, but placed directly right
from the field. Having field and value close together improves readability,
especially in case of deeply nested data.
- Values are colorized by their type: strings are green, values read, booleans
blue, and null is purple.
- Font is changed to a monotype font for better readability.
- Special characters like \t are now handled nicely.
- Overall performance and memory usage improved.
- When clicking on whitespace, focus is set to the closest field or value.
- some other small interface tweaks.
- Fixed a bug with casting a value from type auto to string and vice versa
(the value was not casted at all).
## 2012-03-01, version 0.9.10
- Nicer looking select box for the field types, with icons.
- Improved drag and drop: better visualized, and now working in all browsers.
- Previous values will be restored after changing the type of a field. When
changing the type back, the previous value or childs will be restored.
- When hovering buttons (fieldtype, duplicate, delete, add) or when dragging
a field, corresponding field including its childs is highlighted. This makes
it easier to see what part of the data will be edited.
- Errors are now displayed in a message window on top of the page instead of
an alert which pops up.
- Fixed a bug with displaying enters in fields.
- Fixed a bug where the last trailing enter was removed when setting json
in the editor.
- Added a fix to get around Internet Explorer 8 issues with vertical scrollbars.
## 2012-01-29, version 0.9.9
- Fields can be duplicated
- Support for drag and drop:
- fields in the editor itself can be moved via drag and drop
- fields can be exported from the editor as JSON
- external JSON can be dropped inside the editor
- When changing type from array to object and vice versa, childs will be
maintained instead of removed.
- Updated interface. Works now in IE8 too.
## 2012-01-16, version 0.9.8
- Improved the performance of expanding a node with all its childs.
## 2012-01-09, version 0.9.7
- Added functionality to expand/collapse a node and all its childs. Click
the expand button of a node while holding Ctrl down.
- Small interface improvements
## 2011-11-28, version 0.9.6
- First fully usable version of the JSON editor
================================================
FILE: LICENSE
================================================
Apache License
Version 2.0, January 2004
http://www.apache.org/licenses/
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
1. Definitions.
"License" shall mean the terms and conditions for use, reproduction,
and distribution as defined by Sections 1 through 9 of this document.
"Licensor" shall mean the copyright owner or entity authorized by
the copyright owner that is granting the License.
"Legal Entity" shall mean the union of the acting entity and all
other entities that control, are controlled by, or are under common
control with that entity. For the purposes of this definition,
"control" means (i) the power, direct or indirect, to cause the
direction or management of such entity, whether by contract or
otherwise, or (ii) ownership of fifty percent (50%) or more of the
outstanding shares, or (iii) beneficial ownership of such entity.
"You" (or "Your") shall mean an individual or Legal Entity
exercising permissions granted by this License.
"Source" form shall mean the preferred form for making modifications,
including but not limited to software source code, documentation
source, and configuration files.
"Object" form shall mean any form resulting from mechanical
transformation or translation of a Source form, including but
not limited to compiled object code, generated documentation,
and conversions to other media types.
"Work" shall mean the work of authorship, whether in Source or
Object form, made available under the License, as indicated by a
copyright notice that is included in or attached to the work
(an example is provided in the Appendix below).
"Derivative Works" shall mean any work, whether in Source or Object
form, that is based on (or derived from) the Work and for which the
editorial revisions, annotations, elaborations, or other modifications
represent, as a whole, an original work of authorship. For the purposes
of this License, Derivative Works shall not include works that remain
separable from, or merely link (or bind by name) to the interfaces of,
the Work and Derivative Works thereof.
"Contribution" shall mean any work of authorship, including
the original version of the Work and any modifications or additions
to that Work or Derivative Works thereof, that is intentionally
submitted to Licensor for inclusion in the Work by the copyright owner
or by an individual or Legal Entity authorized to submit on behalf of
the copyright owner. For the purposes of this definition, "submitted"
means any form of electronic, verbal, or written communication sent
to the Licensor or its representatives, including but not limited to
communication on electronic mailing lists, source code control systems,
and issue tracking systems that are managed by, or on behalf of, the
Licensor for the purpose of discussing and improving the Work, but
excluding communication that is conspicuously marked or otherwise
designated in writing by the copyright owner as "Not a Contribution."
"Contributor" shall mean Licensor and any individual or Legal Entity
on behalf of whom a Contribution has been received by Licensor and
subsequently incorporated within the Work.
2. Grant of Copyright License. Subject to the terms and conditions of
this License, each Contributor hereby grants to You a perpetual,
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
copyright license to reproduce, prepare Derivative Works of,
publicly display, publicly perform, sublicense, and distribute the
Work and such Derivative Works in Source or Object form.
3. Grant of Patent License. Subject to the terms and conditions of
this License, each Contributor hereby grants to You a perpetual,
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
(except as stated in this section) patent license to make, have made,
use, offer to sell, sell, import, and otherwise transfer the Work,
where such license applies only to those patent claims licensable
by such Contributor that are necessarily infringed by their
Contribution(s) alone or by combination of their Contribution(s)
with the Work to which such Contribution(s) was submitted. If You
institute patent litigation against any entity (including a
cross-claim or counterclaim in a lawsuit) alleging that the Work
or a Contribution incorporated within the Work constitutes direct
or contributory patent infringement, then any patent licenses
granted to You under this License for that Work shall terminate
as of the date such litigation is filed.
4. Redistribution. You may reproduce and distribute copies of the
Work or Derivative Works thereof in any medium, with or without
modifications, and in Source or Object form, provided that You
meet the following conditions:
(a) You must give any other recipients of the Work or
Derivative Works a copy of this License; and
(b) You must cause any modified files to carry prominent notices
stating that You changed the files; and
(c) You must retain, in the Source form of any Derivative Works
that You distribute, all copyright, patent, trademark, and
attribution notices from the Source form of the Work,
excluding those notices that do not pertain to any part of
the Derivative Works; and
(d) If the Work includes a "NOTICE" text file as part of its
distribution, then any Derivative Works that You distribute must
include a readable copy of the attribution notices contained
within such NOTICE file, excluding those notices that do not
pertain to any part of the Derivative Works, in at least one
of the following places: within a NOTICE text file distributed
as part of the Derivative Works; within the Source form or
documentation, if provided along with the Derivative Works; or,
within a display generated by the Derivative Works, if and
wherever such third-party notices normally appear. The contents
of the NOTICE file are for informational purposes only and
do not modify the License. You may add Your own attribution
notices within Derivative Works that You distribute, alongside
or as an addendum to the NOTICE text from the Work, provided
that such additional attribution notices cannot be construed
as modifying the License.
You may add Your own copyright statement to Your modifications and
may provide additional or different license terms and conditions
for use, reproduction, or distribution of Your modifications, or
for any such Derivative Works as a whole, provided Your use,
reproduction, and distribution of the Work otherwise complies with
the conditions stated in this License.
5. Submission of Contributions. Unless You explicitly state otherwise,
any Contribution intentionally submitted for inclusion in the Work
by You to the Licensor shall be under the terms and conditions of
this License, without any additional terms or conditions.
Notwithstanding the above, nothing herein shall supersede or modify
the terms of any separate license agreement you may have executed
with Licensor regarding such Contributions.
6. Trademarks. This License does not grant permission to use the trade
names, trademarks, service marks, or product names of the Licensor,
except as required for reasonable and customary use in describing the
origin of the Work and reproducing the content of the NOTICE file.
7. Disclaimer of Warranty. Unless required by applicable law or
agreed to in writing, Licensor provides the Work (and each
Contributor provides its Contributions) on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
implied, including, without limitation, any warranties or conditions
of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
PARTICULAR PURPOSE. You are solely responsible for determining the
appropriateness of using or redistributing the Work and assume any
risks associated with Your exercise of permissions under this License.
8. Limitation of Liability. In no event and under no legal theory,
whether in tort (including negligence), contract, or otherwise,
unless required by applicable law (such as deliberate and grossly
negligent acts) or agreed to in writing, shall any Contributor be
liable to You for damages, including any direct, indirect, special,
incidental, or consequential damages of any character arising as a
result of this License or out of the use or inability to use the
Work (including but not limited to damages for loss of goodwill,
work stoppage, computer failure or malfunction, or any and all
other commercial damages or losses), even if such Contributor
has been advised of the possibility of such damages.
9. Accepting Warranty or Additional Liability. While redistributing
the Work or Derivative Works thereof, You may choose to offer,
and charge a fee for, acceptance of support, warranty, indemnity,
or other liability obligations and/or rights consistent with this
License. However, in accepting such obligations, You may act only
on Your own behalf and on Your sole responsibility, not on behalf
of any other Contributor, and only if You agree to indemnify,
defend, and hold each Contributor harmless for any liability
incurred by, or claims asserted against, such Contributor by reason
of your accepting any such warranty or additional liability.
END OF TERMS AND CONDITIONS
================================================
FILE: NOTICE
================================================
JSON Editor
https://github.com/josdejong/jsoneditor
Copyright (C) 2011-2026 Jos de Jong
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
================================================
FILE: README.md
================================================
# JSON Editor
[](https://www.npmjs.com/package/jsoneditor)
[](https://www.npmjs.com/package/jsoneditor)
[](https://github.com/josdejong/jsoneditor/pulse)
[](https://github.com/josdejong/jsoneditor/blob/master/LICENSE)
[](https://app.fossa.io/projects/git%2Bgithub.com%2Fjosdejong%2Fjsoneditor?ref=badge_shield)
JSON Editor is a web-based tool to view, edit, format, and validate JSON. It has various modes such as a tree editor, a code editor, and a plain text editor. The editor can be used as a component in your own web application. It can be loaded as CommonJS module, AMD module, or as a regular javascript file.
The library was originally developed as core component of the popular web application https://jsoneditoronline.org and has been open sourced since then.
Supported browsers: Chrome, Firefox, Safari, Edge.
<img alt="json editor" src="https://raw.github.com/josdejong/jsoneditor/master/misc/jsoneditor.png"> <img alt="code editor" src="https://raw.github.com/josdejong/jsoneditor/master/misc/codeeditor.png">
Continuous integration tests are run on [GitHub Actions](https://github.com/josdejong/mathjs/actions), and [LambdaTest](https://www.lambdatest.com) is used to test on all major browsers.
[](https://www.lambdatest.com)
Thanks, GitHub Actions and LambdaTest for the generous support for this open source project!
## Successor: svelte-jsoneditor
This library [`jsoneditor`](https://github.com/josdejong/jsoneditor) has a successor: [`svelte-jsoneditor`](https://github.com/josdejong/svelte-jsoneditor). The new editor is not a one-to-one replacement, so there may be reasons to stick with `jsoneditor`.
The main differences between the two [are described here](https://github.com/josdejong/svelte-jsoneditor#differences-between-josdejongsvelte-jsoneditor-and-josdejongjsoneditor).
## Features
JSONEditor has various modes, with the following features.
### Tree mode
- Change, add, move, remove, and duplicate fields and values.
- Sort arrays and objects.
- Transform JSON using [JMESPath](http://jmespath.org/) queries.
- Colorized code.
- Color picker.
- Search & highlight text in the tree view.
- Undo and redo all actions.
- JSON schema validation (powered by [ajv](https://github.com/epoberezkin/ajv)).
### Code mode
- Colorized code (powered by [Ace](https://ace.c9.io)).
- Inspect JSON (powered by [Ace](https://ace.c9.io)).
- Format and compact JSON.
- Repair JSON.
- JSON schema validation (powered by [ajv](https://github.com/epoberezkin/ajv)).
### Text mode
- Format and compact JSON.
- Repair JSON.
- JSON schema validation (powered by [ajv](https://github.com/epoberezkin/ajv)).
### Preview mode
- Handle large JSON documents up to 500 MiB.
- Transform JSON using [JMESPath](http://jmespath.org/) queries.
- Format and compact JSON.
- Repair JSON.
- JSON schema validation (powered by [ajv](https://github.com/epoberezkin/ajv)).
## Documentation
- Documentation:
- [API](https://github.com/josdejong/jsoneditor/tree/master/docs/api.md)
- [Usage](https://github.com/josdejong/jsoneditor/tree/master/docs/usage.md)
- [Shortcut keys](https://github.com/josdejong/jsoneditor/tree/master/docs/shortcut_keys.md)
- [Examples](https://github.com/josdejong/jsoneditor/tree/master/examples)
- [Source](https://github.com/josdejong/jsoneditor)
- [History](https://github.com/josdejong/jsoneditor/blob/master/HISTORY.md)
## Install
with npm (recommended):
npm install jsoneditor
Alternatively, you can use another JavaScript package manager like https://yarnpkg.com/, or a CDN such as https://cdnjs.com/ or https://www.jsdelivr.com/.
## Use
> Note that in the following example, you'll have to change the urls `jsoneditor/dist/jsoneditor.min.js` and `jsoneditor/dist/jsoneditor.min.css` to match the place where you've downloaded the library, or fill in the URL of the CDN you're using.
```html
<!DOCTYPE HTML>
<html lang="en">
<head>
<!-- when using the mode "code", it's important to specify charset utf-8 -->
<meta charset="utf-8">
<link href="jsoneditor/dist/jsoneditor.min.css" rel="stylesheet" type="text/css">
<script src="jsoneditor/dist/jsoneditor.min.js"></script>
</head>
<body>
<div id="jsoneditor" style="width: 400px; height: 400px;"></div>
<script>
// create the editor
const container = document.getElementById("jsoneditor")
const options = {}
const editor = new JSONEditor(container, options)
// set json
const initialJson = {
"Array": [1, 2, 3],
"Boolean": true,
"Null": null,
"Number": 123,
"Object": {"a": "b", "c": "d"},
"String": "Hello World"
}
editor.set(initialJson)
// get json
const updatedJson = editor.get()
</script>
</body>
</html>
```
## Build
The code of the JSON Editor is located in the folder `./src`. To build
jsoneditor:
- Install dependencies:
```
npm install
```
- Build JSON Editor:
```
npm run build
```
This will generate the files `./jsoneditor.js`, `./jsoneditor.css`, and
minified versions in the dist of the project.
- To automatically build when a source file has changed:
```
npm start
```
This will update `./jsoneditor.js` and `./jsoneditor.css` in the dist folder
on every change, but it will **NOT** update the minified versions as that's
an expensive operation.
## Test
Run unit tests:
```
npm test
```
Run code linting ([JavaScript Standard Style](https://standardjs.com/)):
```
npm run lint
```
## License
`jsoneditor` is released as open source under the permissive the [Apache 2.0 license](LICENSE.md).
**If you are using jsoneditor commercially, there is a _social_ (but no legal) expectation that you help fund its maintenance. [Start here](https://github.com/sponsors/josdejong).**
================================================
FILE: SECURITY.md
================================================
# Security Policy
## Reporting a Vulnerability
Please report (suspected) security vulnerabilities privately to one of the maintainers of the library, for example to Jos de Jong: https://github.com/josdejong.
================================================
FILE: docs/api.md
================================================
# API Reference
## JSONEditor
### Constructor
#### `JSONEditor(container [, options [, json]])`
Constructs a new JSONEditor.
*Parameters:*
- `{Element} container`
An HTML DIV element. The JSONEditor will be created inside this container element.
- `{Object} options`
Optional object with options. The available options are described under
[Configuration options](#configuration-options).
- `{JSON} json`
Initial JSON data to be loaded into the JSONEditor. Alternatively, the method `JSONEditor.set(json)` can be used to load JSON data into the editor.
*Returns:*
- `{JSONEditor} editor`
New instance of a JSONEditor.
### Configuration options
- `{Object} ace`
Provide a custom version of the [Ace editor](http://ace.c9.io/) and use this instead of the version that comes embedded with JSONEditor. Only applicable when `mode` is `code`.
When providing your own instance of Ace editor, be aware that JSONEditor assumes the following Ace plugins to be loaded: `mode-json`, `worker-json`, `ext-searchbox`, `ext-language_tools`.
Note that when using the minimalist version of JSONEditor (which has Ace excluded), JSONEditor will try to load the Ace plugins `ace/mode/json` and `ace/ext/searchbox`. These plugins must be loaded beforehand or be available in the folder of the Ace editor.
- `{Object} ajv`
Provide a custom instance of [ajv](https://github.com/epoberezkin/ajv), the
library used for JSON schema validation. Example:
```js
var options = {
ajv: Ajv({
allErrors: true,
verbose: true,
jsonPointers: false,
$data: true
})
}
```
> IMPORTANT: JSONEditor relies on some specific configuration of Ajv.
> Providing different configuration (like `jsonPointers: true` instead of `false`)
> results in JSONEditor breaking because the format of the Ajv errors differs
> from what is expected.
- `{function} onChange()`
Set a callback function triggered when the contents of the JSONEditor change.
This callback does not pass the changed contents, use `get()` or `getText()` for that.
Note that `get()` can throw an exception in mode `text`, `code`, or `preview`, when the editor contains invalid JSON.
Will only be triggered on changes made by the user, not in case of programmatic changes via the functions `set`, `setText`, `update`, or `updateText`.
See also callback functions `onChangeJSON(json)` and `onChangeText(jsonString)`.
- `{function} onChangeJSON(json)`
Set a callback function triggered when the contents of the JSONEditor change.
Passes the changed JSON document.
Only applicable when option `mode` is `tree`, `form`, or `view`.
The callback will only be triggered on changes made by the user, not in case of programmatic changes via the functions `set`, `setText`, `update`, or `updateText`.
Also see the callback function `onChangeText(jsonString)`.
- `{function} onChangeText(jsonString)`
Set a callback function triggered when the contents of the JSONEditor change.
Passes the changed JSON document inside a string (stringified).
The callback will only be triggered on changes made by the user, not in case of programmatic changes via the functions `set`, `setText`, `update`, or `updateText`.
Also see the callback function `onChangeJSON(json)`.
- `{function} onClassName({ path, field, value })`
Set a callback function to add custom CSS classes to the rendered nodes. Only applicable when option `mode` is `tree`, `form`, or `view`.
The callback is invoked with an object containing `path`, `field` and `value`:
```
{
path: string[],
field: string,
value: string
}
```
The function must either return a string containing CSS class names, or return `undefined` in order to do nothing for a specific node.
In order to update css classes when they depend on external state, you can call `editor.refresh()`.
- `{function} onExpand({ path, isExpand, recursive })`
Set a callback function to be invoked when a node is expanded/collapsed (not programtically via APIs). Only applicable when option `mode` is `tree`, `form`, or `view`.
The callback is invoked with an object containing `path`, `isExpand` and `recursive`:
```
{
path: string[],
isExpand: boolean,
recursive: boolean
}
```
- `{function} onEditable({ path, field, value })`
Set a callback function to determine whether individual nodes are editable or read-only. Only applicable when option `mode` is `tree`, `text`, or `code`.
In case of mode `tree`, the callback is invoked as `editable(node)`, where the first parameter is an object:
```
{
field: string,
value: string,
path: string[]
}
```
The function must either return a boolean value to set both the nodes field and value editable or read-only, or return an object `{field: boolean, value: boolean}` to set set the read-only attribute for field and value individually.
In modes `text` and `code`, the callback is invoked as `editable(node)` where `node` is an empty object (no field, value, or path). In that case the function can return false to make the text or code editor completely read-only.
- `{function} onError(error)`
Set a callback function triggered when an error occurs. Invoked with the error as first argument. The callback is only invoked
for errors triggered by a users action, like switching from code mode to tree mode or clicking the Format button whilst the editor doesn't contain valid JSON. When not defined, a basic alert with the error message will be opened.
- `{function} onModeChange(newMode, oldMode)`
Set a callback function triggered right after the mode is changed by the user. Only applicable when
the mode can be changed by the user (i.e. when option `modes` is set).
- `{function} onNodeName({ path, type, size, value })`
Customize the name of object and array nodes. By default the names are brackets with the number of childs inside,
like `{5}` and `[32]`. The number inside can be customized. using `onNodeName`.
The first parameter is an object containing the following properties:
```
{
path: string[],
type: 'object' | 'array',
size: number,
value: object
}
```
The `onNodeName` function should return a string containing the name for the node. If nothing is returned,
the size (number of childs) will be displayed.
- `{function} onValidate(json)`
Set a callback function for custom validation. Available in all modes.
On a change of the JSON, the callback function is invoked with the changed data. The function should return
an array with errors or null if there are no errors. The function can also return a `Promise` resolving with
the errors retrieved via an asynchronous validation (like sending a request to a server for validation).
The returned errors must have the following structure: `{path: Array.<string | number>, message: string}`.
Example:
```js
var options = {
onValidate: function (json) {
var errors = [];
if (json && json.customer && !json.customer.address) {
errors.push({
path: ['customer'],
message: 'Required property "address" missing.'
});
}
return errors;
}
}
```
Also see the option `schema` for JSON schema validation.
- `{function} onValidationError(errors: ValidationError[])`
Set a callback function for validation and parse errors. Available in all modes.
The `ValidationError` contains a `type`, and an `error` object.
On validation of the json, if errors of any kind were found this callback is invoked with the errors data.
On change, the callback will be invoked only if errors were changed.
See also method `JSONEditor.validate()`.
Example:
```js
var options = {
/**
* @param {Array} errors validation errors
*/
onValidationError: function (errors) {
errors.forEach((error) => {
switch (error.type) {
case 'validation': // schema validation error
...
break;
case 'customValidation': // custom validation error
...
break;
case 'error': // json parse error
...
break;
...
}
});
...
}
}
```
- `{function} onCreateMenu(items, node)`
Customize context menus in tree mode.
Sets a callback function to customize the context menu in tree mode. Each time the user clicks on the context menu button, an array of menu items is created. If this callback is configured, the array with menu items is passed to this function. The menu items can be customized in this function in any aspect of these menu items, including deleting them and/or adding new items. The function should return the final array of menu items to be displayed to the user.
Each menu item is represented by an object, which may also contain a submenu array of items. See the source code of example 21 in the examples folder for more info on the format of the items and submenu objects.
The second argument `node` is an object containing the following properties:
```
{
type: 'single' | 'multiple' | 'append'
path: Array,
paths: Array with paths
}
```
The property `path` containing the path of the node, and `paths` contains the same path or in case there are multiple selected nodes it contains the paths of all selected nodes.
When the user opens the context menu of an append node (in an empty object or array), the `type` will be `'append'` and the `path` will contain the path of the parent node.
- `{boolean} escapeUnicode`
If `true`, unicode characters are escaped and displayed as their hexadecimal code (like `\u260E`) instead of the character itself (like `☎`). `false` by default.
- `{boolean} sortObjectKeys`
If `true`, object keys in 'tree', 'view' or 'form' mode list be listed alphabetically instead by their insertion order. Sorting is performed using a natural sort algorithm, which makes it easier to see objects that have string numbers as keys. `false` by default.
- `{boolean} limitDragging`
If `false`, nodes can be dragged from any parent node to any other parent node. If `true`, nodes can only be dragged inside the same parent node, which effectively only allows reordering of nodes. By default, `limitDragging` is `true` when no JSON `schema` is defined, and `false` otherwise.
- `{boolean} history`
Enables history, adds a button Undo and Redo to the menu of the JSONEditor. `true` by default. Only applicable when `mode` is `'tree'`, `'form'`, or `'preview'`.
- `{String} mode`
Set the editor mode. Available values: 'tree' (default), 'view', 'form', 'code', 'text', 'preview'. In 'view' mode, the data and datastructure is read-only. In 'form' mode, only the value can be changed, the data structure is read-only. Mode 'code' requires the Ace editor to be loaded on the page. Mode 'text' shows the data as plain text.
The 'preview' mode can handle large JSON documents up to 500 MiB. It shows a preview of the data, and allows to
transform, sort, filter, format, or compact the data.
- `{String[]} modes`
Create a box in the editor menu where the user can switch between the specified modes. Available values: see option `mode`.
- `{String} name`
Initial field name for the root node, is `undefined` by default. Can also be set using `JSONEditor.setName(name)`. Only applicable when `mode` is 'tree', 'view', or 'form'.
- `{Object} schema`
Validate the JSON object against a JSON schema. A JSON schema describes the
structure that a JSON object must have, like required properties or the type
that a value must have.
See [http://json-schema.org/](http://json-schema.org/) for more information.
Also see the option `onValidate` for custom validation.
- `{Object} schemaRefs`
Schemas that are referenced using the `$ref` property from the JSON schema that are set in the `schema` option,
the object structure in the form of `{reference_key: schemaObject}`
- `{boolean} allowSchemaSuggestions`
Enables autocomplete suggestions based on the JSON schema. `false` by default. when enabled and schema is configured, the editor will suggest text completions based on the schema properties, examples and enums.
**limitation**: the completions will be presented only for a valid json.
Only applicable when `mode` is 'code'.
- `{boolean} search`
Enables a search box in the upper right corner of the JSONEditor. `true` by default. Only applicable when `mode` is 'tree', 'view', or 'form'.
- `{Number} indentation`
Number of indentation spaces. `2` by default. Only applicable when `mode` is 'code', 'text', or 'preview'.
- `{String} theme`
Set the Ace editor theme, uses included 'ace/theme/jsoneditor' by default. Please note that only the default theme is included with JSONEditor, so if you specify another one you need to make sure it is loaded.
- `{Object} templates`
Array of templates that will appear in the context menu, Each template is a json object precreated that can be added as a object value to any node in your document.
The following example allow you can create a "Person" node and a "Address" node, each one will appear in your context menu, once you selected the whole json object will be created.
```js
var options = {
templates: [
{
text: 'Person',
title: 'Insert a Person Node',
className: 'jsoneditor-type-object',
field: 'PersonTemplate',
value: {
'firstName': 'John',
'lastName': 'Do',
'age': 28
}
},
{
text: 'Address',
title: 'Insert a Address Node',
field: 'AddressTemplate',
value: {
'street': "",
'city': "",
'state': "",
'ZIP code': ""
}
}
]
}
```
- `{Object} autocomplete`
*autocomplete* will enable this feature in your editor in tree mode, the object have the following **subelements**:
- `{string} filter`
- `{Function} filter`
Indicate the filter method of the autocomplete. Default to `start`.
- `start` : Match your input from the start, e.g. `ap` match `apple` but `pl` does not.
- `contain` : Contain your input or not, e.g. `pl` match `apple` too.
- Custom Function : Define custom filter rule with signature `function(token, match, config)`. The `match` parameter can be either a string or an object with `text` and `value` properties. Return `true` if the option matches the input token.
- `{string} trigger`
Indicate the way to trigger autocomplete menu. Default to `keydown`
- `keydown` : When you type something in the field or value, it will trigger autocomplete.
- `focus` : When you focus in the field or value, it will trigger the autocomplete.
- `{number[]} confirmKeys`
Indicate the KeyCodes for trigger confirm completion, by default those keys are: `[39, 35, 9]` which are the code for [right, end, tab]
- `{boolean} caseSensitive`
Indicate if the autocomplete is going to be strict case-sensitive to match the options.
- `{Function} getOptions (text: string, path: string[], input: string, editor: JSONEditor)`
This function will return your possible options for create the autocomplete selection, you can control dynamically which options you want to display according to the current active editing node.
*Parameters:*
- `text` : The text in the current node part. (basically the text that the user is editing)
- `path` : The path of the node that is being edited as an array with strings.
- `input` : Can be "field" or "value" depending if the user is editing a field name or a value of a node.
- `editor` : The editor instance object that is being edited.
*Returns:*
- Can return an array with autocomplete options. Options can be either strings (e.g. `['apple','cranberry','raspberry','pie']`) or objects with `text` and `value` properties (e.g. `[{text: 'Apple', value: 'apple'}, {text: 'Cranberry', value: 'cranberry'}]`)
- Can return `null` when there are no autocomplete options.
- Can return an object `{startFrom: number, options: (string|object)[]}`. Here `startFrom` determines the start character from where the existing text will be replaced. `startFrom` is `0` by default, replacing the whole text. Options can be strings or objects as described above.
- Can return a `Promise` resolving one of the return types above to support asynchronously retrieving a list with options.
- `{boolean} mainMenuBar`
Adds main menu bar - Contains format, sort, transform, search etc. functionality. `true` by default. Applicable in all types of `mode`.
- `{boolean} navigationBar`
Adds navigation bar to the menu - the navigation bar visualize the current position on the tree structure as well as allows breadcrumbs navigation. `true` by default. Only applicable when `mode` is 'tree', 'form' or 'view'.
- `{boolean} statusBar`
Adds status bar to the bottom of the editor - the status bar shows the cursor position and a count of the selected characters. `true` by default. Only applicable when `mode` is 'code', 'text', or 'preview'.
- `{boolean} | {Array} showErrorTable`
Automatically expand error table above the status bar on error or validation error if `mode` matches an array item. Alternatively used as a boolean value. Default value is `['text', 'preview']`.
- `{function} onTextSelectionChange(start, end, text)`
Set a callback function triggered when a text is selected in the JSONEditor.
callback signature should be:
```js
/**
* @param {{row:Number, column:Number}} start Selection start position
* @param {{row:Number, column:Number}} end Selected end position
* @param {String} text selected text
*/
function onTextSelectionChange(start, end, text) {
...
}
```
Only applicable when `mode` is 'code' or 'text'.
- `{function} onSelectionChange(start, end)`
Set a callback function triggered when Nodes are selected in the JSONEditor.
callback signature should be:
```js
/**
* @typedef {{value: String|Object|Number|Boolean, path: Array.<String|Number>}} SerializableNode
*
* @param {SerializableNode=} start
* @param {SerializableNode=} end
*/
function onSelectionChange(start, end) {
...
}
```
Only applicable when `mode` is 'tree'.
- `{function} onEvent({ field, path, value? }, event)`
Set a callback function that will be triggered when an event will occur in
a JSON field or value.
In case of field event, node information will be
```
{
field: string,
path: {string|number}[]
}
```
In case of value event, node information will be
```
{
field: string,
path: {string|number}[],
value: string
}
```
signature should be:
```js
/**
* @param {Node} the Node where event has been triggered
identified by {field: string, path: {string|number}[] [, value: string]}`
* @param {event} the event fired
*/
function onEvent(node, event) {
...
}
```
Only applicable when `mode` is 'form', 'tree' or 'view'.
- `{function} onFocus({ type: 'focus', target })`
Callback method, triggered when the editor comes into focus,
passing an object `{type, target}`, Applicable for all modes.
- `{function} onBlur({ type: 'blur', target })`
Callback method, triggered when the editor goes out of focus,
passing an object `{type, target}`, Applicable for all modes.
- `{boolean} colorPicker`
If `true` (default), values containing a color name or color code will have a color picker rendered on their left side.
- `{function} onColorPicker(parent, color, onChange)`
Callback function triggered when the user clicks a color.
Can be used to implement a custom color picker.
The callback is invoked with three arguments:
`parent` is an HTML element where the color picker can be attached,
`color` is the current color,
`onChange(newColor)` is a callback which has to be invoked with the new color selected in the color picker.
JSONEditor comes with a built-in color picker, powered by [vanilla-picker](https://github.com/Sphinxxxx/vanilla-picker).
A simple example of `onColorPicker` using `vanilla-picker`:
```js
var options = {
onColorPicker: function (parent, color, onChange) {
new VanillaPicker({
parent: parent,
color: color,
onDone: function (color) {
onChange(color.hex)
}
}).show();
}
}
```
- `{boolean | function({field, value, path}) -> boolean} timestampTag`
If `true` (default), a tag with the date/time of a timestamp is displayed
right from values containing a timestamp. By default, a value is
considered a timestamp when it is an integer number with a value larger
than Jan 1th 2000, `946684800000`.
When `timestampTag` a is a function, a timestamp tag will be displayed when
this function returns `true`, and no timestamp is displayed when the function
returns `false`. When the function returns a non-boolean value like `null`
or `undefined`, JSONEditor will fallback on the built-in rules to determine
whether or not to show a timestamp.
The function is invoked with an object as first parameter:
```
{
field: string,
value: string,
path: string[]
}
```
Whether a value is a timestamp can be determined implicitly based on
the `value`, or explicitly based on `field` or `path`. You can for example
test whether a field name contains a string like: `'date'` or `'time'`.
Example:
```js
var options = {
timestampTag: function ({ field, value, path }) {
if (field === 'dateCreated') {
return true
}
return false
}
}
```
Only applicable for modes `tree`, `form`, and `view`.
- `{ function({field, value, path}) -> string|null } timestampFormat`
Customizing the way formating the timestamp. Called when a value is timestamp after `timestampTag`. If it returns null, the timestamp would be formatted with default setting (`new Date(value).toISOString()`).
parameter:
```
{
field: string,
value: string,
path: string[]
}
```
Example:
```js
var options = {
timestampFormat: function ({ field, value, path }) {
if (field === 'customTime') {
return new Date(value*1000).toString()
}
return null
}
}
```
Only applicable for modes `tree`, `form`, and `view`.
- `{string} language`
The default language comes from the browser navigator, but you can force a specific language. So use here string as 'en' or 'pt-BR'. Built-in languages: `en`, `es` `zh-CN`, `pt-BR`, `tr`, `ja`, `fr-FR`, `de`, `ru`, `ko`. Other translations can be specified via the option `languages`.
- `{Object} languages`
You can override existing translations or provide a new translation for a specific language. To do it provide an object at languages with language and the keys/values to be inserted. For example:
```
'languages': {
'pt-BR': {
'auto': 'Automático testing'
},
'en': {
'auto': 'Auto testing'
}
}
```
All available fields for translation can be found in the source file `src/js/i18n.js`.
- `{HTMLElement} modalAnchor`
The container element where modals (like for sorting and filtering) are attached: an overlay will be created on top
of this container, and the modal will be created in the center of this container.
- `{HTMLElement} popupAnchor`
The container element where popups (for example drop down menus, for JSON Schema error
tooltips, and color pickers) will be absolutely positioned.
By default, this is the root DIV element of the editor itself.
When the JSONEditor is inside a DIV element which hides overflowing contents
(CSS `overflow: auto` or `overflow: hidden`), tooltips will be visible only partly.
In this case, a `popupAnchor` outside of the element without hidden overflow will allow
the tooltips to be visible when overflowing the DIV element of the JSONEditor.
- `{boolean} enableSort`
Enable sorting of arrays and object properties. Only applicable for mode 'tree'. `true` by default.
- `{boolean} enableTransform`
Enable filtering, sorting, and transforming JSON using a [JMESPath](http://jmespath.org/) query. Only applicable for mode 'tree'. `true` by default.
- `{Number} maxVisibleChilds`
Number of children allowed for a given node before the "show more / show all" message appears (in 'tree', 'view', or 'form' modes). `100` by default.
- `{ function(json: JSON, queryOptions: QueryOptions) -> string } createQuery`
Create a query string based on query options filled in the Transform Wizard in the Transform modal.
Normally used in combination with `executeQuery`.
The input for the function are the entered query options and the current JSON, and the output
must be a string containing the query. This query will be executed using `executeQuery`.
The query options have the following structure:
```
interface QueryOptions {
filter?: {
field: string | '@'
relation: '==' | '!=' | '<' | '<=' | '>' | '>='
value: string
}
sort?: {
field: string | '@'
direction: 'asc' | 'desc'
}
projection?: {
fields: string[]
}
}
```
Note that there is a special case `'@'` for `filter.field` and `sort.field`.
It means that the field itself is selected, for example when having an array containing numbers.
A usage example can be found in `examples/23_custom_query_language.html`.
- `{ function(json: JSON, query: string) -> JSON } executeQuery`
Replace the build-in query language used in the Transform modal with a custom language.
Normally used in combination with `createQuery`.
The input for the function is the current JSON and a query string, and output must be the transformed JSON.
A usage example can be found in `examples/23_custom_query_language.html`.
- `{string} queryDescription`
A text description displayed on top of the Transform modal.
Can be used to explain a custom query language implemented via `createQuery` and `executeQuery`.
The text can contain HTML code like a link to a web page.
A usage example can be found in `examples/23_custom_query_language.html`.
### Methods
#### `JSONEditor.collapseAll()`
Collapse all fields. Only applicable for mode 'tree', 'view', and 'form'.
#### `JSONEditor.destroy()`
Destroy the editor. Clean up DOM, event listeners, and web workers.
#### `JSONEditor.expandAll()`
Expand all fields. Only applicable for mode 'tree', 'view', and 'form'.
#### `JSONEditor.expand(options)`
Expand/collapse a given JSON node. Only applicable for mode 'tree', 'view' and 'form'.
*`options` fields:*
- `{Array.<String>} path`
Path for the node to expand/collapse. Required.
- `{Boolean} isExpand`
When true, expand the node. Else collapse it. Required.
- `{Boolean} recursive`
When true, expand/collapse child nodes recursively. Optional.
- `{Boolean} withPath`
When true, expand/collapse all nodes of `path` itself. Optional.
#### `JSONEditor.focus()`
Set focus to the JSONEditor.
#### `JSONEditor.get()`
Get JSON data.
This method throws an exception when the editor does not contain valid JSON,
which can be the case when the editor is in mode `code`, `text`, or `preview`.
*Returns:*
- `{JSON} json`
JSON data from the JSONEditor.
#### `JSONEditor.getMode()`
Retrieve the current mode of the editor.
*Returns:*
- `{String} mode`
Current mode of the editor, for example `tree` or `code`.
#### `JSONEditor.getName()`
Retrieve the current field name of the root node.
*Returns:*
- `{String | undefined} name`
Current field name of the root node, or undefined if not set.
#### `JSONEditor.getNodesByRange(start, end)`
A utility function for getting a list of `SerializableNode` under certain range.
This function can be used as complementary to `getSelection` and `onSelectionChange` if a list of __all__ the selected nodes is required.
*Parameters:*
- `{path: Array.<String>} start`
Path for the first node in range
- `{path: Array.<String>} end`
Path for the last node in range
#### `JSONEditor.getSelection()`
Get the current selected nodes, Only applicable for mode 'tree'.
*Returns:*
- `{start:SerializableNode, end: SerializableNode}`
#### `JSONEditor.getText()`
Get JSON data as string.
*Returns:*
- `{String} jsonString`
Contents of the editor as string. When the editor is in code `text`, `code` or `preview`,
the returned text is returned as-is. For the other modes, the returned text
is a compacted string. In order to get the JSON formatted with a certain
number of spaces, use `JSON.stringify(JSONEditor.get(), null, 2)`.
#### `JSONEditor.getTextSelection()`
Get the current selected text with the selection range, Only applicable for mode 'text' and 'code'.
*Returns:*
- `{start:{row:Number, column:Number},end:{row:Number, column:Number},text:String} selection`
#### `JSONEditor.refresh()`
Force the editor to refresh the user interface and update all rendered HTML. This can be useful for example when using `onClassName` and the returned class name depends on external factors.
#### `JSONEditor.set(json)`
Set JSON data.
Resets the state of the editor (expanded nodes, search, selection).
See also `JSONEditor.update(json)`.
*Parameters:*
- `{JSON} json`
JSON data to be displayed in the JSONEditor.
#### `JSONEditor.setMode(mode)`
Switch mode. Mode `code` requires the [Ace editor](https://ace.c9.io/).
*Parameters:*
- `{String} mode`
Available values: `tree`, `view`, `form`, `code`, `text`, `preview`.
#### `JSONEditor.setName(name)`
Set a field name for the root node.
*Parameters:*
- `{String | undefined} name`
Field name of the root node. If undefined, the current name will be removed.
#### `JSONEditor.setSchema(schema [,schemaRefs])`
Set a JSON schema for validation of the JSON object. See also option `schema`.
See [http://json-schema.org/](http://json-schema.org/) for more information on the JSON schema definition.
*Parameters:*
- `{Object} schema`
A JSON schema.
- `{Object} schemaRefs`
Optional, Schemas that are referenced using the `$ref` property from the JSON schema, the object structure in the form of `{reference_key: schemaObject}`
#### `JSONEditor.setSelection(start, end)`
Set selection for a range of nodes, Only applicable for mode 'tree'.
- If no parameters sent - the current selection will be removed, if exists.
- For single node selecion send only the `start` parameter.
- If the nodes are not from the same level the first common parent will be selected
*Parameters:*
- `{path: Array.<String>} start`
Path for the start node
- `{path: Array.<String>} end`
Path for the end node
#### `JSONEditor.setText(jsonString)`
Set text data in the editor.
This method throws an exception when the provided jsonString does not contain
valid JSON and the editor is in mode `tree`, `view`, or `form`.
*Parameters:*
- `{String} jsonString`
Contents of the editor as string.
#### `JSONEditor.setTextSelection(startPos, endPos)`
Set text selection for a range, Only applicable for mode 'text' and 'code'.
*Parameters:*
- `{row:Number, column:Number} startPos`
Position for selection start
- `{row:Number, column:Number} endPos`
Position for selection end
#### `JSONEditor.update(json)`
Replace JSON data when the new data contains changes.
In modes `tree`, `form`, and `view`, the state of the editor will be maintained (expanded nodes, search, selection).
See also `JSONEditor.set(json)`.
*Parameters:*
- `{JSON} json`
JSON data to be displayed in the JSONEditor.
#### `JSONEditor.updateText (json)`
Replace text data when the new data contains changes.
In modes `tree`, `form`, and `view`, the state of the editor will be maintained (expanded nodes, search, selection).
Also see `JSONEditor.setText(jsonString)`.
This method throws an exception when the provided jsonString does not contain
valid JSON and the editor is in mode `tree`, `view`, or `form`.
*Parameters:*
- `{String} jsonString`
Contents of the editor as string.
#### `JSONEditor.validate()`
Validate the JSON document against the configured JSON schema or custom validator.
See also the `onValidationError` callback.
*Returns:*
- `{Promise<ValidationError[]>} errorsPromise`
Returns a promise which resolves with the current validation errors,
or an empty list when there are no errors. The `ValidationError` contains
a `type`, `path`, and `message`.
### Static properties
- `{string[]} JSONEditor.VALID_OPTIONS`
An array with the names of all known options.
- `{object} ace`
Access to the bundled Ace editor, via the [`brace` library](https://github.com/thlorenz/brace).
Ace is used in code mode.
Same as `var ace = require('brace');`.
- `{function} Ajv`
Access to the bundled [`ajv` library](https://github.com/epoberezkin/ajv), used for JSON schema validation.
Same as `var Ajv = require('ajv');`.
- `{function} VanillaPicker`
Access to the bundled [`vanilla-picker` library](https://github.com/Sphinxxxx/vanilla-picker), used as color picker.
Same as `var VanillaPicker = require('vanilla-picker');`.
### Examples
A tree editor:
```js
var options = {
"mode": "tree",
"search": true
};
var editor = new JSONEditor(container, options);
var json = {
"Array": [1, 2, 3],
"Boolean": true,
"Null": null,
"Number": 123,
"Object": {"a": "b", "c": "d"},
"String": "Hello World"
};
editor.set(json);
editor.expandAll();
var json = editor.get(json);
```
A text editor:
```js
var options = {
"mode": "text",
"indentation": 2
};
var editor = new JSONEditor(container, options);
var json = {
"Array": [1, 2, 3],
"Boolean": true,
"Null": null,
"Number": 123,
"Object": {"a": "b", "c": "d"},
"String": "Hello World"
};
editor.set(json);
var json = editor.get();
```
## JSON parsing and stringification
In general, to parse or stringify JSON data, the browsers built in JSON parser can be used. To create a formatted string from a JSON object, use:
```js
var formattedString = JSON.stringify(json, null, 2);
```
to create a compacted string from a JSON object, use:
```js
var compactString = JSON.stringify(json);
```
To parse a String to a JSON object, use:
```js
var json = JSON.parse(string);
```
================================================
FILE: docs/shortcut_keys.md
================================================
# Shortcut keys
## Tree Editor
Key | Description
----------------------- | ------------------------------------------------
Alt+Arrows | Move the caret up/down/left/right between fields
Ctrl+Shift+Arrow Up/Down| Select multiple fields
Shift+Alt+Arrows | Move current field or selected fields up/down/left/right
Ctrl+D | Duplicate field
Ctrl+Del | Remove field
Ctrl+Enter | Open link when on a field containing an url
Ctrl+Ins | Insert a new field with type auto
Ctrl+Shift+Ins | Append a new field with type auto
Ctrl+E | Expand or collapse field
Alt+End | Move the caret to the last field
Ctrl+F | Find
F3, Ctrl+G | Find next
Shift+F3, Ctrl+Shift+G | Find previous
Alt+Home | Move the caret to the first field
Ctrl+M | Show actions menu
Ctrl+Z | Undo last action
Ctrl+Shift+Z | Redo
## Code Editor
The code editor is powered by [Ace Editor](http://ace.c9.io/). This editor's
shortcut keys are described here:
https://github.com/ajaxorg/ace/wiki/Default-Keyboard-Shortcuts
Additionally, there are shortcut keys to format/compact the code:
Key | Description
----------------------- | ------------------------------------------------
Ctrl+I | Format JSON data, set proper indentation
Ctrl+Shift+I | Compact JSON data, remove all whitespace
================================================
FILE: docs/styling.md
================================================
# Styling Reference
Documentation for writing custom JSON Editor styles.
## Node
Node is the fundamental unit that makes up the hierarchical JSON display in the Form, Tree, and View modes. It can be
customized with several classes that reflect its type and state.
- `jsoneditor-field`: the property name
- `jsoneditor-value`: the value of the property
- The value element will have one of the following classes depending on its type:
- `jsoneditor-null`
- `jsoneditor-undefined`
- `jsoneditor-number`
- `jsoneditor-string`
- `jsoneditor-string jsoneditor-color-value`
- `jsoneditor-boolean`
- `jsoneditor-regexp`
- `jsoneditor-array`
- `jsoneditor-object`
- `jsoneditor-url`
- `jsoneditor-is-default`: applied to the value element when the value matches the default from the schema
- `jsoneditor-is-not-default`: applied to the value element when the value does not match the default from the schema
- `jsoneditor-schema-error`: the warning icon that appears when the Node has a schema validation error
- `jsoneditor-popover`: the popover that appears when hovering over the schema validation error warning icon
================================================
FILE: docs/usage.md
================================================
# Usage
### Install
Install via npm:
npm install jsoneditor
Alternatively, you can use another JavaScript package manager like https://yarnpkg.com/, or a CDN such as https://cdnjs.com/ or https://www.jsdelivr.com/.
## Load
To implement JSONEditor in a web application, load the javascript and css file
in the head of the HTML page:
```html
<link href="jsoneditor/dist/jsoneditor.min.css" rel="stylesheet" type="text/css">
<script src="jsoneditor/dist/jsoneditor.min.js"></script>
```
Here you'll have to change the urls `jsoneditor/dist/jsoneditor.min.js` and `jsoneditor/dist/jsoneditor.min.css` to match the place where you've downloaded the library, or fill in the URL of the CDN you're using.
## Use
In the body, create a div element with an id and a size:
```html
<div id="jsoneditor" style="width: 400px; height: 400px;"></div>
```
After the page is loaded, load the editor with javascript:
```js
var container = document.getElementById("jsoneditor");
var options = {
mode: 'tree'
};
var editor = new JSONEditor(container, options);
```
To set JSON data in the editor:
```js
var json = {
"Array": [1, 2, 3],
"Boolean": true,
"Null": null,
"Number": 123,
"Object": {"a": "b", "c": "d"},
"String": "Hello World"
};
editor.set(json);
```
To get JSON data from the editor:
```js
var json = editor.get();
```
## Full Example
```html
<!DOCTYPE HTML>
<html lang="en">
<head>
<!-- when using the mode "code", it's important to specify charset utf-8 -->
<meta charset="utf-8">
<link href="jsoneditor/dist/jsoneditor.min.css" rel="stylesheet" type="text/css">
<script src="jsoneditor/dist/jsoneditor.min.js"></script>
</head>
<body>
<p>
<button onclick="setJSON();">Set JSON</button>
<button onclick="getJSON();">Get JSON</button>
</p>
<div id="jsoneditor" style="width: 400px; height: 400px;"></div>
<script>
// create the editor
var container = document.getElementById("jsoneditor");
var editor = new JSONEditor(container);
// set json
function setJSON () {
var json = {
"Array": [1, 2, 3],
"Boolean": true,
"Null": null,
"Number": 123,
"Object": {"a": "b", "c": "d"},
"String": "Hello World"
};
editor.set(json);
}
// get json
function getJSON() {
var json = editor.get();
alert(JSON.stringify(json, null, 2));
}
</script>
</body>
</html>
```
For more examples, see the
[examples section](https://github.com/josdejong/jsoneditor/tree/master/examples).
================================================
FILE: examples/01_basic_usage.html
================================================
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JSONEditor | Basic usage</title>
<link href="../dist/jsoneditor.css" rel="stylesheet" type="text/css">
<script src="../dist/jsoneditor.js"></script>
<style type="text/css">
#jsoneditor {
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<p>
<button id="setJSON">Set JSON</button>
<button id="getJSON">Get JSON</button>
</p>
<div id="jsoneditor"></div>
<script>
// create the editor
const container = document.getElementById('jsoneditor')
const options = {}
const editor = new JSONEditor(container, options)
// set json
document.getElementById('setJSON').onclick = function () {
const json = {
'array': [1, 2, 3],
'boolean': true,
'color': '#82b92c',
'null': null,
'number': 123,
'object': {'a': 'b', 'c': 'd'},
'time': 1575599819000,
'string': 'Hello World',
'onlineDemo': 'https://jsoneditoronline.org/'
}
editor.set(json)
}
// get json
document.getElementById('getJSON').onclick = function () {
const json = editor.get()
alert(JSON.stringify(json, null, 2))
}
</script>
</body>
</html>
================================================
FILE: examples/02_viewer.html
================================================
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JSONEditor | Viewer</title>
<link href="../dist/jsoneditor.css" rel="stylesheet" type="text/css">
<script src="../dist/jsoneditor.js"></script>
<style type="text/css">
body {
font: 11pt arial;
}
#jsoneditor {
width: 500px;
}
</style>
</head>
<body>
<p>
This editor is read-only (mode='viewer').
</p>
<div id="jsoneditor"></div>
<script>
const container = document.getElementById('jsoneditor')
const options = {
mode: 'view'
}
const json = {
'array': [1, 2, 3],
'boolean': true,
'null': null,
'number': 123,
'object': {'a': 'b', 'c': 'd'},
'string': 'Hello World'
}
const editor = new JSONEditor(container, options, json)
</script>
</body>
</html>
================================================
FILE: examples/03_switch_mode.html
================================================
<!DOCTYPE HTML>
<html lang="en">
<head>
<!-- when using the mode "code", it's important to specify charset utf-8 -->
<meta charset="utf-8">
<title>JSONEditor | Switch mode</title>
<link href="../dist/jsoneditor.css" rel="stylesheet" type="text/css">
<script src="../dist/jsoneditor.js"></script>
<style type="text/css">
body {
font: 10.5pt arial;
color: #4d4d4d;
line-height: 150%;
width: 500px;
}
code {
background-color: #f5f5f5;
}
#jsoneditor {
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<p>
Switch editor mode using the mode box.
Note that the mode can be changed programmatically as well using the method
<code>editor.setMode(mode)</code>, try it in the console of your browser.
</p>
<div id="jsoneditor"></div>
<script>
const container = document.getElementById('jsoneditor')
const options = {
mode: 'tree',
modes: ['code', 'form', 'text', 'tree', 'view', 'preview'], // allowed modes
onModeChange: function (newMode, oldMode) {
console.log('Mode switched from', oldMode, 'to', newMode)
}
}
const json = {
"array": [1, 2, 3],
"boolean": true,
"null": null,
"number": 123,
"object": {"a": "b", "c": "d"},
"string": "Hello World"
}
const editor = new JSONEditor(container, options, json)
</script>
</body>
</html>
================================================
FILE: examples/04_load_and_save.html
================================================
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JSONEditor | Load and save</title>
<link href="../dist/jsoneditor.css" rel="stylesheet" type="text/css">
<script src="../dist/jsoneditor.js"></script>
<script src="https://bgrins.github.io/filereader.js/filereader.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2014-11-29/FileSaver.min.js"></script>
<style>
html, body {
font: 11pt sans-serif;
}
#jsoneditor {
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<h1>Load and save JSON documents</h1>
<p>
This examples uses HTML5 to load/save local files.
Powered by <a href="http://bgrins.github.io/filereader.js/">FileReader.js</a> and
<a href="https://github.com/eligrey/FileSaver.js">FileSaver.js</a>.<br>
Only supported on modern browsers (Chrome, FireFox, IE10+, Safari 6.1+, Opera 15+).
</p>
<p>
Load a JSON document: <input type="file" id="loadDocument" value="Load"/>
</p>
<p>
Save a JSON document: <input type="button" id="saveDocument" value="Save" />
</p>
<div id="jsoneditor"></div>
<script>
// create the editor
const editor = new JSONEditor(document.getElementById('jsoneditor'))
// Load a JSON document
FileReaderJS.setupInput(document.getElementById('loadDocument'), {
readAsDefault: 'Text',
on: {
load: function (event, file) {
editor.setText(event.target.result)
}
}
})
// Save a JSON document
document.getElementById('saveDocument').onclick = function () {
// Save Dialog
let fname = window.prompt("Save as...")
// Check json extension in file name
if (fname.indexOf(".") === -1) {
fname = fname + ".json"
} else {
if (fname.split('.').pop().toLowerCase() === "json") {
// Nothing to do
} else {
fname = fname.split('.')[0] + ".json"
}
}
const blob = new Blob([editor.getText()], {type: 'application/json;charset=utf-8'})
saveAs(blob, fname)
}
</script>
</body>
</html>
================================================
FILE: examples/05_custom_fields_editable.html
================================================
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JSONEditor | Custom editable fields</title>
<link href="../dist/jsoneditor.css" rel="stylesheet" type="text/css">
<script src="../dist/jsoneditor.js"></script>
<style type="text/css">
#jsoneditor {
width: 500px;
}
</style>
</head>
<body>
<p>
In this example:
</p>
<ul>
<li>the field <code>_id</code> and its value are read-only</li>
<li>the field <code>name</code> is read-only but has an editable value</li>
<li>the field <code>age</code> and its value are editable</li>
</ul>
<div id="jsoneditor"></div>
<script>
const container = document.getElementById('jsoneditor')
const options = {
onEditable: function (node) {
// node is an object like:
// {
// field: 'FIELD',
// value: 'VALUE',
// path: ['PATH', 'TO', 'NODE']
// }
switch (node.field) {
case '_id':
return false
case 'name':
return {
field: false,
value: true
}
default:
return true
}
}
}
const json = {
_id: 123456,
name: 'John',
age: 32
}
const editor = new JSONEditor(container, options, json)
</script>
</body>
</html>
================================================
FILE: examples/06_custom_styling.html
================================================
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JSONEditor | Custom styling</title>
<link href="../dist/jsoneditor.css" rel="stylesheet" type="text/css">
<script src="../dist/jsoneditor.js"></script>
<style type="text/css">
#jsoneditor {
width: 500px;
height: 500px;
}
p {
width: 500px;
font-family: "DejaVu Sans", sans-serif;
}
</style>
<link href="./css/darktheme.css" rel="stylesheet" type="text/css">
</head>
<body>
<p>
This example demonstrates how to customize the look of JSONEditor,
the editor below has a dark theme. Note that the example isn't worked
out for the mode <code>code</code>. To do that, you can load and configure
a custom theme for the Ace editor.
</p>
<div id="jsoneditor"></div>
<script>
// create the editor
const container = document.getElementById('jsoneditor')
const options = {
modes: ['tree', 'text']
}
const json = {
'array': [1, 2, 3],
'boolean': true,
'null': null,
'number': 123,
'object': {'a': 'b', 'c': 'd'},
'string': 'Hello World'
}
const editor = new JSONEditor(container, options, json)
</script>
</body>
</html>
================================================
FILE: examples/07_json_schema_validation.html
================================================
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JSONEditor | JSON schema validation</title>
<link href="../dist/jsoneditor.css" rel="stylesheet" type="text/css">
<script src="../dist/jsoneditor.js"></script>
<style type="text/css">
body {
width: 600px;
font: 11pt sans-serif;
}
#jsoneditor {
width: 100%;
height: 500px;
}
/* custom bold styling for non-default JSON schema values */
.jsoneditor-is-not-default {
font-weight: bold;
}
</style>
</head>
<body>
<h1>JSON schema validation</h1>
<p>
This example demonstrates JSON schema validation. The JSON object in this example must contain properties like <code>firstName</code> and <code>lastName</code>, can can optionally have a property <code>age</code> which must be a positive integer.
</p>
<p>
See <a href="http://json-schema.org/" target="_blank">http://json-schema.org/</a> for more information.
</p>
<div id="jsoneditor"></div>
<script>
const schema = {
"title": "Employee",
"description": "Object containing employee details",
"type": "object",
"properties": {
"firstName": {
"title": "First Name",
"description": "The given name.",
"examples": [
"John"
],
"type": "string"
},
"lastName": {
"title": "Last Name",
"description": "The family name.",
"examples": [
"Smith"
],
"type": "string"
},
"gender": {
"title": "Gender",
"enum": ["male", "female"]
},
"availableToHire": {
"type": "boolean",
"default": false
},
"age": {
"description": "Age in years",
"type": "integer",
"minimum": 0,
"examples": [28, 32]
},
"job": {
"$ref": "job"
}
},
"required": ["firstName", "lastName"]
}
const job = {
"title": "Job description",
"type": "object",
"required": ["address"],
"properties": {
"company": {
"type": "string",
"examples": [
"ACME",
"Dexter Industries"
]
},
"role": {
"description": "Job title.",
"type": "string",
"examples": [
"Human Resources Coordinator",
"Software Developer"
],
"default": "Software Developer"
},
"address": {
"type": "string"
},
"salary": {
"type": "number",
"minimum": 120,
"examples": [100, 110, 120]
}
}
}
const json = {
firstName: 'John',
lastName: 'Doe',
gender: null,
age: "28",
availableToHire: true,
job: {
company: 'freelance',
role: 'developer',
salary: 100
}
}
const options = {
schema: schema,
schemaRefs: {"job": job},
mode: 'tree',
modes: ['code', 'text', 'tree', 'preview']
}
// create the editor
const container = document.getElementById('jsoneditor')
const editor = new JSONEditor(container, options, json)
</script>
</body>
</html>
================================================
FILE: examples/08_custom_ace.html
================================================
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JSONEditor | Custom Ace</title>
<!-- load a custom version of Ace editor -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ace.js"></script>
<!-- load the minimalist version of JSONEditor, which doesn't have Ace embedded -->
<link href="../dist/jsoneditor.css" rel="stylesheet" type="text/css">
<script src="../dist/jsoneditor-minimalist.js"></script>
<style type="text/css">
#jsoneditor {
width: 500px;
height: 500px;
}
body, html {
font-family: "DejaVu Sans", sans-serif;
}
p, li {
width: 500px;
font-size: 10.5pt;
}
code {
background: #f5f5f5;
}
</style>
</head>
<body>
<h1>Custom Ace editor</h1>
<p>
This example demonstrates how to load a custom version of Ace editor into JSONEditor.
</p>
<p>
By default, JSONEditor <code>code</code> mode loads the following Ace plugins:
</p>
<ul>
<li>ace/mode/json</li>
<li>ace/ext/searchbox</li>
<li>ace/theme/jsoneditor</li>
</ul>
<p>
The jsoneditor theme comes embedded with JSONEditor. The other two plugins (json and searchbox) must be available in the folder of the custom Ace editor, or already be loaded via a script tag.
</p>
<div id="jsoneditor"></div>
<script>
// create the editor
const container = document.getElementById('jsoneditor')
const options = {
modes: ['text', 'code', 'tree', 'form', 'view'],
mode: 'code',
ace: ace
}
const json = {
'array': [1, 2, 3],
'boolean': true,
'null': null,
'number': 123,
'object': {'a': 'b', 'c': 'd'},
'string': 'Hello World'
}
const editor = new JSONEditor(container, options, json)
</script>
</body>
</html>
================================================
FILE: examples/09_readonly_text_mode.html
================================================
<!DOCTYPE HTML>
<html lang="en">
<head>
<!-- when using the mode "code", it's important to specify charset utf-8 -->
<meta charset="utf-8">
<title>JSONEditor | Switch mode</title>
<link href="../dist/jsoneditor.css" rel="stylesheet" type="text/css">
<script src="../dist/jsoneditor.js"></script>
<style type="text/css">
body {
font: 10.5pt arial;
color: #4d4d4d;
line-height: 150%;
width: 500px;
}
code {
background-color: #f5f5f5;
}
#jsoneditor {
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<p>
Switch editor mode using the mode box.
Note that the mode can be changed programmatically as well using the method
<code>editor.setMode(mode)</code>, try it in the console of your browser.
</p>
<div id="jsoneditor"></div>
<script>
const container = document.getElementById('jsoneditor')
const options = {
mode: 'text',
modes: ['text', 'code'],
onEditable: function (node) {
if (!node.path) {
// In modes code and text, node is empty: no path, field, or value
// returning false makes the text area read-only
return false;
}
},
onModeChange: function (newMode, oldMode) {
console.log('Mode switched from', oldMode, 'to', newMode)
}
}
const json = {
"array": [1, 2, 3],
"boolean": true,
"null": null,
"number": 123,
"object": {"a": "b", "c": "d"},
"string": "Hello World"
}
const editor = new JSONEditor(container, options, json)
</script>
</body>
</html>
================================================
FILE: examples/10_templates.html
================================================
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JSONEditor | Item templates</title>
<link href="../dist/jsoneditor.css" rel="stylesheet" type="text/css">
<script src="../dist/jsoneditor.js"></script>
<style type="text/css">
body {
width: 600px;
font: 11pt sans-serif;
}
#jsoneditor {
width: 100%;
height: 500px;
}
</style>
</head>
<body>
<h1>Item templates</h1>
<p>
Using item templates, the options in the context menu under "insert" and "append" can be extended with extra options, containing a domain specific template like a "Person", "Contact", "Order", "Address", etc.
</p>
<div id="jsoneditor"></div>
<script>
const json = [
{
firstName: 'John',
lastName: 'Doe',
age: 28
}
]
const options = {
templates: [
{
text: 'Person',
title: 'Insert a Person Node',
className: 'jsoneditor-type-object',
field: 'PersonTemplate',
value: {
'firstName': 'John',
'lastName': 'Do',
'age': 28
}
},
{
text: 'Address',
title: 'Insert a Address Node',
field: 'AddressTemplate',
value: {
'street': '',
'city': '',
'state': '',
'ZIP code': ''
}
}
]
}
// create the editor
const container = document.getElementById('jsoneditor')
const editor = new JSONEditor(container, options, json)
editor.expandAll()
</script>
</body>
</html>
================================================
FILE: examples/11_autocomplete_basic.html
================================================
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JSONEditor | Auto Complete</title>
<link href="../dist/jsoneditor.css" rel="stylesheet" type="text/css">
<script src="../dist/jsoneditor.js"></script>
<style type="text/css">
#jsoneditor {
width: 500px;
height: 500px;
}
p {
width: 500px;
font-family: "DejaVu Sans", sans-serif;
}
</style>
</head>
<body>
<p>
This example demonstrates how to autocomplete works, options available are: 'apple','cranberry','raspberry','pie', 'mango', 'mandarine', 'melon', 'appleton'.
</p>
<div id="jsoneditor"></div>
<script>
// create the editor
const container = document.getElementById('jsoneditor')
const options = {
autocomplete: {
getOptions: function () {
return ['apple', 'cranberry', 'raspberry', 'pie', 'mango', 'mandarine', 'melon', 'appleton'];
}
}
}
const json = {
'array': [{'field1':'v1', 'field2':'v2'}, 2, 3],
'boolean': true,
'null': null,
'number': 123,
'object': {'a': 'b', 'c': 'd'},
'string': 'Hello World'
}
const editor = new JSONEditor(container, options, json)
</script>
</body>
</html>
================================================
FILE: examples/12_autocomplete_dynamic.html
================================================
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JSONEditor | Dynamic Auto Complete</title>
<link href="../dist/jsoneditor.css" rel="stylesheet" type="text/css">
<script src="../dist/jsoneditor.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
<style type="text/css">
#jsoneditor {
width: 500px;
height: 500px;
}
p {
width: 500px;
font-family: "DejaVu Sans", sans-serif;
}
</style>
</head>
<body>
<p>
This example demonstrates how to autocomplete works, options available are dynamics and consist in all the strings found in the json
</p>
<div id="jsoneditor"></div>
<script>
// create the editor
const container = document.getElementById('jsoneditor')
const options = {
autocomplete: {
applyTo:['value'],
filter: 'contain',
trigger: 'focus',
getOptions: function (text, path, input, editor) {
return new Promise(function (resolve, reject) {
const options = extractUniqueWords(editor.get())
if (options.length > 0) {
resolve(options)
} else {
reject()
}
})
}
}
}
// helper function to extract all unique words in the keys and values of a JSON object
function extractUniqueWords (json) {
return _.uniq(_.flatMapDeep(json, function (value, key) {
return _.isObject(value)
? [key]
: [key, String(value)]
}))
}
const json = {
'array': [{'field1':'v1', 'field2':'v2'}, 2, 3],
'boolean': true,
'null': null,
'number': 123,
'object': {'a': 'b', 'c': 'd'},
'string': 'Hello World'
}
const editor = new JSONEditor(container, options, json)
</script>
</body>
</html>
================================================
FILE: examples/13_autocomplete_advanced.html
================================================
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JSONEditor | Advanced Auto Complete</title>
<link href="../dist/jsoneditor.css" rel="stylesheet" type="text/css">
<script src="../dist/jsoneditor.js"></script>
<script src="https://unpkg.com/jsonpath@0.2.11/jsonpath.min.js"></script>
<style type="text/css">
#jsoneditor {
width: 500px;
height: 500px;
}
p {
width: 500px;
font-family: "DejaVu Sans", sans-serif;
}
</style>
</head>
<body>
<p>
This example demonstrates how to autocomplete works with an ActivationChar option, press "*" in any value and continue with autocompletion.
The autocomplete returns the posible jsonpaths of the existing json document, for example <code>*object.a</code>.
</p>
<div id="jsoneditor"></div>
<script>
// create the editor
const container = document.getElementById('jsoneditor')
const activationChar = '*'
const options = {
autocomplete: {
confirmKeys: [39, 35, 9, 190], // Confirm Autocomplete Keys: [right, end, tab, '.'] // By default are only [right, end, tab]
caseSensitive: false,
getOptions: function (text, path, input, editor) {
if (!text.startsWith(activationChar) || input !== 'value') return []
let data = {}
let startFrom = 0
const lastPoint = text.lastIndexOf('.')
const jsonObj = editor.get()
if ((lastPoint > 0) && (text.length > 1)) {
data = jsonpath.query(jsonObj, '$.' + text.substring(activationChar.length, lastPoint))
if (data.length > 0) {
data = data[0]
} else {
data = {}
}
// Indicate that autocompletion should start after the . (ignoring the first part)
startFrom = text.lastIndexOf('.') + 1
} else {
data = jsonObj
}
const optionsStr = YaskON.stringify(data, null, activationChar)
const options = optionsStr.split('\n')
return { startFrom: startFrom, options: options }
}
}
}
// helper function to auto complete paths of a JSON object
const YaskON = {
// Return first level json paths by the node 'o'
stringify: function (o, prefix, activationChar) {
prefix = prefix || ''
switch (typeof o) {
case 'object':
let output = ''
if (Array.isArray(o)) {
o.forEach(function (e, index) {
output += activationChar + prefix + '[' + index + ']' + '\n'
}.bind(this))
return output
}
output = ''
for (let k in o) {
if (o.hasOwnProperty(k)) {
if (prefix === '') output += this.stringify(o[k], k, activationChar)
}
}
if (prefix !== '') output += activationChar + prefix + '\n'
return output
case 'function':
return ''
default:
return prefix + '\n'
}
}
}
const json = {
'array': [{ 'field1': 'v1', 'field2': 'v2' }, 2, 3],
'boolean': true,
'null': null,
'number': 123,
'object': { 'a': 'b', 'c': 'd' },
'string': 'Hello World'
}
const editor = new JSONEditor(container, options, json)
</script>
</body>
</html>
================================================
FILE: examples/14_translate.html
================================================
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JSONEditor | Translate</title>
<link href="../dist/jsoneditor.css" rel="stylesheet" type="text/css">
<script src="../dist/jsoneditor.js"></script>
<style type="text/css">
#jsoneditor {
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<p>
JSONEditor has support for multiple languages (i18n), in this case uses <code>pt-BR</code>.
</p>
<div id="jsoneditor"></div>
<script>
// create the editor
const container = document.getElementById('jsoneditor')
const options = {
// switch between pt-BR or en for testing forcing a language
// leave blank to get language
'language': 'pt-BR',
'languages': {
'pt-BR': {
'auto': 'Automático testing'
},
'en': {
'auto': 'Auto testing'
},
'newlang': {
'auto': 'Auto new lang'
}
}
}
const editor = new JSONEditor(container, options)
const json = {
'array': [1, 2, 3],
'boolean': true,
'null': null,
'number': 123,
'object': { 'a': 'b', 'c': 'd' },
'string': 'Hello World'
}
editor.set(json)
</script>
</body>
</html>
================================================
FILE: examples/15_selection_api.html
================================================
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="../dist/jsoneditor.css" rel="stylesheet" type="text/css">
<script src="../dist/jsoneditor.js"></script>
<style type="text/css">
body {
font: 10.5pt arial;
color: #4d4d4d;
line-height: 150%;
width: 500px;
padding-left: 40px;
}
code {
background-color: #f5f5f5;
}
code.multiline {
display: block;
white-space: pre-wrap;
}
#jsoneditor {
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<p>
Selection indication was done using the <code>on[Text]SelectionChange</code> listeners.<br/>
you can try the following calls in the console of your browser:<br/>
<code class="multiline">
// text and code modes:
editor.getTextSelection()
editor.setTextSelection(startPos, endPos)
// tree mode:
editor.getSelection()
editor.setSelection(startNode, endNode)
</code>
</p>
<form>
<div id="jsoneditor"></div>
<div id="textModeSelection" style="display:none;">
<b>Selection:</b><div id="textRange"></div>
<b>Text:</b><div id="selectedText"></div>
</div>
<div id="treeModeSelection">
<b>Selection:</b>
<div id="selectedNodes"></div>
</div>
</form>
<script>
const container = document.getElementById('jsoneditor')
const options = {
mode: 'tree',
modes: ['code', 'form', 'text', 'tree', 'view', 'preview'], // allowed modes
onChange: function () {
console.log('change')
},
onModeChange: function (mode) {
const treeMode = document.getElementById('treeModeSelection')
const textMode = document.getElementById('textModeSelection')
treeMode.style.display = textMode.style.display = 'none'
if (mode === 'code' || mode === 'text') {
textMode.style.display = 'inline'
} else {
treeMode.style.display = 'inline'
}
},
indentation: 4,
escapeUnicode: true,
onTextSelectionChange: function(start, end, text) {
const rangeEl = document.getElementById('textRange')
rangeEl.innerHTML = 'start: ' + JSON.stringify(start) + ', end: ' + JSON.stringify(end)
const textEl = document.getElementById('selectedText')
textEl.innerHTML = text
},
onSelectionChange: function(start, end) {
const nodesEl = document.getElementById('selectedNodes')
nodesEl.innerHTML = ''
if (start) {
nodesEl.innerHTML = ('start: ' + JSON.stringify(start))
if (end) {
nodesEl.innerHTML += ('<br/>end: ' + JSON.stringify(end))
}
}
}
}
const json = {
"array": [1, 2, [3,4,5]],
"boolean": true,
"htmlcode": '"',
"escaped_unicode": '\\u20b9',
"unicode": '\u20b9,\uD83D\uDCA9',
"return": '\n',
"null": null,
"number": 123,
"object": {"a": "b", "c": "d"},
"string": "Hello World",
"url": "http://jsoneditoronline.org"
}
window.editor = new JSONEditor(container, options, json)
console.log('json', json)
console.log('string', JSON.stringify(json))
</script>
</body>
</html>
================================================
FILE: examples/16_synchronize_editors.html
================================================
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JSONEditor | Synchronize two editors</title>
<link href="../dist/jsoneditor.css" rel="stylesheet" type="text/css">
<script src="../dist/jsoneditor.js"></script>
<style type="text/css">
body {
font-family: sans-serif;
}
#jsoneditor1,
#jsoneditor2 {
width: 500px;
height: 500px;
margin-right: 10px;
display: inline-block;
}
</style>
</head>
<body>
<p>
Keep two editors synchronized using <code>onChangeText</code> and <code>updateText</code>.
</p>
<p>
This can be done too with <code>onChangeJSON</code> and <code>update</code>, which can only be used in
modes <code>tree</code>, <code>form</code> (and <code>view</code>).
</p>
<div id="jsoneditor1"></div>
<div id="jsoneditor2"></div>
<script>
// create editor 1
const editor1 = new JSONEditor(document.getElementById('jsoneditor1'), {
onChangeText: function (jsonString) {
editor2.updateText(jsonString)
}
})
// create editor 2
const editor2 = new JSONEditor(document.getElementById('jsoneditor2'), {
onChangeText: function (jsonString) {
editor1.updateText(jsonString)
}
})
// set initial data in both editors
const json = {
'array': [1, 2, 3],
'boolean': true,
'null': null,
'number': 123,
'object': {'a': 'b', 'c': 'd'},
'string': 'Hello World'
}
editor1.set(json)
editor2.set(json)
</script>
</body>
</html>
================================================
FILE: examples/17_on_event_api.html
================================================
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="../dist/jsoneditor.css" rel="stylesheet" type="text/css">
<script src="../dist/jsoneditor.js"></script>
<style type="text/css">
body {
font: 10.5pt arial;
color: #4d4d4d;
line-height: 150%;
width: 500px;
padding-left: 40px;
}
code {
background-color: #f5f5f5;
}
#jsoneditor {
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<p>
When clicking on a JSON field or value, a log message will be shown in
console.
</p>
<form>
<div id="jsoneditor"></div>
</form>
<script>
const container = document.getElementById('jsoneditor')
const options = {
mode: 'tree',
modes: ['code', 'form', 'text', 'tree', 'view', 'preview'], // allowed modes
name: "jsonContent",
onEvent: function(node, event) {
if (node.value !== undefined) {
console.log(event.type + ' event ' +
'on value ' + JSON.stringify(node.value) + ' ' +
'at path ' + JSON.stringify(node.path)
)
} else {
console.log(event.type + ' event ' +
'on field ' + JSON.stringify(node.field) + ' ' +
'at path ' + JSON.stringify(node.path)
)
}
}
}
const json = {
"array": [1, 2, [3,4,5]],
"boolean": true,
"htmlcode": '"',
"escaped_unicode": '\\u20b9',
"unicode": '\u20b9,\uD83D\uDCA9',
"return": '\n',
"null": null,
"number": 123,
"object": {"a": "b", "c": "d", "e": [1, 2, 3]},
"string": "Hello World",
"url": "http://jsoneditoronline.org",
"[0]": "zero"
}
window.editor = new JSONEditor(container, options, json)
console.log('json', json)
console.log('string', JSON.stringify(json))
</script>
</body>
</html>
================================================
FILE: examples/18_custom_validation.html
================================================
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JSONEditor | Custom validation</title>
<link href="../dist/jsoneditor.css" rel="stylesheet" type="text/css">
<script src="../dist/jsoneditor.js"></script>
<style type="text/css">
body {
width: 600px;
font: 11pt sans-serif;
}
#jsoneditor {
width: 100%;
height: 500px;
}
</style>
</head>
<body>
<h1>Custom validation</h1>
<p>
This example demonstrates how to run custom validation on a JSON object.
The validation is available in all modes.
</p>
<div id="jsoneditor"></div>
<script>
const json = {
team: [
{
name: 'Joe',
age: 17
},
{
name: 'Sarah',
age: 13
},
{
name: 'Jack'
}
]
}
const options = {
mode: 'tree',
modes: ['code', 'text', 'tree', 'preview'],
onValidate: function (json) {
// rules:
// - team, names, and ages must be filled in and be of correct type
// - a team must have 4 members
// - at lease one member of the team must be adult
const errors = []
if (json && Array.isArray(json.team)) {
// check whether each team member has name and age filled in correctly
json.team.forEach(function (member, index) {
if (typeof member !== 'object') {
errors.push({path: ['team', index], message: 'Member must be an object with properties "name" and "age"'})
}
if ('name' in member) {
if (typeof member.name !== 'string') {
errors.push({path: ['team', index, 'name'], message: 'Name must be a string'})
}
} else {
errors.push({path: ['team', index], message: 'Required property "name"" missing'})
}
if ('age' in member) {
if (typeof member.age !== 'number') {
errors.push({path: ['team', index, 'age'], message: 'Age must be a number'})
}
} else {
errors.push({path: ['team', index], message: 'Required property "age" missing'})
}
})
// check whether the team consists of exactly four members
if (json.team.length !== 4) {
errors.push({path: ['team'], message: 'A team must have 4 members'})
}
// check whether there is at least one adult member in the team
const adults = json.team.filter(function (member) {
return member ? member.age >= 18 : false
})
if (adults.length === 0) {
errors.push({path: ['team'], message: 'A team must have at least one adult person (age >= 18)'})
}
} else {
errors.push({path: [], message: 'Required property "team" missing or not an Array'})
}
return errors
}
}
// create the editor
const container = document.getElementById('jsoneditor')
const editor = new JSONEditor(container, options, json)
editor.expandAll()
</script>
</body>
</html>
================================================
FILE: examples/19_custom_validation_async.html
================================================
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JSONEditor | Custom validation (asynchronous)</title>
<link href="../dist/jsoneditor.css" rel="stylesheet" type="text/css">
<script src="../dist/jsoneditor.js"></script>
<style type="text/css">
body {
width: 600px;
font: 11pt sans-serif;
}
#jsoneditor {
width: 100%;
height: 500px;
}
</style>
</head>
<body>
<h1>Asynchronous custom validation</h1>
<p>
This example demonstrates how to run asynchronous custom validation on a JSON object.
The names are checked asynchronously and the results "come in" half a second later.
Known names in this example are 'Joe', 'Harry', 'Megan'. For other names, a validation error will be displayed.
</p>
<div id="jsoneditor"></div>
<script>
const json = {
customers: [
{name: 'Joe'},
{name: 'Sarah'},
{name: 'Harry'},
]
}
const options = {
mode: 'tree',
modes: ['code', 'text', 'tree', 'preview'],
onValidate: function (json) {
// in this validation function we fake sending a request to a server
// to validate the existence of customers
if (json && Array.isArray(json.customers)) {
return Promise
.all(json.customers.map(function (customer, index) {
return isExistingCustomer(customer && customer.name).then(function (exists) {
if (!exists) {
return {
path: ['customers', index],
message: 'Customer ' + customer.name + ' doesn\'t exist in our database'
}
}
else {
return null
}
})
}))
.then(function (errors) {
return errors.filter(function (error) {
return error != null
})
})
}
else {
return null
}
}
}
// create the editor
const container = document.getElementById('jsoneditor')
const editor = new JSONEditor(container, options, json)
editor.expandAll()
// this function fakes a request (asynchronous) to a server to validate the existence of a customer
function isExistingCustomer (customerName) {
return new Promise(function (resolve, reject) {
setTimeout(function () {
const customers = ['Joe', 'Harry', 'Megan']
const exists = customers.indexOf(customerName) !== -1
resolve(exists)
}, 500)
})
}
</script>
</body>
</html>
================================================
FILE: examples/20_custom_css_style_for_nodes.html
================================================
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<script
src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"
integrity="sha512-90vH1Z83AJY9DmlWa8WkjkV79yfS2n2Oxhsi2dZbIv0nC4E6m5AbH8Nh156kkM7JePmqD6tcZsfad1ueoaovww=="
crossorigin="anonymous"
></script>
<link href="../dist/jsoneditor.css" rel="stylesheet" type="text/css">
<script src="../dist/jsoneditor.js"></script>
<style type="text/css">
body {
font: 10.5pt arial;
color: #4d4d4d;
line-height: 150%;
width: 100%;
padding-left: 10px;
}
code {
background-color: #f5f5f5;
}
#containerLeft {
display: inline-block;
width: 500px;
height: 500px;
margin-right: 10px;
}
#containerRight {
display: inline-block;
width: 500px;
height: 500px;
}
#containerRight .different_element {
background-color: #acee61;
}
#containerRight .different_element div.jsoneditor-field,
#containerRight .different_element div.jsoneditor-value {
color: red;
}
#containerLeft .different_element {
background-color: pink;
}
#containerLeft .different_element div.jsoneditor-field,
#containerLeft .different_element div.jsoneditor-value {
color: red;
}
</style>
</head>
<body>
<h3>Custom class names</h3>
<p>
This example highlights the differences between two JSON objects using the option <code>onClassName</code>.
Make a change in the left or right editor to see the changes update accordingly.
</p>
<p>
Please note that this is not a full-fledged, performant JSON diffing solution, it's just a small example to demonstrate <code>onClassName</code>.
</p>
<div id="wrapper">
<div id="containerLeft"></div>
<div id="containerRight"></div>
</div>
<script>
const containerLeft = document.getElementById('containerLeft')
const containerRight = document.getElementById('containerRight')
function onClassName({ path, field, value }) {
const leftValue = _.get(jsonRight, path)
const rightValue = _.get(jsonLeft, path)
return _.isEqual(leftValue, rightValue)
? 'the_same_element'
: 'different_element'
}
const optionsLeft = {
mode: 'tree',
onClassName: onClassName,
onChangeJSON: function (j) {
jsonLeft = j
window.editorRight.refresh()
}
}
const optionsRight = {
mode: 'tree',
onClassName: onClassName,
onChangeJSON: function (j) {
jsonRight = j
window.editorLeft.refresh()
}
}
let jsonLeft = {
"arrayOfArrays": [1, 2, 999, [3,4,5]],
"someField": true,
"boolean": true,
"htmlcode": '"',
"escaped_unicode": '\\u20b9',
"unicode": '\u20b9,\uD83D\uDCA9',
"return": '\n',
"null": null,
"thisObjectDoesntExistOnTheRight" : {key: "value"},
"number": 123,
"object": {"a": "b","new":4, "c": "d", "e": [1, 2, 3]},
"string": "Hello World",
"url": "http://jsoneditoronline.org",
"[0]": "zero"
}
let jsonRight = {
"arrayOfArrays": [1, 2, [3,4,5]],
"boolean": true,
"htmlcode": '"',
"escaped_unicode": '\\u20b9',
"thisFieldDoesntExistOnTheLeft": 'foobar',
"unicode": '\u20b9,\uD83D\uDCA9',
"return": '\n',
"null": null,
"number": 123,
"object": {"a": "b", "c": "d", "e": [1, 2, 3]},
"string": "Hello World",
"url": "http://jsoneditoronline.org",
"[0]": "zero"
}
window.editorLeft = new JSONEditor(containerLeft, optionsLeft, jsonLeft)
window.editorRight = new JSONEditor(containerRight, optionsRight, jsonRight)
</script>
</body>
</html>
================================================
FILE: examples/21_customize_context_menu.html
================================================
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JSONEditor | Basic usage</title>
<link href="../dist/jsoneditor.css" rel="stylesheet" type="text/css">
<script src="../dist/jsoneditor.js"></script>
<style type="text/css">
#jsoneditor {
width: 500px;
height: 500px;
}
.submenu-highlight {
background-color: yellow !important;
}
.rainbow {
background: linear-gradient(to right, cyan, yellow, violet, green, orange, blue) !important;
}
.example-class > .jsoneditor-icon {
background-position: -168px -48px; /* warning triangle */
}
.dotty {
border-top : 1px dotted #e5e5e5 !important;
}
</style>
</head>
<body>
<h1>Context Menu Customization</h1>
<p>
This example demonstrates the use of the onCreateMenu callback option, which
allows you to customise context menus after they are created but before they
are shown to the user. You can alter/delete existing items as well as
adding new menu items. See the source code for this example for more
information.
</p>
<div id="jsoneditor"></div>
<script>
// create the editor
const container = document.getElementById('jsoneditor')
const options = {
// onCreateMenu allows us to register a call back function to customise
// the context menu. The callback accpets two parameters, items and path.
// Items is an array containing the current menu items, and path
// (if present) contains the path of the current node (as an array).
// The callback should return the modified (or unmodified) list of menu
// items.
// Every time the user clicks on a context menu button, the menu
// is created from scratch and this callback is called.
onCreateMenu: function (items, node) {
const path = node.path
// log the current items and node for inspection
console.log('items:', items, 'node:', node)
// We are going to add a menu item which returns the current node path
// as a jq path selector ( https://stedolan.github.io/jq/ ). First we
// will create a function, and then We will connect this function to
// the menu item click property in a moment.
function pathTojq() {
let pathString = ''
path.forEach(function (segment, index) { // path is an array, loop through it
if (typeof segment == 'number') { // format the selector for array indexs ...
pathString += '[' + segment + ']'
} else { // ... or object keys
pathString += '."' + segment + '"'
}
})
alert(pathString) // show it to the user.
}
// Create a new menu item. For our example, we only want to do this
// if there is a path (in the case of appendnodes (for new objects)
// path is null until a node is created)
if (path) {
// Each item in the items array represents a menu item,
// and requires the following details :
items.push({
text: 'jq Path', // the text for the menu item
title: 'Show the jq path for this node', // the HTML title attribute
className: 'example-class', // the css class name(s) for the menu item
click: pathTojq // the function to call when the menu item is clicked
})
}
// Now we will iterate through the menu items, which includes the items
// created by jsoneditor, and the new item we added above. In this
// example we will just alter the className property for the items, but
// you can alter any property (e.g. the click callback, text property etc.)
// for any item, or even delete the whole menu item.
items.forEach(function (item, index, items) {
if ("submenu" in item) {
// if the item has a submenu property, it is a submenu heading
// and contains another array of menu items. Let's colour
// that yellow...
items[index].className += ' submenu-highlight'
} else {
// if it's not a submenu heading, let's make it colorful
items[index].className += ' rainbow'
}
})
// note that the above loop isn't recursive, so it only alters the classes
// on the top-level menu items. To also process menu items in submenus
// you should iterate through any "submenu" arrays of items if the item has one.
// next, just for fun, let's remove any menu separators (again just at the
// top level menu). A menu separator is an item with a type : 'separator'
// property
items = items.filter(function (item) {
return item.type !== 'separator'
})
// finally we need to return the items array. If we don't, the menu
// will be empty.
return items
}
}
const json = {
'array': [1, 2, 3],
'boolean': true,
'color': '#82b92c',
'null': null,
'number': 123,
'object': {'a': 'b', 'c': 'd'},
'string': 'Hello World'
}
const editor = new JSONEditor(container, options, json)
</script>
</body>
</html>
================================================
FILE: examples/22_on_validation_event.html
================================================
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JSONEditor | onValidationError</title>
<link href="../dist/jsoneditor.css" rel="stylesheet" type="text/css">
<script src="../dist/jsoneditor.js"></script>
<style type="text/css">
body {
width: 600px;
font: 11pt sans-serif;
}
#jsoneditor {
width: 100%;
height: 500px;
}
#onValidationOutput {
margin: 5px;
}
/* custom bold styling for non-default JSON schema values */
.jsoneditor-is-not-default {
font-weight: bold;
}
</style>
</head>
<body>
<h1>JSON schema validation</h1>
<p>
This example demonstrates onValidationError callback.
</p>
<div id="jsoneditor"></div>
<div id="onValidationOutput"></div>
<script>
var schema = {
"title": "Employee",
"description": "Object containing employee details",
"type": "object",
"properties": {
"firstName": {
"title": "First Name",
"description": "The given name.",
"examples": [
"John"
],
"type": "string"
},
"lastName": {
"title": "Last Name",
"description": "The family name.",
"examples": [
"Smith"
],
"type": "string"
},
"gender": {
"title": "Gender",
"enum": ["male", "female"]
},
"availableToHire": {
"type": "boolean",
"default": false
},
"age": {
"description": "Age in years",
"type": "integer",
"minimum": 0,
"examples": [28, 32]
},
"job": {
"$ref": "job"
}
},
"required": ["firstName", "lastName"]
};
var job = {
"title": "Job description",
"type": "object",
"required": ["address"],
"properties": {
"company": {
"type": "string",
"examples": [
"ACME",
"Dexter Industries"
]
},
"role": {
"description": "Job title.",
"type": "string",
"examples": [
"Human Resources Coordinator",
"Software Developer"
],
"default": "Software Developer"
},
"address": {
"type": "string"
},
"salary": {
"type": "number",
"minimum": 120,
"examples": [100, 110, 120]
}
}
};
var json = {
firstName: 'John',
lastName: 'Doe',
gender: null,
age: "28",
availableToHire: true,
job: {
company: 'freelance',
role: 'developer',
salary: 100
}
};
var options = {
schema: schema,
schemaRefs: {"job": job},
mode: 'code',
modes: ['code', 'text', 'tree', 'preview'],
onValidationError: function(errors) {
console.error('onValidationError', errors);
const outputEL = document.getElementById('onValidationOutput')
outputEL.innerHTML = '<code>onValidationError</code> was called with ' + errors.length + ' error' + (errors.length > 1 ? 's' : '') + ' <br> ' +
'open the browser console to see the error objects';
},
onValidate: function (json) {
var errors = [];
if(!isNaN(json.age) && json.age < 30) {
errors.push({ path: ['age'], message: 'Member age must be 30 or higher' });
}
return errors;
}
};
// create the editor
var container = document.getElementById('jsoneditor');
var editor = new JSONEditor(container, options, json);
</script>
</body>
</html>
================================================
FILE: examples/23_custom_query_language.html
================================================
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>JSONEditor | Custom query language</title>
<meta charset="utf-8" />
<link href="../dist/jsoneditor.css" rel="stylesheet" type="text/css">
<script src="../dist/jsoneditor.js"></script>
<script src="https://unpkg.com/lodash@4.17.15/lodash.min.js"></script>
<style type="text/css">
p {
max-width: 500px;
font-family: sans-serif;
font-size: 11pt;
}
code {
font-size: 11pt;
background: #e5e5e5;
}
#jsoneditor {
width: 500px;
height: 500px;
}
.warning {
color: red;
}
</style>
</head>
<body>
<p>
This demo shows how to configure a custom query language.
Click on the "Transform" button and try it out.
</p>
<p>
This basic example uses lodash functions <code>filter</code>, <code>sort</code>, and <code>pick</code>,
but you can run any JavaScript code.
</p>
<p class="warning">
WARNING: this example uses <code>new Function()</code> which can be dangerous when executed with arbitrary code.
Don't use it in production.
</p>
<div id="jsoneditor"></div>
<script>
const container = document.getElementById('jsoneditor')
const options = {
createQuery: function (json, queryOptions) {
console.log('createQuery', queryOptions)
const { filter, sort, projection } = queryOptions
let query = 'data'
if (filter) {
// Note that the comparisons embrace type coercion,
// so a filter value like '5' (text) will match numbers like 5 too.
const getActualValue = filter.field !== '@'
? `item => _.get(item, '${filter.field}')`
: `item => item`
query = `_.filter(${query}, ${getActualValue} ${filter.relation} '${filter.value}')`
}
if (sort) {
// The '@' field name is a special case,
// which means that the field itself is selected.
// For example when we have an array containing numbers.
query = sort.field !== '@'
? `_.orderBy(${query}, '${sort.field}', '${sort.direction}')`
: `_.sortBy(${query}, '${sort.direction}')`
}
if (projection) {
// It is possible to make a util function "pickFlat"
// and use that when building the query to make it more readable.
if (projection.fields.length > 1) {
const fields = projection.fields.map(field => {
const name = _.last(field.split('.'))
return ` '${name}': _.get(item, '${field}')`
})
query = `_.map(${query}, item => ({\n${fields.join(',\n')}})\n)`
} else {
const field = projection.fields[0]
query = `_.map(${query}, item => _.get(item, '${field}'))`
}
}
return query
},
executeQuery: function (json, query) {
console.log('executeQuery', query)
// WARNING: Using new Function() with arbitrary input can be dangerous! Be careful.
const execute = new Function('data', 'return ' + query)
return execute(json)
},
queryDescription: 'Enter a JavaScript query to filter, sort, or transform the JSON data.<br/>' +
'The <a href="https://lodash.com/" target="_blank">Lodash</a> library is available via <code>_</code> to facilitate this.'
}
const json = []
for (let i = 0; i < 100; i++) {
var longitude = 4 + i / 100
var latitude = 51 + i / 100
json.push({
name: 'Item ' + i,
id: String(i),
index: i,
time: new Date().toISOString(),
location: {
latitude: longitude,
longitude: latitude,
coordinates: [longitude, latitude]
},
random: Math.random()
})
}
const editor = new JSONEditor(container, options, json)
</script>
</body>
</html>
================================================
FILE: examples/24_new_window.html
================================================
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JSONEditor | New window</title>
<link href="../dist/jsoneditor.css" rel="stylesheet" type="text/css">
<script src="../dist/jsoneditor.js"></script>
<style type="text/css">
#jsoneditor {
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<p>
<button id="openNewEditor">Open Editor in New Window</button>
<button id="setJSON">Set JSON</button>
<button id="getJSON">Get JSON</button>
</p>
<script>
let editor
function openNewEditor() {
const child = window.open("", "_blank", "width=400,height=400")
child.document.title = 'JSONEditor | New window'
child.onunload = function () {
editor = undefined
}
// make the necessary styles available within the child window
// for JSONEditor
const baseUrl = window.location.href.slice(0, window.location.href.lastIndexOf('/'))
const jsonEditorStyles = child.document.createElement("link")
jsonEditorStyles.setAttribute("href", baseUrl + "/../dist/jsoneditor.css")
jsonEditorStyles.setAttribute("rel", "stylesheet")
child.document.head.append(jsonEditorStyles)
// for vanilla-picker
const colorPickerStyles = JSONEditor.VanillaPicker.StyleElement.cloneNode(true)
child.document.head.append(colorPickerStyles)
const container = child.document.createElement("div")
child.document.body.append(container)
// create the editor
const options = {
// Show sort and transform modals in the child window, not the parent.
modalAnchor: child.document.body
}
editor = new JSONEditor(container, options)
}
// create a new window
document.getElementById('openNewEditor').onclick = openNewEditor
// set json
document.getElementById('setJSON').onclick = function () {
if (!editor) {
openNewEditor()
}
const json = {
'array': [1, 2, 3],
'boolean': true,
'color': '#82b92c',
'null': null,
'number': 123,
'object': {'a': 'b', 'c': 'd'},
'time': 1575599819000,
'string': 'Hello World'
}
editor.set(json)
}
// get json
document.getElementById('getJSON').onclick = function () {
if (!editor) {
alert('No editor is open')
} else {
const json = editor.get()
alert(JSON.stringify(json, null, 2))
}
}
</script>
</body>
</html>
================================================
FILE: examples/25_sync_node_expand.html
================================================
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JSONEditor | Sync Node Expand</title>
<link href="../dist/jsoneditor.css" rel="stylesheet" type="text/css">
<script src="../dist/jsoneditor.js"></script>
<style type="text/css">
#jsoneditor-left {
width: 45%;
height: 90%;
float: left;
margin-left: 2%;
}
#jsoneditor-right {
width: 45%;
height: 90%;
float: right;
margin-right: 2%;
}
</style>
</head>
<body>
<div>
<div id="jsoneditor-left"></div>
<div id="jsoneditor-right"></div>
</div>
<script>
const left_json = {
'student_details': {
'name': {
'first_name': 'foo',
'last_name': 'bar'
},
'school': {
'name': 'foo',
'address': 'bar'
},
'contact': '434343',
'age': '39'
},
'marks': [50, 49, 36]
}
const right_json = {
'marks': [50, 49],
'student_details': {
'name': 'foo bar',
'address': {
'street': 'foo',
'city': 'bar',
'zip': '444444'
},
'school': {
'name': 'foo',
'address': 'bar'
},
'age': '39',
'contact': ['434355', '343433', '324343']
}
}
const editor_left = new JSONEditor(document.getElementById('jsoneditor-left'), {
mode: "tree",
onExpand: (options) => {
if (editor_right) {
editor_right.expand(options)
}
}
}, left_json)
const editor_right = new JSONEditor(document.getElementById('jsoneditor-right'), {
mode: "tree",
onExpand: (options) => {
if (editor_left) {
editor_left.expand(options)
}
}
}, right_json)
</script>
</body>
</html>
================================================
FILE: examples/26_autocomplete_by_schema.html
================================================
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JSONEditor | Auto-completion by schema</title>
<link href="../dist/jsoneditor.css" rel="stylesheet" type="text/css">
<script src="../dist/jsoneditor.js"></script>
<style type="text/css">
body {
width: 600px;
font: 11pt sans-serif;
}
#jsoneditor {
width: 100%;
height: 500px;
}
/* custom bold styling for non-default JSON schema values */
.jsoneditor-is-not-default {
font-weight: bold;
}
</style>
</head>
<body>
<h1>JSON autocompletion by schema</h1>
<p>
This example demonstrates JSON autocompletion by schema. try to change the JSON properties and values and you'll get a suggestions that are based on the schema properties, examples and enums.
</p>
<p>
See <a href="http://json-schema.org/" target="_blank">http://json-schema.org/</a> for more information.
</p>
<div id="jsoneditor"></div>
<script>
const schema = {
"title": "Employee",
"description": "Object containing employee details",
"type": "object",
"properties": {
"firstName": {
"title": "First Name",
"description": "The given name.",
"examples": [
"John"
],
"type": "string"
},
"lastName": {
"title": "Last Name",
"description": "The family name.",
"examples": [
"Smith"
],
"type": "string"
},
"gender": {
"title": "Gender",
"type": "string",
"enum": ["male", "female"],
"examples": ["male", "female"],
},
"availableToHire": {
"type": "boolean",
"default": false
},
"age": {
"description": "Age in years",
"type": "integer",
"minimum": 0,
"examples": [28, 32]
},
"job": {
"$ref": "job"
},
"profession": {
"oneOf": [
{
"$ref": "junior"
},
{
"$ref": "experienced"
},
{
"$ref": "senior"
},
]
},
"publications": {
"type": "array",
"items": {
"type": "object",
"properties": {
"type": {
"type": "string",
"enum": ["academic", "professional"]
},
"journal": {
"type": "string"
}
}
}
}
},
"required": ["firstName", "lastName"]
}
const job = {
"title": "Job description",
"type": "object",
"required": ["address"],
"properties": {
"company": {
"type": "string",
"examples": [
"ACME",
"Dexter Industries"
]
},
"role": {
"description": "Job title.",
"type": "string",
"examples": [
"Human Resources Coordinator",
"Software Developer"
],
"default": "Software Developer"
},
"address": {
"type": "string"
},
"salary": {
"type": "number",
"minimum": 120,
"examples": [100, 110, 120]
}
}
}
const junior = {
"type": "object",
"properties": {
"level": {
"type": "string",
"enum": ["junior"]
},
"experience": {
"description": "years of experience",
"type": "number",
"minimum": 0,
"maximum": 3,
"examples": [0,1,2,3]
}
}
}
const experienced = {
"type": "object",
"properties": {
"level": {
"type": "string",
"enum": ["experienced"]
},
"experience": {
"description": "years of experience",
"type": "number",
"minimum": 3,
"maximum": 7,
"examples": [3,4,5,6,7]
}
}
}
const senior = {
"type": "object",
"properties": {
"level": {
"type": "string",
"enum": ["senior"]
},
"experience": {
"description": "years of experience",
"type": "number",
"minimum": 7,
"examples": [7,8,9,10,11]
}
}
}
const json = {
firstName: "John",
lastName: "Doe",
gender: "male",
age: 28,
availableToHire: true,
job: {
company: "freelance",
role: "developer",
salary: 140,
address: "Jerusalem"
},
profession: {
level: "senior",
experience: 10
},
publications: [{
type: 'academic',
journal: 'MIT today'
},
{
type: 'professional',
journal: 'stack overflow'
}]
}
const options = {
schema: schema,
schemaRefs: {job: job, junior: junior, experienced: experienced, senior: senior},
allowSchemaSuggestions: true,
mode: 'code',
modes: ['code']
}
// create the editor
const container = document.getElementById('jsoneditor')
const editor = new JSONEditor(container, options, json)
schema.properties.firstName.examples.push('David');
editor.setSchema(schema, {job: job, junior: junior, experienced: experienced, senior: senior});
</script>
</body>
</html>
================================================
FILE: examples/27_autocomplete_by_schema_recursive_refs.html
================================================
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JSONEditor | Auto-completion by schema</title>
<link href="../dist/jsoneditor.css" rel="stylesheet" type="text/css">
<script src="../dist/jsoneditor.js"></script>
<style type="text/css">
body {
width: 600px;
font: 11pt sans-serif;
}
#jsoneditor {
width: 100%;
height: 500px;
}
/* custom bold styling for non-default JSON schema values */
.jsoneditor-is-not-default {
font-weight: bold;
}
</style>
</head>
<body>
<h1>JSON autocompletion by schema (recursive schema)</h1>
<p>
This example demonstrates JSON autocompletion by schema. try to change the JSON properties and values and you'll get a suggestions that are based on the schema properties, examples and enums.
In this example the schema that in use is actually a recursive schema, meaninng it has a referance of a sub-schema that refer the same sub-schema again.
</p>
<p>
See <a href="http://json-schema.org/" target="_blank">http://json-schema.org/</a> for more information.
</p>
<div id="jsoneditor"></div>
<script>
const schema = {
"oneOf": [
{
"$ref": "employeeSchema"
}
]
}
const employeeSchema = {
"title": "Employee",
"description": "Object containing employee details",
"type": "object",
"additonalProperties": false,
"properties": {
"personalDetails": {
"$ref": "personal"
},
"availableToHire": {
"type": "boolean",
"default": false
},
"job": {
"$ref": "job"
},
"profession": {
"oneOf": [
{
"$ref": "junior"
},
{
"$ref": "experienced"
},
{
"$ref": "senior"
},
]
},
"reporters": {
"type": "array",
"items": {
"$ref" : "employeeSchema"
}
},
"publications": {
"type": "array",
"items": {
"type": "object",
"properties": {
"type": {
"type": "string",
"enum": ["academic", "professional"]
},
"journal": {
"type": "string"
}
}
}
}
},
"required": ["personalDetails"]
}
const personal = {
"title": "Personal Details",
"type": "object",
"required": ["firstName", "lastName"],
"properties": {
"firstName": {
"title": "First Name",
"description": "The given name.",
"examples": [
"John"
],
"type": "string"
},
"lastName": {
"title": "Last Name",
"description": "The family name.",
"examples": [
"Smith"
],
"type": "string"
},
"gender": {
"title": "Gender",
"type": "string",
"enum": ["male", "female"],
"examples": ["male", "female"],
},
"age": {
"description": "Age in years",
"type": "integer",
"minimum": 0,
"examples": [28, 32]
},
}
}
const job = {
"title": "Job description",
"type": "object",
"required": ["address"],
"properties": {
"company": {
"type": "string",
"examples": [
"ACME",
"Dexter Industries"
]
},
"role": {
"description": "Job title.",
"type": "string",
"examples": [
"Human Resources Coordinator",
"Software Developer"
],
"default": "Software Developer"
},
"address": {
"type": "string"
},
"salary": {
"type": "number",
"minimum": 120,
"examples": [100, 110, 120]
}
}
}
const junior = {
"type": "object",
"properties": {
"level": {
"type": "string",
"enum": ["junior"]
},
"experience": {
"description": "years of experience",
"type": "number",
"minimum": 0,
"maximum": 3,
"examples": [0,1,2,3]
}
}
}
const experienced = {
"type": "object",
"properties": {
"level": {
"type": "string",
"enum": ["experienced"]
},
"experience": {
"description": "years of experience",
"type": "number",
"minimum": 3,
"maximum": 7,
"examples": [3,4,5,6,7]
}
}
}
const senior = {
"type": "object",
"properties": {
"level": {
"type": "string",
"enum": ["senior"]
},
"experience": {
"description": "years of experience",
"type": "number",
"minimum": 7,
"examples": [7,8,9,10,11]
}
}
}
const json = {
personalDetails: {
firstName: "John",
lastName: "Doe",
gender: "male",
age: 28
},
availableToHire: true,
job: {
company: "freelance",
role: "developer",
salary: 140,
address: "Jerusalem"
},
profession: {
level: "senior",
experience: 10
},
reporters: [{
personalDetails: {
firstName: "John",
lastName: "Doe",
gender: "male",
age: 28
},
job: {
company: "freelance",
role: "developer",
salary: 120,
address: "New York"
},
profession: {
level: "junior",
experience: 2
},
}],
publications: [{
type: 'academic',
journal: 'MIT today'
},
{
type: 'professional',
journal: 'stack overflow'
}]
}
const options = {
schema: schema,
schemaRefs: {job, junior, experienced, senior, personal, employeeSchema},
allowSchemaSuggestions: true,
mode: 'code',
modes: ['code']
}
// create the editor
const container = document.getElementById('jsoneditor')
const editor = new JSONEditor(container, options, json)
</script>
</body>
</html>
================================================
FILE: examples/28_autocomplete_text_value_objects.html
================================================
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JSONEditor | Auto Complete with Text/Value Objects</title>
<link href="../dist/jsoneditor.css" rel="stylesheet" type="text/css">
<script src="../dist/jsoneditor.js"></script>
<style type="text/css">
body {
width: 600px;
font: 11pt sans-serif;
}
#jsoneditor {
width: 100%;
height: 500px;
}
/* custom bold styling for non-default JSON schema values */
.jsoneditor-is-not-default {
font-weight: bold;
}
</style>
</head>
<body>
<h1>Auto Complete with Text/Value Objects</h1>
<p>
This example demonstrates the enhanced autocomplete functionality using objects with separate text (display) and value (actual value) properties.
You can search by either the company name or stock symbol. Try typing "Apple", "Microsoft", "Google", "AAPL", "MSFT", or "GOOGL".
The dropdown shows company names, but the selected value will be the stock symbol.
</p>
<div id="jsoneditor"></div>
<script>
// Object array with text/value properties
const container = document.getElementById('jsoneditor')
const options = {
autocomplete: {
filter: 'contain', // Use contain filter for better search experience
getOptions: function () {
return [
{ text: 'Apple Inc.', value: 'AAPL' },
{ text: 'Microsoft Corporation', value: 'MSFT' },
{ text: 'Alphabet Inc. (Google)', value: 'GOOGL' },
{ text: 'Amazon.com Inc.', value: 'AMZN' },
{ text: 'Tesla Inc.', value: 'TSLA' },
{ text: 'Meta Platforms Inc. (Facebook)', value: 'META' },
{ text: 'NVIDIA Corporation', value: 'NVDA' },
{ text: 'Netflix Inc.', value: 'NFLX' },
{ text: 'PayPal Holdings Inc.', value: 'PYPL' },
{ text: 'Adobe Inc.', value: 'ADBE' }
];
}
}
}
const json = {
'portfolio': ['AAPL', 'GOOGL'],
'watchlist': ['TSLA', 'META'],
'favorite_stock': 'MSFT',
'description': 'Search by company name or stock symbol - value stored is the symbol'
}
const editor = new JSONEditor(container, options, json)
</script>
</body>
</html>
================================================
FILE: examples/29_autocomplete_multiple_fields.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>JSONEditor | Auto Complete with Multiple Searchable Fields</title>
<link href="../dist/jsoneditor.css" rel="stylesheet" type="text/css" />
<script src="../dist/jsoneditor.js"></script>
<style type="text/css">
body {
width: 600px;
font: 11pt sans-serif;
}
#jsoneditor {
width: 100%;
height: 500px;
}
/* custom bold styling for non-default JSON schema values */
.jsoneditor-is-not-default {
font-weight: bold;
}
</style>
</head>
<body>
<h1>Auto Complete with Multiple Searchable Fields</h1>
<p>
This example demonstrates advanced autocomplete functionality with custom
filtering that searches across multiple fields within each option.
Countries with multiple searchable fields - you can search by country
name, capital city, or country code. Try typing "United States",
"Washington", "US", "Germany", "Berlin", "DE", "Japan", "Tokyo", or "JP".
</p>
<div id="jsoneditor"></div>
<script>
// Advanced autocomplete with multiple searchable fields
const container = document.getElementById("jsoneditor");
// Country data with multiple searchable fields
const countries = [
{ name: "United States", capital: "Washington", code: "US" },
{ name: "United Kingdom", capital: "London", code: "GB" },
{ name: "Germany", capital: "Berlin", code: "DE" },
{ name: "France", capital: "Paris", code: "FR" },
{ name: "Japan", capital: "Tokyo", code: "JP" },
{ name: "Australia", capital: "Canberra", code: "AU" },
{ name: "Canada", capital: "Ottawa", code: "CA" },
{ name: "Brazil", capital: "Brasília", code: "BR" },
{ name: "India", capital: "New Delhi", code: "IN" },
{ name: "China", capital: "Beijing", code: "CN" },
{ name: "Italy", capital: "Rome", code: "IT" },
{ name: "Spain", capital: "Madrid", code: "ES" },
{ name: "Russia", capital: "Moscow", code: "RU" },
{ name: "South Korea", capital: "Seoul", code: "KR" },
{ name: "Mexico", capital: "Mexico City", code: "MX" },
];
const normalizeCase = (text = "", config) => {
return config.caseSensitive ? text : text.toLowerCase();
};
const options = {
autocomplete: {
getOptions: function () {
// Convert country data to text/value format for autocomplete
return countries.map((country) => ({
text: country.name,
value: country.code,
// Store additional searchable fields for custom filtering
_searchableFields: [country.name, country.capital, country.code],
}));
},
filter: function (token, match, config) {
const normalizedToken = normalizeCase(token, config);
// Custom filter that searches across multiple fields
if (typeof match === "string") {
// Handle simple string matches
const normalizedMatch = normalizeCase(match, config);
return normalizedMatch.indexOf(normalizedToken) > -1;
}
if (match && match._searchableFields) {
// Search across all searchable fields
return match._searchableFields.some((field) => {
const normalizedField = normalizeCase(field, config);
return normalizedField.indexOf(normalizedToken) > -1;
});
}
const textMatch =
match.text &&
normalizeCase(match.text, config).indexOf(normalizedToken) > -1;
const valueMatch =
match.value &&
normalizeCase(match.value, config).indexOf(normalizedToken) > -1;
return textMatch || valueMatch;
},
},
};
const json = {
user_countries: ["US", "DE"],
origin_country: "JP",
shipping_countries: ["US", "CA", "GB"],
description:
"Search by country name, capital, or code - value stored is the country code",
};
const editor = new JSONEditor(container, options, json);
</script>
</body>
</html>
================================================
FILE: examples/css/darktheme.css
================================================
/* dark styling of the editor */
div.jsoneditor,
div.jsoneditor-menu {
border-color: #4b4b4b;
}
div.jsoneditor-menu {
background-color: #4b4b4b;
}
div.jsoneditor-tree,
div.jsoneditor textarea.jsoneditor-text {
background-color: #666666;
color: #ffffff;
}
div.jsoneditor-field,
div.jsoneditor-value {
color: #ffffff;
}
table.jsoneditor-search div.jsoneditor-frame {
background: #808080;
}
tr.jsoneditor-highlight,
tr.jsoneditor-selected {
background-color: #808080;
}
div.jsoneditor-field[contenteditable=true]:focus,
div.jsoneditor-field[contenteditable=true]:hover,
div.jsoneditor-value[contenteditable=true]:focus,
div.jsoneditor-value[contenteditable=true]:hover,
div.jsoneditor-field.jsoneditor-highlight,
div.jsoneditor-value.jsoneditor-highlight {
background-color: #808080;
border-color: #808080;
}
div.jsoneditor-field.jsoneditor-highlight-active,
div.jsoneditor-field.jsoneditor-highlight-active:focus,
div.jsoneditor-field.jsoneditor-highlight-active:hover,
div.jsoneditor-value.jsoneditor-highlight-active,
div.jsoneditor-value.jsoneditor-highlight-active:focus,
div.jsoneditor-value.jsoneditor-highlight-active:hover {
background-color: #b1b1b1;
border-color: #b1b1b1;
}
div.jsoneditor-tree button:focus {
background-color: #868686;
}
/* coloring of JSON in tree mode */
div.jsoneditor-readonly {
color: #acacac;
}
div.jsoneditor td.jsoneditor-separator {
color: #acacac;
}
div.jsoneditor-value.jsoneditor-string {
color: #00ff88;
}
div.jsoneditor-value.jsoneditor-object,
div.jsoneditor-value.jsoneditor-array {
color: #bababa;
}
div.jsoneditor-value.jsoneditor-number {
color: #ff4040;
}
div.jsoneditor-value.jsoneditor-boolean {
color: #ff8048;
}
div.jsoneditor-value.jsoneditor-null {
color: #49a7fc;
}
div.jsoneditor-value.jsoneditor-invalid {
color: white;
}
================================================
FILE: examples/react_advanced_demo/.gitignore
================================================
# See https://help.github.com/ignore-files/ for more about ignoring files.
# dependencies
/node_modules
# testing
/coverage
# production
/build
# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
npm-debug.log*
yarn-debug.log*
yarn-error.log*
================================================
FILE: examples/react_advanced_demo/README.md
================================================
# JSONEditor React advanced demo
This project was bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app).
## Install
Install dependencies once:
```
npm install
```
## Run
To run the demo:
```
npm start
```
This will open a development server at http://localhost:3000
================================================
FILE: examples/react_advanced_demo/package.json
================================================
{
"name": "react_advanced_demo",
"version": "0.1.0",
"private": true,
"dependencies": {
"jsoneditor": "latest",
"lodash": "4.17.23",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-scripts": "5.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
================================================
FILE: examples/react_advanced_demo/public/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>JSONEditor | React advanced demo</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
================================================
FILE: examples/react_advanced_demo/src/App.css
================================================
.app .contents {
width: 500px;
height: 400px;
}
.app .contents .mode {
padding: 10px 0;
}
.app .contents .code {
background: #f5f5f5;
overflow: auto;
}
================================================
FILE: examples/react_advanced_demo/src/App.js
================================================
import React, { Component } from 'react';
import JSONEditorReact from './JSONEditorReact';
import './App.css';
const schema = {
title: 'Example Schema',
type: 'object',
properties: {
array: {
type: 'array',
items: {
type: 'number'
}
},
boolean: {
type: 'boolean'
},
number: {
type: 'number'
}
},
required: ['array', 'string', 'boolean']
};
const json = {
'array': [1, 2, 3],
'boolean': true,
'null': null,
'number': 'four',
'object': {'a': 'b', 'c': 'd'},
'string': 'Hello World'
};
const modes = ['tree', 'form', 'view', 'code', 'text'];
class App extends Component {
state = {
schema,
text: JSON.stringify(json, null, 2),
mode: 'tree'
};
render() {
return (
<div className="app">
<h1>JSONEditor React advanced demo</h1>
<div classN
gitextract_p3pjbjxq/
├── .babelrc
├── .github/
│ ├── FUNDING.yml
│ └── workflows/
│ └── build.yaml
├── .gitignore
├── .npmignore
├── CONTRIBUTING.md
├── HISTORY.md
├── LICENSE
├── NOTICE
├── README.md
├── SECURITY.md
├── docs/
│ ├── api.md
│ ├── shortcut_keys.md
│ ├── styling.md
│ └── usage.md
├── examples/
│ ├── 01_basic_usage.html
│ ├── 02_viewer.html
│ ├── 03_switch_mode.html
│ ├── 04_load_and_save.html
│ ├── 05_custom_fields_editable.html
│ ├── 06_custom_styling.html
│ ├── 07_json_schema_validation.html
│ ├── 08_custom_ace.html
│ ├── 09_readonly_text_mode.html
│ ├── 10_templates.html
│ ├── 11_autocomplete_basic.html
│ ├── 12_autocomplete_dynamic.html
│ ├── 13_autocomplete_advanced.html
│ ├── 14_translate.html
│ ├── 15_selection_api.html
│ ├── 16_synchronize_editors.html
│ ├── 17_on_event_api.html
│ ├── 18_custom_validation.html
│ ├── 19_custom_validation_async.html
│ ├── 20_custom_css_style_for_nodes.html
│ ├── 21_customize_context_menu.html
│ ├── 22_on_validation_event.html
│ ├── 23_custom_query_language.html
│ ├── 24_new_window.html
│ ├── 25_sync_node_expand.html
│ ├── 26_autocomplete_by_schema.html
│ ├── 27_autocomplete_by_schema_recursive_refs.html
│ ├── 28_autocomplete_text_value_objects.html
│ ├── 29_autocomplete_multiple_fields.html
│ ├── css/
│ │ └── darktheme.css
│ ├── react_advanced_demo/
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── public/
│ │ │ └── index.html
│ │ └── src/
│ │ ├── App.css
│ │ ├── App.js
│ │ ├── App.test.js
│ │ ├── JSONEditorReact.css
│ │ ├── JSONEditorReact.js
│ │ ├── index.css
│ │ └── index.js
│ ├── react_demo/
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── public/
│ │ │ └── index.html
│ │ └── src/
│ │ ├── App.css
│ │ ├── App.js
│ │ ├── App.test.js
│ │ ├── JSONEditorDemo.css
│ │ ├── JSONEditorDemo.js
│ │ ├── index.css
│ │ └── index.js
│ └── requirejs_demo/
│ ├── requirejs_demo.html
│ └── scripts/
│ └── main.js
├── greenkeeper.json
├── gulpfile.js
├── index.js
├── misc/
│ └── how_to_publish.md
├── package.json
├── src/
│ ├── docs/
│ │ └── which files do I need.md
│ ├── js/
│ │ ├── ContextMenu.js
│ │ ├── ErrorTable.js
│ │ ├── FocusTracker.js
│ │ ├── Highlighter.js
│ │ ├── History.js
│ │ ├── JSONEditor.js
│ │ ├── ModeSwitcher.js
│ │ ├── Node.js
│ │ ├── NodeHistory.js
│ │ ├── SchemaTextCompleter.js
│ │ ├── SearchBox.js
│ │ ├── TreePath.js
│ │ ├── ace/
│ │ │ ├── index.js
│ │ │ └── theme-jsoneditor.js
│ │ ├── appendNodeFactory.js
│ │ ├── assets/
│ │ │ ├── jsonlint/
│ │ │ │ ├── README.md
│ │ │ │ └── jsonlint.js
│ │ │ └── selectr/
│ │ │ ├── README.md
│ │ │ ├── selectr.js
│ │ │ └── selectr.scss
│ │ ├── autocomplete.js
│ │ ├── constants.js
│ │ ├── createAbsoluteAnchor.js
│ │ ├── header.js
│ │ ├── i18n.js
│ │ ├── jmespathQuery.js
│ │ ├── jsonUtils.js
│ │ ├── polyfills.js
│ │ ├── previewmode.js
│ │ ├── showMoreNodeFactory.js
│ │ ├── showSortModal.js
│ │ ├── showTransformModal.js
│ │ ├── textmode.js
│ │ ├── treemode.js
│ │ ├── tryRequireAjv.js
│ │ ├── tryRequireThemeJsonEditor.js
│ │ ├── types.js
│ │ ├── util.js
│ │ ├── validationUtils.js
│ │ └── vanilla-picker/
│ │ └── index.js
│ └── scss/
│ ├── img/
│ │ └── description.txt
│ ├── jsoneditor/
│ │ ├── _autocomplete.scss
│ │ ├── _contextmenu.scss
│ │ ├── _editor.scss
│ │ ├── _menu.scss
│ │ ├── _navigationbar.scss
│ │ ├── _reset.scss
│ │ ├── _searchbox.scss
│ │ ├── _statusbar.scss
│ │ ├── _treepath.scss
│ │ └── _variables.scss
│ └── jsoneditor.scss
└── test/
├── Node.test.js
├── SchemaTextCompleter.test.js
├── couchdbeditor.html
├── data/
│ ├── jsons.js
│ └── schemas.js
├── jsonUtils.test.js
├── setup.js
├── test_bootstrap.html
├── test_build.html
├── test_build_min.html
├── test_code_mode.html
├── test_color_picker.html
├── test_destroy.html
├── test_enum.html
├── test_enum_2.html
├── test_focus_tracker.html
├── test_get_inner_text.html
├── test_large_array.html
├── test_materialize.html
├── test_minimalist_min.html
├── test_popup_anchor.html
├── test_preview_load_save.html
├── test_schema.html
├── test_update.html
└── util.test.js
SYMBOL INDEX (327 symbols across 36 files)
FILE: examples/react_advanced_demo/src/App.js
class App (line 37) | class App extends Component {
method render (line 44) | render() {
FILE: examples/react_advanced_demo/src/JSONEditorReact.js
class JSONEditorReact (line 10) | class JSONEditorReact extends Component {
method componentDidMount (line 11) | componentDidMount () {
method componentDidUpdate (line 30) | componentDidUpdate() {
method componentWillUnmount (line 54) | componentWillUnmount () {
method render (line 60) | render() {
FILE: examples/react_demo/src/App.js
class App (line 6) | class App extends Component {
method render (line 18) | render() {
FILE: examples/react_demo/src/JSONEditorDemo.js
class JSONEditorDemo (line 8) | class JSONEditorDemo extends Component {
method componentDidMount (line 9) | componentDidMount () {
method componentWillUnmount (line 19) | componentWillUnmount () {
method componentDidUpdate (line 25) | componentDidUpdate() {
method render (line 29) | render() {
FILE: gulpfile.js
constant NAME (line 14) | const NAME = 'jsoneditor'
constant NAME_MINIMALIST (line 15) | const NAME_MINIMALIST = 'jsoneditor-minimalist'
constant ENTRY (line 16) | const ENTRY = './src/js/JSONEditor.js'
constant HEADER (line 17) | const HEADER = './src/js/header.js'
constant IMAGE (line 18) | const IMAGE = './src/scss/img/jsoneditor-icons.svg'
constant DOCS (line 19) | const DOCS = './src/docs/*'
constant DIST (line 20) | const DIST = path.join(__dirname, 'dist')
function createBanner (line 23) | function createBanner () {
function minify (line 103) | function minify (name) {
FILE: src/js/ContextMenu.js
class ContextMenu (line 18) | class ContextMenu {
method constructor (line 19) | constructor (items, options) {
method _getVisibleButtons (line 180) | _getVisibleButtons () {
method show (line 208) | show (anchor, frame, ignoreParent) {
method hide (line 277) | hide () {
method _onExpandItem (line 303) | _onExpandItem (domItem) {
method _onKeyDown (line 347) | _onKeyDown (event) {
FILE: src/js/ErrorTable.js
class ErrorTable (line 10) | class ErrorTable {
method constructor (line 11) | constructor (config) {
method getErrorTable (line 45) | getErrorTable () {
method getErrorCounter (line 49) | getErrorCounter () {
method getWarningIcon (line 53) | getWarningIcon () {
method getErrorIcon (line 57) | getErrorIcon () {
method toggleTableVisibility (line 61) | toggleTableVisibility () {
method setErrors (line 66) | setErrors (errors, errorLocations) {
FILE: src/js/FocusTracker.js
class FocusTracker (line 14) | class FocusTracker {
method constructor (line 15) | constructor (config) {
method destroy (line 49) | destroy () {
method _onEvent (line 65) | _onEvent (event) {
FILE: src/js/Highlighter.js
class Highlighter (line 8) | class Highlighter {
method constructor (line 9) | constructor () {
method highlight (line 17) | highlight (node) {
method unhighlight (line 41) | unhighlight () {
method _cancelUnhighlight (line 65) | _cancelUnhighlight () {
method lock (line 76) | lock () {
method unlock (line 83) | unlock () {
FILE: src/js/History.js
class History (line 8) | class History {
method constructor (line 9) | constructor (onChange, calculateItemSize, limit) {
method add (line 18) | add (item) {
method _calculateHistorySize (line 35) | _calculateHistorySize () {
method undo (line 46) | undo () {
method redo (line 58) | redo () {
method canUndo (line 70) | canUndo () {
method canRedo (line 74) | canRedo () {
method clear (line 78) | clear () {
FILE: src/js/JSONEditor.js
function JSONEditor (line 103) | function JSONEditor (container, options, json) {
FILE: src/js/ModeSwitcher.js
class ModeSwitcher (line 14) | class ModeSwitcher {
method constructor (line 15) | constructor (container, modes, current, onSwitch) {
method focus (line 110) | focus () {
method destroy (line 117) | destroy () {
FILE: src/js/Node.js
class Node (line 49) | class Node {
method constructor (line 50) | constructor (editor, params) {
method getMaxVisibleChilds (line 76) | getMaxVisibleChilds () {
method _updateEditability (line 86) | _updateEditability () {
method getPath (line 131) | getPath () {
method getInternalPath (line 148) | getInternalPath () {
method getName (line 164) | getName () {
method findNodeByPath (line 176) | findNodeByPath (path) {
method findNodeByInternalPath (line 200) | findNodeByInternalPath (internalPath) {
method serialize (line 220) | serialize () {
method findNode (line 232) | findNode (jsonPath) {
method findParents (line 258) | findParents () {
method setError (line 276) | setError (error, child) {
method updateError (line 288) | updateError () {
method getIndex (line 381) | getIndex () {
method setParent (line 394) | setParent (parent) {
method setField (line 403) | setField (field, fieldEditable) {
method getField (line 413) | getField () {
method setValue (line 427) | setValue (value, type) {
method setInternalValue (line 550) | setInternalValue (internalValue) {
method recreateDom (line 649) | recreateDom () {
method getValue (line 665) | getValue () {
method getInternalValue (line 691) | getInternalValue () {
method getLevel (line 721) | getLevel () {
method getNodePath (line 729) | getNodePath () {
method clone (line 741) | clone () {
method expand (line 776) | expand (recurse) {
method collapse (line 804) | collapse (recurse) {
method showChilds (line 831) | showChilds () {
method _getNextTr (line 876) | _getNextTr () {
method hide (line 890) | hide (options) {
method hideChilds (line 908) | hideChilds (options) {
method _updateCssClassName (line 943) | _updateCssClassName () {
method recursivelyUpdateCssClassesOnNodes (line 962) | recursivelyUpdateCssClassesOnNodes () {
method expandTo (line 974) | expandTo () {
method appendChild (line 993) | appendChild (node, visible, updateDom) {
method moveBefore (line 1037) | moveBefore (node, beforeNode, updateDom) {
method insertBefore (line 1081) | insertBefore (node, beforeNode, updateDom) {
method insertAfter (line 1136) | insertAfter (node, afterNode) {
method search (line 1156) | search (text, results) {
method scrollTo (line 1219) | scrollTo (callback) {
method expandPathToNode (line 1230) | expandPathToNode () {
method focus (line 1254) | focus (elementName) {
method containsNode (line 1328) | containsNode (node) {
method removeChild (line 1355) | removeChild (node, updateDom) {
method _remove (line 1391) | _remove (node) {
method changeType (line 1399) | changeType (newType) {
method deepEqual (line 1478) | deepEqual (json) {
method _getDomValue (line 1524) | _getDomValue () {
method _setValueError (line 1563) | _setValueError (message) {
method _clearValueError (line 1570) | _clearValueError () {
method _setFieldError (line 1582) | _setFieldError (message) {
method _clearFieldError (line 1589) | _clearFieldError () {
method _onChangeValue (line 1600) | _onChangeValue () {
method _onChangeField (line 1631) | _onChangeField () {
method _updateDomValue (line 1667) | _updateDomValue () {
method _updateEnumOptions (line 1852) | _updateEnumOptions () {
method _deleteDomColor (line 1869) | _deleteDomColor () {
method _updateDomField (line 1886) | _updateDomField () {
method _getDomField (line 1925) | _getDomField (forceUnique) {
method _updateDomDefault (line 1976) | _updateDomDefault () {
method _showTimestampTag (line 2006) | _showTimestampTag () {
method clearDom (line 2034) | clearDom () {
method getDom (line 2047) | getDom () {
method isVisible (line 2100) | isVisible () {
method isDescendantOf (line 2110) | isDescendantOf (node) {
method _createDomField (line 2127) | _createDomField () {
method setHighlight (line 2136) | setHighlight (highlight) {
method setSelected (line 2161) | setSelected (selected, isFirst) {
method updateValue (line 2198) | updateValue (value) {
method updateField (line 2209) | updateField (field) {
method updateDom (line 2226) | updateDom (options) {
method _updateSchema (line 2361) | _updateSchema () {
method _updateDomIndexes (line 2383) | _updateDomIndexes () {
method _createDomValue (line 2413) | _createDomValue () {
method _createDomExpandButton (line 2445) | _createDomExpandButton () {
method _createDomTree (line 2467) | _createDomTree () {
method onEvent (line 2518) | onEvent (event) {
method _onEvent (line 2729) | _onEvent (event) {
method onKeyDown (line 2756) | onKeyDown (event) {
method _onExpand (line 3091) | _onExpand (recurse) {
method _showColorPicker (line 3129) | _showColorPicker () {
method getFieldNames (line 3157) | getFieldNames (excludeNode) {
method _onInsertBefore (line 3174) | _onInsertBefore (field, value, type) {
method _onInsertAfter (line 3208) | _onInsertAfter (field, value, type) {
method _onAppend (line 3239) | _onAppend (field, value, type) {
method _onChangeType (line 3267) | _onChangeType (newType) {
method sort (line 3294) | sort (path, direction, triggerAction = true) {
method update (line 3356) | update (newValue) {
method _detachFromDom (line 3375) | _detachFromDom () {
method _attachToDom (line 3399) | _attachToDom (domAnchor) {
method transform (line 3418) | transform (query) {
method extract (line 3452) | extract () {
method getNestedChild (line 3479) | getNestedChild (path) {
method findChildByProperty (line 3496) | findChildByProperty (prop) {
method getAppendDom (line 3508) | getAppendDom () {
method getShowMoreDom (line 3520) | getShowMoreDom () {
method nextSibling (line 3531) | nextSibling () {
method _previousNode (line 3540) | _previousNode () {
method _nextNode (line 3560) | _nextNode () {
method _firstNode (line 3581) | _firstNode () {
method _lastNode (line 3597) | _lastNode () {
method _previousElement (line 3617) | _previousElement (elem) {
method _nextElement (line 3649) | _nextElement (elem) {
method _getElementName (line 3683) | _getElementName (element) {
method _hasChilds (line 3694) | _hasChilds () {
method addTemplates (line 3698) | addTemplates (menu, append) {
method showContextMenu (line 3731) | showContextMenu (anchor, onClose) {
method showSortModal (line 3961) | showSortModal () {
method showTransformModal (line 3980) | showTransformModal () {
method _getType (line 4000) | _getType (value) {
method _escapeHTML (line 4020) | _escapeHTML (text) {
method _unescapeHTML (line 4047) | _unescapeHTML (escapedText) {
method _escapeJSON (line 4067) | _escapeJSON (text) {
method updateNodeName (line 4099) | updateNodeName () {
method recursivelyUpdateNodeName (line 4129) | recursivelyUpdateNodeName () {
constant DEFAULT_MAX_VISIBLE_CHILDS (line 4149) | const DEFAULT_MAX_VISIBLE_CHILDS = 100
function getInternalPath (line 4766) | function getInternalPath (node) {
function getField (line 4771) | function getField (node) {
function hasOwnProperty (line 4775) | function hasOwnProperty (object, key) {
FILE: src/js/NodeHistory.js
class NodeHistory (line 10) | class NodeHistory {
method constructor (line 11) | constructor (editor) {
method onChange (line 210) | onChange () {}
method add (line 223) | add (action, params) {
method clear (line 243) | clear () {
method canUndo (line 255) | canUndo () {
method canRedo (line 263) | canRedo () {
method undo (line 270) | undo () {
method redo (line 298) | redo () {
method destroy (line 327) | destroy () {
FILE: src/js/SchemaTextCompleter.js
class SchemaTextCompleter (line 16) | class SchemaTextCompleter {
method constructor (line 17) | constructor (schema, schemaRefs) {
method _buildSuggestions (line 25) | _buildSuggestions () {
method _handleRef (line 33) | _handleRef (currectPath, refName, suggestionsObj) {
method _handleSchemaEntry (line 39) | _handleSchemaEntry (currectPath, schemaNode, suggestionsObj) {
method _handleObject (line 70) | _handleObject (currectPath, schemaNode, suggestionsObj) {
method _handlePrimitive (line 84) | _handlePrimitive (currectPath, schemaNode, suggestionsObj) {
method _handleBoolean (line 96) | _handleBoolean (currectPath, schemaNode, suggestionsObj) {
method _handleArray (line 104) | _handleArray (currectPath, schemaNode, suggestionsObj) {
method _handleOfCondition (line 112) | _handleOfCondition (currectPath, schemaNode, suggestionsObj) {
method _checkOfConditon (line 122) | _checkOfConditon (entry) {
method getCompletions (line 137) | getCompletions (editor, session, pos, prefix, callback) {
FILE: src/js/SearchBox.js
class SearchBox (line 11) | class SearchBox {
method constructor (line 12) | constructor (editor, container) {
method next (line 94) | next (focus) {
method previous (line 109) | previous (focus) {
method _setActiveResult (line 127) | _setActiveResult (index, focus) {
method _clearDelay (line 172) | _clearDelay () {
method _onDelayedSearch (line 185) | _onDelayedSearch (event) {
method _onSearch (line 202) | _onSearch (forceSearch) {
method _onKeyDown (line 251) | _onKeyDown (event) {
method _onKeyUp (line 281) | _onKeyUp (event) {
method clear (line 292) | clear () {
method forceSearch (line 300) | forceSearch () {
method isEmpty (line 308) | isEmpty () {
method destroy (line 315) | destroy () {
FILE: src/js/TreePath.js
class TreePath (line 13) | class TreePath {
method constructor (line 14) | constructor (container, root) {
method reset (line 29) | reset () {
method setPath (line 38) | setPath (pathObjs) {
method onSectionSelected (line 127) | onSectionSelected (callback) {
method onContextMenuItemSelected (line 137) | onContextMenuItemSelected (callback) {
FILE: src/js/appendNodeFactory.js
function appendNodeFactory (line 11) | function appendNodeFactory (Node) {
FILE: src/js/assets/jsonlint/jsonlint.js
function popStack (line 83) | function popStack (n) {
function lex (line 89) | function lex() {
FILE: src/js/assets/selectr/selectr.js
function isset (line 199) | function isset(obj, prop) {
function appendItem (line 209) | function appendItem(item, parent, custom) {
FILE: src/js/autocomplete.js
function autocomplete (line 99) | function autocomplete (config) {
FILE: src/js/constants.js
constant DEFAULT_MODAL_ANCHOR (line 1) | const DEFAULT_MODAL_ANCHOR = document.body
constant SIZE_LARGE (line 2) | const SIZE_LARGE = 10 * 1024 * 1024 // 10 MB
constant MAX_PREVIEW_CHARACTERS (line 3) | const MAX_PREVIEW_CHARACTERS = 20000
constant PREVIEW_HISTORY_LIMIT (line 4) | const PREVIEW_HISTORY_LIMIT = 2 * 1024 * 1024 * 1024 // 2 GB
FILE: src/js/createAbsoluteAnchor.js
function createAbsoluteAnchor (line 12) | function createAbsoluteAnchor (anchor, parent, onDestroy, destroyOnMouse...
function getRootNode (line 91) | function getRootNode (node) {
function hasOwnProperty (line 97) | function hasOwnProperty (object, key) {
FILE: src/js/i18n.js
function setLanguage (line 949) | function setLanguage (lang) {
function setLanguages (line 961) | function setLanguages (languages) {
function translate (line 974) | function translate (key, data, lang) {
FILE: src/js/jmespathQuery.js
function createQuery (line 12) | function createQuery (json, queryOptions) {
function executeQuery (line 73) | function executeQuery (json, query) {
FILE: src/js/jsonUtils.js
function stringifyPartial (line 24) | function stringifyPartial (value, space, limit) {
function stringifyValue (line 52) | function stringifyValue (value, space, indent, limit) {
function stringifyArray (line 83) | function stringifyArray (array, space, indent, limit) {
function stringifyObject (line 122) | function stringifyObject (object, space, indent, limit) {
function repeat (line 165) | function repeat (text, times) {
function slice (line 179) | function slice (text, limit) {
function containsArray (line 191) | function containsArray (jsonText) {
function hasOwnProperty (line 195) | function hasOwnProperty (object, key) {
FILE: src/js/polyfills.js
function polyfill (line 4) | function polyfill (item) {
FILE: src/js/previewmode.js
function onSort (line 373) | function onSort (json, sortedBy) {
FILE: src/js/showMoreNodeFactory.js
function showMoreNodeFactory (line 9) | function showMoreNodeFactory (Node) {
FILE: src/js/showSortModal.js
function showSortModal (line 18) | function showSortModal (container, json, onSort, options) {
FILE: src/js/showTransformModal.js
constant DEFAULT_DESCRIPTION (line 8) | const DEFAULT_DESCRIPTION =
function showTransformModal (line 26) | function showTransformModal (
FILE: src/js/textmode.js
constant DEFAULT_THEME (line 34) | const DEFAULT_THEME = 'ace/theme/jsoneditor'
function onSort (line 490) | function onSort (sortedBy) {
function updateDisplay (line 655) | function updateDisplay () {
function load (line 1101) | function load () {
FILE: src/js/treemode.js
function onEvent (line 964) | function onEvent (event) {
function getName (line 1277) | function getName (node) {
FILE: src/js/util.js
constant MAX_ITEMS_FIELDS_COLLECTION (line 10) | const MAX_ITEMS_FIELDS_COLLECTION = 10000
constant YEAR_2000 (line 11) | const YEAR_2000 = 946684800000
function parse (line 19) | function parse (jsonString) {
function tryJsonRepair (line 35) | function tryJsonRepair (jsonString) {
function escapeUnicodeChars (line 50) | function escapeUnicodeChars (
function validate (line 71) | function validate (jsonString) {
function extend (line 85) | function extend (a, b) {
function clear (line 99) | function clear (a) {
function getType (line 113) | function getType (object) {
function isUrl (line 146) | function isUrl (text) {
function isArray (line 156) | function isArray (obj) {
function getWindow (line 166) | function getWindow (element) {
function getAbsoluteLeft (line 176) | function getAbsoluteLeft (elem) {
function getAbsoluteTop (line 187) | function getAbsoluteTop (elem) {
function addClassName (line 197) | function addClassName (elem, className) {
function removeAllClassNames (line 209) | function removeAllClassNames (elem) {
function removeClassName (line 218) | function removeClassName (elem, className) {
function stripFormatting (line 232) | function stripFormatting (divElement) {
function setEndOfContentEditable (line 266) | function setEndOfContentEditable (contentEditableElement) {
function selectContentEditable (line 283) | function selectContentEditable (contentEditableElement) {
function getSelection (line 303) | function getSelection () {
function setSelection (line 318) | function setSelection (range) {
function getSelectionOffset (line 337) | function getSelectionOffset () {
function setSelectionOffset (line 359) | function setSelectionOffset (params) {
function getInnerText (line 384) | function getInnerText (element, buffer) {
function removeReturnsAndSurroundingWhitespace (line 448) | function removeReturnsAndSurroundingWhitespace (text) {
function hasParentNode (line 460) | function hasParentNode (elem, parent) {
function getInternetExplorerVersion (line 479) | function getInternetExplorerVersion () {
function isFirefox (line 507) | function isFirefox () {
function addEventListener (line 520) | function addEventListener (element, action, listener, useCapture) {
function removeEventListener (line 545) | function removeEventListener (element, action, listener, useCapture) {
function isChildOf (line 566) | function isChildOf (elem, parent) {
function parsePath (line 583) | function parsePath (jsonPath) {
function stringifyPath (line 659) | function stringifyPath (path) {
function improveSchemaError (line 678) | function improveSchemaError (error) {
function isPromise (line 705) | function isPromise (object) {
function isValidValidationError (line 714) | function isValidValidationError (validationError) {
function insideRect (line 726) | function insideRect (parent, child, margin) {
function debounce (line 748) | function debounce (func, wait, immediate) {
function textDiff (line 771) | function textDiff (oldText, newText) {
function getInputSelection (line 798) | function getInputSelection (el) {
function getIndexForPosition (line 868) | function getIndexForPosition (el, row, column) {
function getPositionForPath (line 886) | function getPositionForPath (text, paths) {
function compileJSONPointer (line 921) | function compileJSONPointer (path) {
function getColorCSS (line 938) | function getColorCSS (color) {
function isValidColor (line 949) | function isValidColor (color) {
function makeFieldTooltip (line 959) | function makeFieldTooltip (schema, locale) {
function get (line 1007) | function get (object, path) {
function findUniqueName (line 1023) | function findUniqueName (name, existingPropNames) {
function getChildPaths (line 1047) | function getChildPaths (json, includeObjects) {
function sort (line 1083) | function sort (array, path, direction) {
function sortObjectKeys (line 1103) | function sortObjectKeys (object, direction) {
function parseString (line 1122) | function parseString (str) {
function isTimestamp (line 1163) | function isTimestamp (field, value) {
function formatSize (line 1177) | function formatSize (size) {
function limitCharacters (line 1208) | function limitCharacters (text, maxCharacterCount) {
function isObject (line 1221) | function isObject (value) {
function contains (line 1231) | function contains (array, item) {
function isValidationErrorChanged (line 1240) | function isValidationErrorChanged (currErr, prevErr) {
function uniqueMergeArrays (line 1269) | function uniqueMergeArrays (inputArray1, inputArray2) {
function asyncExec (line 1275) | function asyncExec (callback) {
function hasOwnProperty (line 1279) | function hasOwnProperty (object, key) {
FILE: src/js/validationUtils.js
function validateCustom (line 8) | function validateCustom (json, onValidate) {
FILE: test/setup.js
function setUpTestEnvironment (line 8) | function setUpTestEnvironment (locale) {
Condensed preview — 152 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (929K chars).
[
{
"path": ".babelrc",
"chars": 48,
"preview": "{\n \"presets\": [\n [\"@babel/preset-env\"]\n ]\n}"
},
{
"path": ".github/FUNDING.yml",
"chars": 18,
"preview": "github: josdejong\n"
},
{
"path": ".github/workflows/build.yaml",
"chars": 679,
"preview": "name: Node.js CI\n\non: [push, pull_request]\n\njobs:\n build:\n\n runs-on: ubuntu-latest\n\n strategy:\n matrix:\n "
},
{
"path": ".gitignore",
"chars": 79,
"preview": ".idea\n*.iml\n.vscode\nbuild\ndist\ndownloads\nnode_modules\n*.zip\nnpm-debug.log\n/.vs\n"
},
{
"path": ".npmignore",
"chars": 129,
"preview": "bower.json\nCONTRIBUTING.md\ndownloads\nmisc\nnode_modules\ntest\ntools\n.idea\ncomponent.json\n.npmignore\n.gitignore\n*.zip\nnpm-d"
},
{
"path": "CONTRIBUTING.md",
"chars": 671,
"preview": "## Contributing\n\nContributions to the `jsoneditor` library are very welcome! We can't do this\nalone. You can contribute "
},
{
"path": "HISTORY.md",
"chars": 55837,
"preview": "# JSON Editor - History\n\n<https://github.com/josdejong/jsoneditor>\n\n## 2025-10-15, version 10.4.2\n\n- Fix: #1680 ensure t"
},
{
"path": "LICENSE",
"chars": 10171,
"preview": " Apache License\n Version 2.0, January 2004\n "
},
{
"path": "NOTICE",
"chars": 614,
"preview": "JSON Editor\nhttps://github.com/josdejong/jsoneditor\n\nCopyright (C) 2011-2026 Jos de Jong\n\n\nLicensed under the Apache Lic"
},
{
"path": "README.md",
"chars": 6288,
"preview": "# JSON Editor\n\n[](https://www.npmjs.com/package/jsoneditor)\n[![Do"
},
{
"path": "SECURITY.md",
"chars": 210,
"preview": "# Security Policy\n\n## Reporting a Vulnerability\n\nPlease report (suspected) security vulnerabilities privately to one of "
},
{
"path": "docs/api.md",
"chars": 34655,
"preview": "# API Reference\n\n## JSONEditor\n\n### Constructor\n\n#### `JSONEditor(container [, options [, json]])`\n\nConstructs a new JSO"
},
{
"path": "docs/shortcut_keys.md",
"chars": 1527,
"preview": "# Shortcut keys\n\n## Tree Editor\n\nKey | Description\n----------------------- | -----------------------"
},
{
"path": "docs/styling.md",
"chars": 1163,
"preview": "# Styling Reference\n\nDocumentation for writing custom JSON Editor styles.\n\n## Node\nNode is the fundamental unit that mak"
},
{
"path": "docs/usage.md",
"chars": 2580,
"preview": "# Usage\n\n### Install\n\nInstall via npm:\n\n npm install jsoneditor\n\nAlternatively, you can use another JavaScript packag"
},
{
"path": "examples/01_basic_usage.html",
"chars": 1199,
"preview": "<!DOCTYPE HTML>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n\n <title>JSONEditor | Basic usage</title>\n\n <link hre"
},
{
"path": "examples/02_viewer.html",
"chars": 807,
"preview": "<!DOCTYPE HTML>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n\n <title>JSONEditor | Viewer</title>\n\n <link href=\".."
},
{
"path": "examples/03_switch_mode.html",
"chars": 1385,
"preview": "<!DOCTYPE HTML>\n<html lang=\"en\">\n<head>\n <!-- when using the mode \"code\", it's important to specify charset utf-8 -->\n "
},
{
"path": "examples/04_load_and_save.html",
"chars": 2037,
"preview": "<!DOCTYPE HTML>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n\n <title>JSONEditor | Load and save</title>\n\n <link h"
},
{
"path": "examples/05_custom_fields_editable.html",
"chars": 1360,
"preview": "<!DOCTYPE HTML>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n\n <title>JSONEditor | Custom editable fields</title>\n\n"
},
{
"path": "examples/06_custom_styling.html",
"chars": 1251,
"preview": "<!DOCTYPE HTML>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n\n <title>JSONEditor | Custom styling</title>\n\n "
},
{
"path": "examples/07_json_schema_validation.html",
"chars": 3094,
"preview": "<!DOCTYPE HTML>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n\n <title>JSONEditor | JSON schema validation</title>\n\n"
},
{
"path": "examples/08_custom_ace.html",
"chars": 1747,
"preview": "<!DOCTYPE HTML>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n\n <title>JSONEditor | Custom Ace</title>\n\n <!-- load "
},
{
"path": "examples/09_readonly_text_mode.html",
"chars": 1560,
"preview": "<!DOCTYPE HTML>\n<html lang=\"en\">\n<head>\n <!-- when using the mode \"code\", it's important to specify charset utf-8 -->\n "
},
{
"path": "examples/10_templates.html",
"chars": 1529,
"preview": "<!DOCTYPE HTML>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n\n <title>JSONEditor | Item templates</title>\n\n <link "
},
{
"path": "examples/11_autocomplete_basic.html",
"chars": 1192,
"preview": "<!DOCTYPE HTML>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n\n <title>JSONEditor | Auto Complete</title>\n\n <link h"
},
{
"path": "examples/12_autocomplete_dynamic.html",
"chars": 1806,
"preview": "<!DOCTYPE HTML>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n\n <title>JSONEditor | Dynamic Auto Complete</title>\n\n "
},
{
"path": "examples/13_autocomplete_advanced.html",
"chars": 3252,
"preview": "<!DOCTYPE HTML>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n\n <title>JSONEditor | Advanced Auto Complete</title>\n"
},
{
"path": "examples/14_translate.html",
"chars": 1184,
"preview": "<!DOCTYPE HTML>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <title>JSONEditor | Translate</title>\n\n <link href=\""
},
{
"path": "examples/15_selection_api.html",
"chars": 3110,
"preview": "<!DOCTYPE HTML>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n\n <link href=\"../dist/jsoneditor.css\" rel=\"stylesheet\""
},
{
"path": "examples/16_synchronize_editors.html",
"chars": 1486,
"preview": "<!DOCTYPE HTML>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n\n <title>JSONEditor | Synchronize two editors</title>\n"
},
{
"path": "examples/17_on_event_api.html",
"chars": 1809,
"preview": "<!DOCTYPE HTML>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n\n <link href=\"../dist/jsoneditor.css\" rel=\"stylesheet\""
},
{
"path": "examples/18_custom_validation.html",
"chars": 3002,
"preview": "<!DOCTYPE HTML>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n\n <title>JSONEditor | Custom validation</title>\n\n <li"
},
{
"path": "examples/19_custom_validation_async.html",
"chars": 2540,
"preview": "<!DOCTYPE HTML>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n\n <title>JSONEditor | Custom validation (asynchronous)"
},
{
"path": "examples/20_custom_css_style_for_nodes.html",
"chars": 3629,
"preview": "<!DOCTYPE HTML>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n\n <script\n src=\"https://cdnjs.cloudflare.com/ajax/l"
},
{
"path": "examples/21_customize_context_menu.html",
"chars": 5073,
"preview": "<!DOCTYPE HTML>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n\n <title>JSONEditor | Basic usage</title>\n\n <link hre"
},
{
"path": "examples/22_on_validation_event.html",
"chars": 3466,
"preview": "<!DOCTYPE HTML>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n\n <title>JSONEditor | onValidationError</title>\n\n <li"
},
{
"path": "examples/23_custom_query_language.html",
"chars": 3742,
"preview": "<!DOCTYPE HTML>\n<html lang=\"en\">\n<head>\n <title>JSONEditor | Custom query language</title>\n <meta charset=\"utf-8\" />\n "
},
{
"path": "examples/24_new_window.html",
"chars": 2383,
"preview": "<!DOCTYPE HTML>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n\n <title>JSONEditor | New window</title>\n\n <link href"
},
{
"path": "examples/25_sync_node_expand.html",
"chars": 1754,
"preview": "<!DOCTYPE HTML>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n\n <title>JSONEditor | Sync Node Expand</title>\n\n <lin"
},
{
"path": "examples/26_autocomplete_by_schema.html",
"chars": 5123,
"preview": "<!DOCTYPE HTML>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n\n <title>JSONEditor | Auto-completion by schema</title"
},
{
"path": "examples/27_autocomplete_by_schema_recursive_refs.html",
"chars": 6001,
"preview": "<!DOCTYPE HTML>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n\n <title>JSONEditor | Auto-completion by schema</title"
},
{
"path": "examples/28_autocomplete_text_value_objects.html",
"chars": 2182,
"preview": "<!DOCTYPE HTML>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n\n <title>JSONEditor | Auto Complete with Text/Value Ob"
},
{
"path": "examples/29_autocomplete_multiple_fields.html",
"chars": 4333,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\" />\n\n <title>JSONEditor | Auto Complete with Multi"
},
{
"path": "examples/css/darktheme.css",
"chars": 1822,
"preview": "/* dark styling of the editor */\ndiv.jsoneditor,\ndiv.jsoneditor-menu {\n border-color: #4b4b4b;\n}\ndiv.jsoneditor-menu {\n"
},
{
"path": "examples/react_advanced_demo/.gitignore",
"chars": 285,
"preview": "# See https://help.github.com/ignore-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n\n# testing\n/cov"
},
{
"path": "examples/react_advanced_demo/README.md",
"chars": 312,
"preview": "# JSONEditor React advanced demo\n\nThis project was bootstrapped with [Create React App](https://github.com/facebookincub"
},
{
"path": "examples/react_advanced_demo/package.json",
"chars": 636,
"preview": "{\n \"name\": \"react_advanced_demo\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"dependencies\": {\n \"jsoneditor\": \"lates"
},
{
"path": "examples/react_advanced_demo/public/index.html",
"chars": 1280,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-wid"
},
{
"path": "examples/react_advanced_demo/src/App.css",
"chars": 163,
"preview": ".app .contents {\n width: 500px;\n height: 400px;\n}\n\n.app .contents .mode {\n padding: 10px 0;\n}\n\n.app .contents .code {"
},
{
"path": "examples/react_advanced_demo/src/App.js",
"chars": 1908,
"preview": "import React, { Component } from 'react';\n\nimport JSONEditorReact from './JSONEditorReact';\nimport './App.css';\n\nconst s"
},
{
"path": "examples/react_advanced_demo/src/App.test.js",
"chars": 248,
"preview": "import React from 'react';\nimport ReactDOM from 'react-dom';\nimport App from './App';\n\nit('renders without crashing', ()"
},
{
"path": "examples/react_advanced_demo/src/JSONEditorReact.css",
"chars": 63,
"preview": ".jsoneditor-react-container {\n width: 100%;\n height: 100%;\n}\n"
},
{
"path": "examples/react_advanced_demo/src/JSONEditorReact.js",
"chars": 1935,
"preview": "import React, {Component} from 'react';\nimport isEqual from 'lodash/isEqual';\nimport cloneDeep from 'lodash/cloneDeep';\n"
},
{
"path": "examples/react_advanced_demo/src/index.css",
"chars": 36,
"preview": "body {\n font-family: sans-serif;\n}\n"
},
{
"path": "examples/react_advanced_demo/src/index.js",
"chars": 225,
"preview": "import React from 'react'\nimport { createRoot } from 'react-dom/client'\nimport App from './App'\nimport './index.css'\n\nco"
},
{
"path": "examples/react_demo/.gitignore",
"chars": 285,
"preview": "# See https://help.github.com/ignore-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n\n# testing\n/cov"
},
{
"path": "examples/react_demo/README.md",
"chars": 303,
"preview": "# JSONEditor React demo\n\nThis project was bootstrapped with [Create React App](https://github.com/facebookincubator/crea"
},
{
"path": "examples/react_demo/package.json",
"chars": 602,
"preview": "{\n \"name\": \"react_demo\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"dependencies\": {\n \"jsoneditor\": \"latest\",\n \""
},
{
"path": "examples/react_demo/public/index.html",
"chars": 1271,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-wid"
},
{
"path": "examples/react_demo/src/App.css",
"chars": 145,
"preview": ".app .contents {\n width: 500px;\n height: 400px;\n}\n\n.app .contents .menu {\n padding: 10px 0;\n}\n\n.app .contents .code {"
},
{
"path": "examples/react_demo/src/App.js",
"chars": 1220,
"preview": "import React, { Component } from 'react';\n\nimport JSONEditorDemo from './JSONEditorDemo';\nimport './App.css';\n\nclass App"
},
{
"path": "examples/react_demo/src/App.test.js",
"chars": 248,
"preview": "import React from 'react';\nimport ReactDOM from 'react-dom';\nimport App from './App';\n\nit('renders without crashing', ()"
},
{
"path": "examples/react_demo/src/JSONEditorDemo.css",
"chars": 63,
"preview": ".jsoneditor-react-container {\n width: 100%;\n height: 100%;\n}\n"
},
{
"path": "examples/react_demo/src/JSONEditorDemo.js",
"chars": 741,
"preview": "import React, {Component} from 'react';\n\nimport JSONEditor from 'jsoneditor';\nimport 'jsoneditor/dist/jsoneditor.css';\n\n"
},
{
"path": "examples/react_demo/src/index.css",
"chars": 36,
"preview": "body {\n font-family: sans-serif;\n}\n"
},
{
"path": "examples/react_demo/src/index.js",
"chars": 226,
"preview": "import React from 'react'\nimport { createRoot } from 'react-dom/client'\nimport App from './App'\nimport './index.css'\n\nco"
},
{
"path": "examples/requirejs_demo/requirejs_demo.html",
"chars": 515,
"preview": "<!DOCTYPE HTML>\n<html>\n<head>\n <title>JSONEditor | Require.js demo</title>\n <style type=\"text/css\">\n #jsoneditor {\n"
},
{
"path": "examples/requirejs_demo/scripts/main.js",
"chars": 639,
"preview": "const module = '../../../dist/jsoneditor'\nrequire([module], function (JSONEditor) {\n // create the editor\n const conta"
},
{
"path": "greenkeeper.json",
"chars": 193,
"preview": "{\n \"groups\": {\n \"default\": {\n \"packages\": [\n \"examples/react_advanced_demo/package.json\",\n \"examp"
},
{
"path": "gulpfile.js",
"chars": 6214,
"preview": "const fs = require('fs')\nconst path = require('path')\nconst gulp = require('gulp')\nconst log = require('fancy-log')\ncons"
},
{
"path": "index.js",
"chars": 46,
"preview": "module.exports = require('./dist/jsoneditor')\n"
},
{
"path": "misc/how_to_publish.md",
"chars": 1283,
"preview": "# How to publish jsoneditor\n\nThis document describes the steps required to publish a new version of jsoneditor.\n\n\n## Upd"
},
{
"path": "package.json",
"chars": 1938,
"preview": "{\n \"name\": \"jsoneditor\",\n \"version\": \"10.4.2\",\n \"main\": \"./dist/jsoneditor.min.js\",\n \"description\": \"A web-based too"
},
{
"path": "src/docs/which files do I need.md",
"chars": 1335,
"preview": "# Which files do I need?\n\nEhhh, that's quite some files in this dist folder. Which files do I need?\n\n\n## Full version\n\nI"
},
{
"path": "src/js/ContextMenu.js",
"chars": 14406,
"preview": "'use strict'\n\nimport { createAbsoluteAnchor } from './createAbsoluteAnchor'\nimport { addClassName, getSelection, removeC"
},
{
"path": "src/js/ErrorTable.js",
"chars": 7339,
"preview": "/**\n * Show errors and schema warnings in a clickable table view\n * @param {Object} config\n * @property {boolean} errorT"
},
{
"path": "src/js/FocusTracker.js",
"chars": 3396,
"preview": "'use strict'\n\n/**\n * @constructor FocusTracker\n * A custom focus tracker for a DOM element with complex internal DOM str"
},
{
"path": "src/js/Highlighter.js",
"chars": 1779,
"preview": "'use strict'\n\n/**\n * The highlighter can highlight/unhighlight a node, and\n * animate the visibility of a context menu.\n"
},
{
"path": "src/js/History.js",
"chars": 1557,
"preview": "/**\n * Keep track on any history, be able\n * @param {function} onChange\n * @param {function} calculateItemSize\n * @param"
},
{
"path": "src/js/JSONEditor.js",
"chars": 19222,
"preview": "'use strict'\n\nconst ace = require('./ace') // may be undefined in case of minimalist bundle\nconst VanillaPicker = requir"
},
{
"path": "src/js/ModeSwitcher.js",
"chars": 3220,
"preview": "'use strict'\n\nimport { ContextMenu } from './ContextMenu'\nimport { translate } from './i18n'\n\n/**\n * Create a select box"
},
{
"path": "src/js/Node.js",
"chars": 136390,
"preview": "'use strict'\n\nimport naturalSort from 'javascript-natural-sort'\nimport { createAbsoluteAnchor } from './createAbsoluteAn"
},
{
"path": "src/js/NodeHistory.js",
"chars": 9907,
"preview": "'use strict'\n\nimport { findUniqueName } from './util'\n\n/**\n * @constructor History\n * Store action history, enables undo"
},
{
"path": "src/js/SchemaTextCompleter.js",
"chars": 8326,
"preview": "'use strict'\n\nimport * as jsonMap from 'json-source-map'\nimport {\n isArray,\n isObject,\n uniqueMergeArrays,\n asyncExe"
},
{
"path": "src/js/SearchBox.js",
"chars": 8780,
"preview": "'use strict'\nimport { translate } from './i18n'\n\n/**\n * @constructor SearchBox\n * Create a search box in given HTML cont"
},
{
"path": "src/js/TreePath.js",
"chars": 4249,
"preview": "'use strict'\n\nimport { ContextMenu } from './ContextMenu'\nimport { translate } from './i18n'\nimport { addClassName, remo"
},
{
"path": "src/js/ace/index.js",
"chars": 775,
"preview": "let ace\nif (window.ace) {\n // use the already loaded instance of Ace\n ace = window.ace\n} else {\n try {\n // load Ac"
},
{
"path": "src/js/ace/theme-jsoneditor.js",
"chars": 4477,
"preview": "/* ***** BEGIN LICENSE BLOCK *****\n * Distributed under the BSD license:\n *\n * Copyright (c) 2010, Ajax.org B.V.\n * All "
},
{
"path": "src/js/appendNodeFactory.js",
"chars": 6779,
"preview": "'use strict'\n\nimport { ContextMenu } from './ContextMenu'\nimport { translate } from './i18n'\nimport { addClassName, remo"
},
{
"path": "src/js/assets/jsonlint/README.md",
"chars": 576,
"preview": "The file jsonlint.js is copied from the following project:\n\nhttps://github.com/josdejong/jsonlint at 85a19d7\n\nwhich is "
},
{
"path": "src/js/assets/jsonlint/jsonlint.js",
"chars": 15545,
"preview": "/* Jison generated parser */\nvar jsonlint = (function(){\nvar parser = {trace: function trace() { },\nyy: {},\nsymbols_: {\""
},
{
"path": "src/js/assets/selectr/README.md",
"chars": 187,
"preview": "This is a copy of the Selectr project\n\nhttps://github.com/Mobius1/Selectr\n\nReason is that the project is not maintained "
},
{
"path": "src/js/assets/selectr/selectr.js",
"chars": 58074,
"preview": "/*!\n * Selectr 2.4.13\n * http://mobius.ovh/docs/selectr\n *\n * Released under the MIT license\n */\n\n'use strict';\n\n/**\n * "
},
{
"path": "src/js/assets/selectr/selectr.scss",
"chars": 10332,
"preview": "@use \"../../../scss/jsoneditor/variables\";\n\n/*!\n * Selectr 2.4.13\n * http://mobius.ovh/docs/selectr\n *\n * Released under"
},
{
"path": "src/js/autocomplete.js",
"chars": 18404,
"preview": "'use strict'\n\n// Helper functions for handling both string and object option formats\nconst getOptionText = (option) => {"
},
{
"path": "src/js/constants.js",
"chars": 214,
"preview": "export const DEFAULT_MODAL_ANCHOR = document.body\nexport const SIZE_LARGE = 10 * 1024 * 1024 // 10 MB\nexport const MAX_P"
},
{
"path": "src/js/createAbsoluteAnchor.js",
"chars": 3032,
"preview": "import { isChildOf, removeEventListener, addEventListener } from './util'\n\n/**\n * Create an anchor element absolutely po"
},
{
"path": "src/js/header.js",
"chars": 989,
"preview": "/*!\n * jsoneditor.js\n *\n * @brief\n * JSONEditor is a web-based tool to view, edit, format, and validate JSON.\n * It has "
},
{
"path": "src/js/i18n.js",
"chars": 42834,
"preview": "'use strict'\n\n/* eslint-disable no-template-curly-in-string */\n\nimport './polyfills'\n\nconst _defs = {\n en: {\n array:"
},
{
"path": "src/js/jmespathQuery.js",
"chars": 1999,
"preview": "import jmespath from 'jmespath'\nimport { get, parsePath, parseString } from './util'\n\n/**\n * Build a JMESPath query base"
},
{
"path": "src/js/jsonUtils.js",
"chars": 4917,
"preview": "'use strict'\n\n/**\n * Convert part of a JSON object to a JSON string.\n * Use case is to stringify a small part of a large"
},
{
"path": "src/js/polyfills.js",
"chars": 1773,
"preview": "if (typeof Element !== 'undefined') {\n // Polyfill for array remove\n (() => {\n function polyfill (item) {\n if "
},
{
"path": "src/js/previewmode.js",
"chars": 18162,
"preview": "'use strict'\n\nimport { jsonrepair } from 'jsonrepair'\nimport {\n DEFAULT_MODAL_ANCHOR,\n MAX_PREVIEW_CHARACTERS,\n PREVI"
},
{
"path": "src/js/showMoreNodeFactory.js",
"chars": 4607,
"preview": "'use strict'\n\nimport { translate } from './i18n'\n\n/**\n * A factory function to create an ShowMoreNode, which depends on "
},
{
"path": "src/js/showSortModal.js",
"chars": 4281,
"preview": "import picoModal from 'picomodal'\nimport { translate } from './i18n'\nimport { contains, getChildPaths } from './util'\n\n/"
},
{
"path": "src/js/showTransformModal.js",
"chars": 11527,
"preview": "import picoModal from 'picomodal'\nimport Selectr from './assets/selectr/selectr'\nimport { translate } from './i18n'\nimpo"
},
{
"path": "src/js/textmode.js",
"chars": 31638,
"preview": "'use strict'\n\nimport { jsonrepair } from 'jsonrepair'\nimport ace from './ace'\nimport { DEFAULT_MODAL_ANCHOR } from './co"
},
{
"path": "src/js/treemode.js",
"chars": 53433,
"preview": "'use strict'\n\nimport { autocomplete } from './autocomplete'\nimport { ContextMenu } from './ContextMenu'\nimport { FocusTr"
},
{
"path": "src/js/tryRequireAjv.js",
"chars": 165,
"preview": "exports.tryRequireAjv = function () {\n try {\n return require('ajv')\n } catch (err) {\n // no problem... when we n"
},
{
"path": "src/js/tryRequireThemeJsonEditor.js",
"chars": 143,
"preview": "exports.tryRequireThemeJsonEditor = function () {\n try {\n require('./ace/theme-jsoneditor')\n } catch (err) {\n co"
},
{
"path": "src/js/types.js",
"chars": 520,
"preview": "/**\n * @typedef {object} QueryOptions\n * @property {FilterOptions} [filter]\n * @property {SortOptions} [sort]\n * @proper"
},
{
"path": "src/js/util.js",
"chars": 35485,
"preview": "'use strict'\n\nimport './polyfills'\nimport naturalSort from 'javascript-natural-sort'\nimport { jsonrepair } from 'jsonrep"
},
{
"path": "src/js/validationUtils.js",
"chars": 1408,
"preview": "import { isPromise, isValidValidationError, stringifyPath } from './util'\n\n/**\n * Execute custom validation if configure"
},
{
"path": "src/js/vanilla-picker/index.js",
"chars": 316,
"preview": "let VanillaPicker\n\nif (window.Picker) {\n // use the already loaded instance of VanillaPicker\n VanillaPicker = window.P"
},
{
"path": "src/scss/img/description.txt",
"chars": 291,
"preview": "JSON Editor Icons\n\nsize: outer: 24x24 px\n inner: 16x16 px \n\nblue background: RGBA 97b0f8ff"
},
{
"path": "src/scss/jsoneditor/_autocomplete.scss",
"chars": 746,
"preview": "@use \"variables\";\n\n.jsoneditor {\r\n .autocomplete {\r\n &.dropdown {\r\n position: absolute;\r\n background: vari"
},
{
"path": "src/scss/jsoneditor/_contextmenu.scss",
"chars": 10555,
"preview": "@use \"variables\";\n\n.jsoneditor-contextmenu-root {\n position: relative;\n width: 0;\n height: 0;\n}\n.jsoneditor-contextme"
},
{
"path": "src/scss/jsoneditor/_editor.scss",
"chars": 13853,
"preview": "@use \"variables\";\n\n.jsoneditor {\n color: variables.$jse-content-color;\n border: thin solid variables.$jse-blue;\n -moz"
},
{
"path": "src/scss/jsoneditor/_menu.scss",
"chars": 3273,
"preview": "@use \"variables\";\n\n.jsoneditor-menu {\n width: 100%;\n height: 35px;\n padding: 2px;\n margin: 0;\n -moz-box-sizing: bor"
},
{
"path": "src/scss/jsoneditor/_navigationbar.scss",
"chars": 466,
"preview": "@use \"variables\";\n\n.jsoneditor-navigation-bar {\r\n width: 100%;\r\n height: 26px;\r\n line-height: 26px;\r\n padding: 0;\r\n "
},
{
"path": "src/scss/jsoneditor/_reset.scss",
"chars": 839,
"preview": ".jsoneditor,\n.jsoneditor-modal {\n -webkit-text-size-adjust: none;\n text-size-adjust: none;\n\n input,\n input:not([type"
},
{
"path": "src/scss/jsoneditor/_searchbox.scss",
"chars": 1426,
"preview": "@use \"variables\";\n\n.jsoneditor {\n &-search {\n font-family: variables.$jse-font;\n position: absolute;\n right: 4"
},
{
"path": "src/scss/jsoneditor/_statusbar.scss",
"chars": 1224,
"preview": "@use \"variables\";\n\n.jsoneditor-statusbar {\n line-height: 26px;\n height: 26px;\n color: variables.$jse-readonly;\n back"
},
{
"path": "src/scss/jsoneditor/_treepath.scss",
"chars": 1118,
"preview": "@use \"variables\";\n\n.jsoneditor-treepath {\n padding: 0 5px;\n overflow: hidden;\n white-space: nowrap;\n outline: none;\n"
},
{
"path": "src/scss/jsoneditor/_variables.scss",
"chars": 1557,
"preview": "$jse-white: #ffffff !default;\n$jse-grey: #999999 !default;\n$jse-light-bg: #ebebeb !default;\n$jse-blue: #3883fa !default;"
},
{
"path": "src/scss/jsoneditor.scss",
"chars": 323,
"preview": "@use \"jsoneditor/reset\";\n@use \"jsoneditor/variables\";\n@use \"jsoneditor/autocomplete\";\n@use \"jsoneditor/contextmenu\";\n@us"
},
{
"path": "test/Node.test.js",
"chars": 17874,
"preview": "import assert from 'assert'\nimport './setup'\nimport { Node } from '../src/js/Node'\n\ndescribe('Node', () => {\n describe("
},
{
"path": "test/SchemaTextCompleter.test.js",
"chars": 2685,
"preview": "import assert from 'assert'\nimport { schema, schemaRefs } from './data/schemas'\nimport { autocompleteJsonStr } from './d"
},
{
"path": "test/couchdbeditor.html",
"chars": 2462,
"preview": "<!DOCTYPE HTML>\n<html>\n<head>\n <title>CouchDB Document Editor</title>\n \n <meta name=\"description\" content=\"CouchDB Do"
},
{
"path": "test/data/jsons.js",
"chars": 937,
"preview": "export const autocompleteJsonStr = `{\n \"personalDetails\": {\n \"firstName\": \"John\",\n \"lastName\": \"Doe\",\n \"gender"
},
{
"path": "test/data/schemas.js",
"chars": 3194,
"preview": "const employeeSchema = {\n title: 'Employee',\n description: 'Object containing employee details',\n type: 'object',\n a"
},
{
"path": "test/jsonUtils.test.js",
"chars": 2533,
"preview": "import assert from 'assert'\nimport { stringifyPartial, containsArray } from '../src/js/jsonUtils'\n\ndescribe('jsonUtils',"
},
{
"path": "test/setup.js",
"chars": 672,
"preview": "import { JSDOM } from 'jsdom'\n\n/**\n * Set up the test environment by simulating browser globals.\n * @param {string} [loc"
},
{
"path": "test/test_bootstrap.html",
"chars": 1306,
"preview": "<!DOCTYPE HTML>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n\n <link href=\"//cdnjs.cloudflare.com/ajax/libs/twitter"
},
{
"path": "test/test_build.html",
"chars": 3482,
"preview": "<!DOCTYPE HTML>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n\n <link href=\"../dist/jsoneditor.css\" rel=\"stylesheet\""
},
{
"path": "test/test_build_min.html",
"chars": 1263,
"preview": "<!DOCTYPE HTML>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n\n <link href=\"../dist/jsoneditor.min.css\" rel=\"stylesh"
},
{
"path": "test/test_code_mode.html",
"chars": 1932,
"preview": "<!DOCTYPE HTML>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n\n <link href=\"../dist/jsoneditor.css\" rel=\"stylesheet\""
},
{
"path": "test/test_color_picker.html",
"chars": 2028,
"preview": "<!DOCTYPE HTML>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n\n <link href=\"../dist/jsoneditor.css\" rel=\"stylesheet\""
},
{
"path": "test/test_destroy.html",
"chars": 1783,
"preview": "<!DOCTYPE HTML>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n\n <link href=\"../dist/jsoneditor.css\" rel=\"stylesheet\""
},
{
"path": "test/test_enum.html",
"chars": 1286,
"preview": "<!DOCTYPE HTML>\n<html>\n<head>\n <title>JSONEditor | template + enums</title>\n\n <link href=\"../dist/jsoneditor.css\" "
},
{
"path": "test/test_enum_2.html",
"chars": 2998,
"preview": "<!DOCTYPE HTML>\n<html>\n<head>\n <title>JSONEditor | template + enums</title>\n\n <link href=\"../dist/jsoneditor.css\" "
},
{
"path": "test/test_focus_tracker.html",
"chars": 2150,
"preview": "<!DOCTYPE HTML>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n\n <link href=\"../dist/jsoneditor.css\" rel=\"stylesheet\""
},
{
"path": "test/test_get_inner_text.html",
"chars": 2377,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n\n <title>JSONEditor test getInnerHtml</title>\n\n <link"
},
{
"path": "test/test_large_array.html",
"chars": 1731,
"preview": "<!DOCTYPE HTML>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n\n <link href=\"../dist/jsoneditor.css\" rel=\"stylesheet\""
},
{
"path": "test/test_materialize.html",
"chars": 1859,
"preview": "<!DOCTYPE HTML>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n\n <!-- materialize css -->\n <link rel=\"stylesheet\" hr"
},
{
"path": "test/test_minimalist_min.html",
"chars": 1274,
"preview": "<!DOCTYPE HTML>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n\n <link href=\"../dist/jsoneditor.min.css\" rel=\"stylesh"
},
{
"path": "test/test_popup_anchor.html",
"chars": 3137,
"preview": "<!DOCTYPE HTML>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n\n <title>JSONEditor | JSON schema validation</title>\n\n"
},
{
"path": "test/test_preview_load_save.html",
"chars": 2087,
"preview": "<!DOCTYPE HTML>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n\n <title>JSONEditor | Preview mode load and save</titl"
},
{
"path": "test/test_schema.html",
"chars": 2438,
"preview": "<!DOCTYPE HTML>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n\n <link href=\"../dist/jsoneditor.css\" rel=\"stylesheet\""
},
{
"path": "test/test_update.html",
"chars": 2543,
"preview": "<!DOCTYPE HTML>\n<html lang=\"en\">\n<head>\n <!-- when using the mode \"code\", it's important to specify charset utf-8 -->"
},
{
"path": "test/util.test.js",
"chars": 17553,
"preview": "import assert from 'assert'\nimport {\n compileJSONPointer,\n findUniqueName,\n formatSize,\n get,\n getChildPaths,\n get"
}
]
About this extraction
This page contains the full source code of the josdejong/jsoneditor GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 152 files (863.6 KB), approximately 226.8k tokens, and a symbol index with 327 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.