JSON
The JSON editor shows one document four ways. A tree to edit values in place, rename keys, add, move and delete; the text, with highlighting, folding and mistakes underlined; a table of any array of objects, sortable and editable; and the changes against another version, items matched by a key of your choosing rather than by their place.
A JSON Schema (2020-12 or draft-07) checks the document as it is edited: problems are marked where they
are and listed with a link to each, the schema's titles and descriptions sit beside the keys, its
enum values become choices and its defaults fill new members. Nothing is fetched and nothing
is sent; the document is yours.
A service's settings
The settings of a billing service, checked against its schema. Try a negative timeout, a region that does not exist, or a key the schema does not allow; the problems list leads to each one. The Changes view compares with the published version, regions matched by name.
Get the code
<script src="/assets/bmx-components.min.js"></script> <bmx-json-editor id="je-settings" label="Service settings" array-key="name" expand-depth="2" style="inline-size: 100%"></bmx-json-editor>
An array as a table
Orders from an API, shown as a table: sort by any column, edit a cell, and the tree and the text follow. Switch views at any time; it is one document.
Get the code
<script src="/assets/bmx-components.min.js"></script> <bmx-json-editor id="je-orders" label="Orders" view="table" style="inline-size: 100%"></bmx-json-editor>
Your page has the last word
Every edit is offered to the page first. Here the page refuses any change under locked,
and says why; everything else goes through, and can be undone.
Get the code
<script src="/assets/bmx-components.min.js"></script> <bmx-json-editor id="je-rules" label="Feature flags" expand-depth="2" style="inline-size: 100%"></bmx-json-editor>
Two hundred thousand values
Only the rows in view are drawn, so a large document opens quickly and scrolls smoothly. Build one in the page and search it: the tree narrows to what matches.
Get the code
<script src="/assets/bmx-components.min.js"></script> <bmx-json-editor id="je-large" label="Sensor readings" readonly expand-depth="1" style="inline-size: 100%"></bmx-json-editor>